1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2 "http://www.w3.org/TR/html4/loose.dtd">
3 <html>
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312">
6 <title>25完整的表单验证</title>
7 <script type="text/javascript">
8 /*
9
10 需求： 1.用户名不能为空
11 2.用户名长度为6-14
12 3.密码不能为空
13 4.密码长度不能小于6
14 5.确认密码要与密码一致
15
16 */
17
18 //首先为String类扩展trim方法用来去除首尾空格
19 String.prototype.trim=function(){
20
21 return this.replace(/^\s+/,"").replace(/\+$/,"");
22
23 }
24
25 function checkUsername(username){//检查用户名是否符合要求
26
27 var flag=false;
28 username=username.trim();//将用户名首尾空格去掉
29 var usernameError=document.getElementById("usernameError");//获取span对象，用来展示用户名错误信息
30
31 if(username.length==0){
32
33 usernameError.innerHTML="<font color='red'>用户名不能为空</font>";
34 flag=false;
35
36 }else if(username.length<6||username.length>14){
37
38 usernameError.innerHTML="<font color='red'>用户名长度为6-14之间</font>"
39 flag=false;
40
41 }else{
42
43 usernameError.innerHTML="";
44 flag=true;
45
46 }
47 return flag;
48 }
49
50 function clearUsernameError(){//当输入用户名的文本框获得焦点则清楚用户名错误信息
51
52 var usernameError=document.getElementById("usernameError");
53 usernameError.innerHTML="";
54
55 }
56
57 function checkPwd(pwd){//检查密码是否符合要求
58
59 var flag=false;
60 var pwdError=document.getElementById("pwdError");//获取span对象，用来展示密码错误信息
61
62 if(pwd.length==0){
63
64 pwdError.innerHTML="<font color='red'>密码不能为空</font>"
65 flag=false;
66
67 }else if(pwd.length<6){
68
69 pwdError.innerHTML="<font color='red'>密码长度不可以小于6</font>"
70 flag=false;
71
72 }else{
73
74 pwdError.innerHTML="";
75 flag=true;
76
77 }
78 return flag;
79 }
80
81 function clearPwdError(){//当输入密码的文本框获得焦点的时候，清楚密码错误信息
82
83 var pwdError=document.getElementById("pwdError");
84 pwdError.innerHTML="";
85
86 }
87
88 function checkSame(conformPwd){//检查验密码与密码是否一致
89
90 var flag=false;
91 var pwd=document.getElementById("pwd").value;//获取密码值
92 var conformPwdError=document.getElementById("conformPwdError");
93 if(pwd!=conformPwd){//若两次面不一致，则出现错误信息
94
95 conformPwdError.innerHTML="<font color='red'>两次密码不一致</font>"
96 flag=false;
97
98 }else{
99
100 conformPwdError.innerHTML="";
101 flag=true;
102
103 }
104 return flag;
105 }
106
107 function clearConformPwdError(){//当第二次输出密码的文本框获得焦点的时候，则清除展示两次密码不一样的信息
108
109 var conformPwdError=document.getElementById("conformPwdError");
110 conformPwdError.innerHTML="";
111 }
112
113 function checkAll(){
114
115 var username=document.getElementById("username").value;
116 var pwd=document.getElementById("pwd").value;
117 var conformPwd=document.getElementById("conformPwd").value;
118
119 if(checkUsername(username)&&checkPwd(pwd)&&checkSame(conformPwd)){
120
121 document.forms["userForm"].action="http://localhost:8080/oa/register";
122 document.forms["userForm"].method="get";
123 document.forms["userForm"].submit();
124
125 }
126
127 }
128
129 </script>
130 </head>
131
132
133 <body>
134
135 <form name="userForm">
136
137 用户名
138 <input type="text" name="username" id="username" onblur="checkUsername(this.value)" onfocus="clearUsernameError()"/>
139 <span id="usernameError"></span>
140 </br>
141 密码
142 <input type="password" name="pwd" id="pwd" onblur="checkPwd(this.value)" onfocus="clearPwdError()"/>
143 <span id="pwdError"></span>
144 </br>
145 确认密码
146 <input type="password" name="conformPwd" id="conformPwd" onblur="checkSame(this.value)" onfocus="clearConformPwdError()"/>
147 <span id="conformPwdError"></span>
148 </br>
149
150 <input type="button" value="注册" onclick="checkAll()" />
151 </form>
152
153 </body>
154 </html>
