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>