1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>注册</title>
6 <script type="text/javascript">
7 function check() {
8 var username = document.getElementById("username")
9 var usernameMsg = document.getElementById("usernameMsg")
10 var length = username.value.length //注意：是判断username的值（value）的长度
11 isPass = true;
12 if (length<3 || length>6){
13 // alert("用户名必须是3-6位");
14 usernameMsg.innerText="用户名必须是3-6位";
15 isPass=false;
16 }else {
17 usernameMsg.innerText="";
18 }
19
20 var email = document.getElementById("email").value; //注意：是判断email的值是否符合规则，不是判断email
21 var emailMsg =document.getElementById("emailMsg");
22 var regExp = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
23 if (regExp.test(email)==false){
24 // alert("请输入正确的邮箱地址");
25 emailMsg.innerText="请输入正确的邮箱地址";
26 isPass=false;
27 }else {
28 emailMsg.innerText="";
29 }
30
31 var password = document.getElementById("password").value; //注意：是判断password的值的长度
32 var passwordMsg = document.getElementById("passwordMsg");
33 if (password.length<6 || password.length>10){
34 // alert("密码必须是6-10位");
35 passwordMsg.innerText="密码必须是6-10位";
36 isPass=false;
37 }else {
38 passwordMsg.innerText="";
39 }
40
41 var rePassword = document.getElementById("rePassword").value; //注意：是判断rePassword的值和password的值是否相等
42 var rePasswordMsg = document.getElementById("rePasswordMsg");
43 if(rePassword != password) {
44 rePasswordMsg.innerText="两次输入的密码不一致";
45 isPass=false;
46 }else {rePasswordMsg.innerText=""}
47 return isPass;
48 }
49
50
51 //onbulr失去焦点的时候调用
52 function checkUsername(username) {
53 var usernameMsg = document.getElementById("usernameMsg")
54 var length = username.value.length
55 if (length<3 || length>6){
56 // alert("用户名必须是3-6位");
57 usernameMsg.innerText="用户名必须是3-6位";
58 }else {
59 usernameMsg.innerText="";
60 }
61 }
62 function checkEmail(email) {
63 var emailMsg =document.getElementById("emailMsg");
64 var regExp = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/;
65 if (regExp.test(email.value)==false){
66 // alert("请输入正确的邮箱地址");
67 emailMsg.innerText="请输入正确的邮箱地址";
68 }else {
69 emailMsg.innerText="";
70 }
71 }
72 function checkPassword(password) {
73 var passwordMsg = document.getElementById("passwordMsg");
74 if (password.value.length<6 || password.value.length>10){
75 // alert("密码必须是6-10位");
76 passwordMsg.innerText="密码必须是6-10位";
77 }else {
78 passwordMsg.innerText="";
79 }
80 }
81 function checkRePassword(rePassword) {
82 var password = document.getElementById("password")
83 var rePasswordMsg = document.getElementById("rePasswordMsg");
84 if(rePassword.value != password.value) {
85 rePasswordMsg.innerText="两次输入的密码不一致";
86 }else {rePasswordMsg.innerText=""}
87 }
88 </script>
89 </head>
90 <body>
91 <form action="register.jsp" onsubmit="return check()">
92 <table border="1" width="500px" height="500px">
93 <tr>
94 <td colspan="2" align="center">注册</td>
95 </tr>
96 <tr>
97 <td align="right">用户名</td><td align="left"><input type="text" id="username" onblur="checkUsername(this)"/><font color="red" id="usernameMsg"></font></td>
98 </tr>
99 <tr>
100 <td align="right">邮箱</td><td><input type="text" id="email" onblur="checkEmail(this)"/><font color="red" id="emailMsg"></font></td>
101 </tr>
102 <tr>
103 <td align="right">密码</td><td><input type="text" id="password" onblur="checkPassword(this)"/><font color="red" id="passwordMsg"></font></td>
104 </tr>
105 <tr>
106 <td align="right">重复密码</td><td><input type="text" id="rePassword" onblur="checkRePassword(this)"><font color="red" id="rePasswordMsg"></font></td>
107 </tr>
108 <tr>
109 <td colspan="2" align="center"><input type="submit" value="注册"></td>
110 </tr>
111 </table>
112 </form>
113 </body>
114 </html>
