javascript实战—利用数据校验实现简单的注册信息验证 

  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>

 

posted @ 2020-03-25 14:27  组装梦想  阅读(311)  评论(0)    收藏  举报