【JS】制作注册页面

使用js制作注册页面，使用正则表达式验证该数据是否符合要求

	
		
		
	
	
		

			
注册
			
			

				

					

						*用户名：
						
						
					
					

						*电子邮箱：
						
					
					

						*密码：
						
						
					
					

						
						*确认密码：
						
					
				
				
				提交
			
		
	

css页面

			body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			input{
				border:0;
			}
			.clear:after{
				content: "";
				display: block;
				clear: both;
			}
			.box{
				width: 500px;
				margin:30px auto;
				padding:30px 40px;
				border:1px solid #ddd;
				box-shadow: 0 0 10px #bbb;
				box-sizing: border-box;
			}
			.box h2{
				text-align: center;
				color:#666;
				font-size: 22px;
				line-height: 40px;
			}
			.box form{
				padding:15px 0;
			}
			.box form ul li{
				display: flex;
				height: 40px;
				line-height: 40px;
				margin-bottom: 15px;
			}
			.box form ul li input{
				border:1px solid #ddd;
				height: 38px;
				padding:0 10px;
				line-height: 38px;
				flex:1;
				box-sizing: border-box;
			}
			.box form ul li label{
				display: block;
				width: 120px;
			}
			.box form ul li label span{
				color:red;
				padding-right:10px;
			}
			.box form button{
				width: 100%;
				border:none;
				height: 40px;
				background-color: green;
				color:#fff;
			}

js页面

			//自定义验证用户名的方法
			function validate_strLenght(str){
				var regExp=/^(\w){6,20}$/;
				return regExp.test(str);
			}
			//自定义验证email方法
			function validate_email(str){
				var regExp=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
				return regExp.test(str);
			}
			//自定义验证密码的方法
			function validate_pwd(str){
				var regExp=/^[a-zA-Z]\w{5,15}/;
				return regExp.test(str);
			}
			//根据表单控件的id填写
			var username=document.getElementById("username");
			//通过id获取元素
			var email=document.getElementById("email");
			//根据表单控件pwd的id填写
			var pwd=document.getElementById("pwd");
			var pwdOk=document.getElementById("pwdOk");
			//通过标签名获取元素
			var form=document.getElementsByTagName("form")[0];
			//表单提交
			function formSubmit(){
				//使用自定义方法验证用户名、验证邮箱
				if(validate_strLenght(username.value)&&validate_email(email.value)&&validate_pwd(pwd.value)&&checkOk()){
					//调用表单提交方法
					document.getElementById("form").submit() ;
					alert("登录成功");
				}else{
					//控制台输出
					console.log("验证失败");
				}
			}
			//检查用户名
			username.onblur=function(){
				if(validate_strLenght(username.value)){
					console.log("用户名符合要求");
				}else{
					console.log("用户名不符合要求");
				}
			}
			//检查email
			email.onblur=function(){
				if(validate_email(email.value)){
					console.log("邮箱格式符合要求");
				}else{
					console.log("邮箱格式不符合要求");
				}
			}
			//密码框失去焦点的时候
			pwd.onblur=function(){
				if(validate_pwd(pwd.value)){
					console.log("密码符合要求");
				}else{
					console.log("密码不符合要求");
				}
			}
			function checkOk(){
				if(pwd.value==pwdOk.value){
					console.log("密码与重复密码一致");
					return true;
				}else{
					console.log("密码与重复密码不一致");
					return false;
				}
			}
			pwdOk.onkeyup=checkOk;