简单的注册模块表单验证处理
一个注册框 进行表单验证处理
如图
有简单的验证提示功能
具体可以 查看演示
代码思路也比较简单
输入框失去焦点时便检测，并进行处理
表单具有 onsubmit = "return check()"行为，处理验证情况
点击提交表单按钮时，进行最终的验证，达到是否通过表单提交的请求。
先是最基本的html+css部分
1 <style type="text/css">
2 body{margin:0;padding: 0;}
3 .login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}
4 .login legend{font-weight: bold;color: green;text-align: center;}
5 .login label{display:inline-block;width:130px;text-align: right;}
6 .btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}
7 input{height: 20px;width: 170px;}
8 .borderRed{border: 2px solid red;}
9 img{display: none;}
10 </style>
11 </head>
12 <body>
13 <div class="login">
14 <form name="form" method="post" action="register.php" onsubmit="return check()">
15 <legend>【Register】</legend>
16 <p><label for="name">UserName: </label>
17 <input type="text" id="name" >
18 <img src="./img/gou.png" width="20px" height="20px"></p>
19 <p><label for="password">Password: </label>
20 <input type="password" id="password" >
21 <img src="./img/gantan.png" width="20px" height="20px"></p>
22 <p><label for="R_password">Password Again: </label>
23 <input type="password" id="R_password" >
24 <img src="./img/gou.png" width="20px" height="20px"></p>
25 <p><label for="email">Email: </label>
26 <input type="text" id="email" >
27 <img src="./img/gou.png" width="20px" height="20px"></p>
28 <p><input type="submit" value="Register" class="btn"></p>
29 </form>
30 </div>然后是js的class相关处理函数
function hasClass(obj,cls){ // 判断obj是否有此class
return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
}
function addClass(obj,cls){ //给 obj添加class
if(!this.hasClass(obj,cls)){
obj.className += " "+cls;
}
}
function removeClass(obj,cls){ //移除obj对应的class
if(hasClass(obj,cls)){
var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
obj.className = obj.className.replace(reg," ");
}
}然后是验证各个输入框的值
function checkName(name){ //验证name
if(name != ""){ //不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确
removeClass(ele.name,"borderRed"); //移除class
document.images[0].setAttribute("src","./img/gou.png"); //对应图标
document.images[0].style.display = "inline"; //显示
return true;
}else{ //name不符合
addClass(ele.name,"borderRed"); //添加class
document.images[0].setAttribute("src","./img/gantan.png"); //对应图标
document.images[0].style.display = "inline"; //显示
return false;
}
}
function checkPassw(passw1,passw2){ //验证密码
if(passw1 == "" || passw2 == "" || passw1 !== passw2){ //两次密码输入不为空且不等 不符合
addClass(ele.password,"borderRed");
addClass(ele.R_password,"borderRed");
document.images[1].setAttribute("src","./img/gantan.png");
document.images[1].style.display = "inline";
document.images[2].setAttribute("src","./img/gantan.png");
document.images[2].style.display = "inline";
return false;
}else{ //密码输入正确
removeClass(ele.password,"borderRed");
removeClass(ele.R_password,"borderRed");
document.images[1].setAttribute("src","./img/gou.png");
document.images[1].style.display = "inline";
document.images[2].setAttribute("src","./img/gou.png");
document.images[2].style.display = "inline";
return true;
}
}
function checkEmail(email){ //验证邮箱
var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
if(!pattern.test(email)){ //email格式不正确
addClass(ele.email,"borderRed");
document.images[3].setAttribute("src","./img/gantan.png");
document.images[3].style.display = "inline";
ele.email.select();
return false;
}else{ //格式正确
removeClass(ele.email,"borderRed");
document.images[3].setAttribute("src","./img/gou.png");
document.images[3].style.display = "inline";
return true;
}
}然后为各个输入框添加监听事件：
var ele = { //存放各个input字段obj
name: document.getElementById("name"),
password: document.getElementById("password"),
R_password: document.getElementById("R_password"),
email: document.getElementById("email")
};
ele.name.onblur = function(){ //name失去焦点则检测
checkName(ele.name.value);
}
ele.password.onblur = function(){ //password失去焦点则检测
checkPassw(ele.password.value,ele.R_password.value);
}
ele.R_password.onblur = function(){ //R_password失去焦点则检测
checkPassw(ele.password.value,ele.R_password.value);
}
ele.email.onblur = function(){ //email失去焦点则检测
checkEmail(ele.email.value);
}最后就是点击提交注册时调用的check()函数了
function check(){ //表单提交则验证开始
var ok = false;
var nameOk = false;
var emailOk = false;
var passwOk = false;
if(checkName(ele.name.value)){ nameOk = true; } //验证name
if(checkPassw(ele.password.value,ele.R_password.value)){ passwOk = true; } //验证password
if(checkEmail(ele.email.value)){ emailOk = true; } //验证email
if(nameOk && passwOk && emailOk){
alert("Tip: Register Success .."); //注册成功
//return true;
}
return false; //有误，注册失败
}完整代码：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta charset="utf-8">
5 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
6 <title>Register</title>
7 <meta name="description" content="">
8 <meta name="keywords" content="">
9 <link href="" rel="stylesheet">
10 <style type="text/css">
11 body{margin:0;padding: 0;}
12 .login{position:relative;margin:100px auto;padding:50px 20px;width: 350px;height: 200px;border:1px solid #333;}
13 .login legend{font-weight: bold;color: green;text-align: center;}
14 .login label{display:inline-block;width:130px;text-align: right;}
15 .btn{height: 30px;width:100px;padding: 5px;border:0;background-color: #00dddd;font-weight: bold;cursor: pointer;float: right;}
16 input{height: 20px;width: 170px;}
17 .borderRed{border: 2px solid red;}
18 img{display: none;}
19 </style>
20 </head>
21 <body>
22 <div class="login">
23 <form name="form" method="post" action="register.php" onsubmit="return check()">
24 <legend>【Register】</legend>
25 <p><label for="name">UserName: </label>
26 <input type="text" id="name" >
27 <img src="./img/gou.png" width="20px" height="20px"></p>
28 <p><label for="password">Password: </label>
29 <input type="password" id="password" >
30 <img src="./img/gantan.png" width="20px" height="20px"></p>
31 <p><label for="R_password">Password Again: </label>
32 <input type="password" id="R_password" >
33 <img src="./img/gou.png" width="20px" height="20px"></p>
34 <p><label for="email">Email: </label>
35 <input type="text" id="email" >
36 <img src="./img/gou.png" width="20px" height="20px"></p>
37 <p><input type="submit" value="Register" class="btn"></p>
38 </form>
39 </div>
40 <script type="text/javascript">
41 function hasClass(obj,cls){ // 判断obj是否有此class
42 return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
43 }
44 function addClass(obj,cls){ //给 obj添加class
45 if(!this.hasClass(obj,cls)){
46 obj.className += " "+cls;
47 }
48 }
49 function removeClass(obj,cls){ //移除obj对应的class
50 if(hasClass(obj,cls)){
51 var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
52 obj.className = obj.className.replace(reg," ");
53 }
54 }
55
56
57 function checkName(name){ //验证name
58 if(name != ""){ //不为空则正确，当然也可以ajax异步获取服务器判断用户名不重复则正确
59 removeClass(ele.name,"borderRed"); //移除class
60 document.images[0].setAttribute("src","./img/gou.png"); //对应图标
61 document.images[0].style.display = "inline"; //显示
62 return true;
63 }else{ //name不符合
64 addClass(ele.name,"borderRed"); //添加class
65 document.images[0].setAttribute("src","./img/gantan.png"); //对应图标
66 document.images[0].style.display = "inline"; //显示
67 return false;
68 }
69 }
70 function checkPassw(passw1,passw2){ //验证密码
71 if(passw1 == "" || passw2 == "" || passw1 !== passw2){ //两次密码输入不为空且不等 不符合
72 addClass(ele.password,"borderRed");
73 addClass(ele.R_password,"borderRed");
74 document.images[1].setAttribute("src","./img/gantan.png");
75 document.images[1].style.display = "inline";
76 document.images[2].setAttribute("src","./img/gantan.png");
77 document.images[2].style.display = "inline";
78 return false;
79 }else{ //密码输入正确
80 removeClass(ele.password,"borderRed");
81 removeClass(ele.R_password,"borderRed");
82 document.images[1].setAttribute("src","./img/gou.png");
83 document.images[1].style.display = "inline";
84 document.images[2].setAttribute("src","./img/gou.png");
85 document.images[2].style.display = "inline";
86 return true;
87 }
88 }
89 function checkEmail(email){ //验证邮箱
90 var pattern = /^([\.a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
91 if(!pattern.test(email)){ //email格式不正确
92 addClass(ele.email,"borderRed");
93 document.images[3].setAttribute("src","./img/gantan.png");
94 document.images[3].style.display = "inline";
95 ele.email.select();
96 return false;
97 }else{ //格式正确
98 removeClass(ele.email,"borderRed");
99 document.images[3].setAttribute("src","./img/gou.png");
100 document.images[3].style.display = "inline";
101 return true;
102 }
103 }
104
105
106 var ele = { //存放各个input字段obj
107 name: document.getElementById("name"),
108 password: document.getElementById("password"),
109 R_password: document.getElementById("R_password"),
110 email: document.getElementById("email")
111 };
112 ele.name.onblur = function(){ //name失去焦点则检测
113 checkName(ele.name.value);
114 }
115 ele.password.onblur = function(){ //password失去焦点则检测
116 checkPassw(ele.password.value,ele.R_password.value);
117 }
118 ele.R_password.onblur = function(){ //R_password失去焦点则检测
119 checkPassw(ele.password.value,ele.R_password.value);
120 }
121 ele.email.onblur = function(){ //email失去焦点则检测
122 checkEmail(ele.email.value);
123 }
124
125 function check(){ //表单提交则验证开始
126 var ok = false;
127 var nameOk = false;
128 var emailOk = false;
129 var passwOk = false;
130
131 if(checkName(ele.name.value)){ nameOk = true; } //验证name
132 if(checkPassw(ele.password.value,ele.R_password.value)){ passwOk = true; } //验证password
133 if(checkEmail(ele.email.value)){ emailOk = true; } //验证email
134
135 if(nameOk && passwOk && emailOk){
136 alert("Tip: Register Success .."); //注册成功
137 //return true;
138 }
139 return false; //有误，注册失败
140 }
141 </script>
142 </body>
143 </html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2015-04-10 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读