JS校验 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8">
  5         <title>JS校验</title>
  6         <script>
  7             function showTips(spanID,msg){
  8                 var span = document.getElementById(spanID);
  9                 span.innerHTML = "<font color='blue' size='2'>" + msg + "</font>";
 10             }
 11             
 12             function checkUsername(){
 13                 var username = document.getElementById("username").value;
 14                 var span_username = document.getElementById("span_username");
 15                 if(username.length <= 5){
 16                     span_username.innerHTML = "<font color='red' size='2'>用户名太短！</font>";
 17                     return false;
 18                 } else{
 19                     span_username.innerHTML = "<font color='greenyellow' size='2'>用户名可用！</font>";
 20                     return true;
 21                 }
 22             }
 23             
 24             function checkPassword(){
 25                 var password = document.getElementById("password").value;
 26                 var span_password = document.getElementById("span_password");
 27                 if(password.length <= 7){
 28                     span_password.innerHTML = "<font color='red' size='2'>密码太短！</font>";
 29                     return false;
 30                 } else{
 31                     span_password.innerHTML = "<font color='greenyellow' size='2'>密码可用！</font>";
 32                     return true;
 33                 }
 34             }
 35             
 36             function checkRepassword(){
 37                 var repassword = document.getElementById("repassword").value;
 38                 var password = document.getElementById("password").value;
 39                 var span_repassword = document.getElementById("span_repassword");
 40                 if(repassword == password){
 41                     span_repassword.innerHTML = "<font color='greenyellow' size='2'>密码一致！</font>";
 42                     return true;
 43                 } else{
 44                     span_repassword.innerHTML = "<font color='red' size='2'>密码不一致！</font>";
 45                     return false;
 46                 }
 47             }
 48             
 49             function checkPhone(){
 50                 var phone = document.getElementById("phone").value;
 51                 var span_phone = document.getElementById("span_phone");
 52                 if(!/^[1][3578][0-9]{9}$/.test(phone)){
 53                     span_phone.innerHTML = "<font color='red' size='2'>该号码不可用！</font>";
 54                     return false;
 55                 } else{
 56                     span_phone.innerHTML = "<font color='greenyellow' size='2'>号码可用！</font>";
 57                     return true;
 58                 }
 59             }
 60             
 61             function checkEmail(){
 62                 var email = document.getElementById("email").value;
 63                 var span_email = document.getElementById("span_email");
 64                 if(!/^[\w.-]+@[\w.-]+\.\w+$/.test(email)){
 65                     span_email.innerHTML = "<font color='red' size='2'>邮箱格式错误！</font>";
 66                     return false;
 67                 } else{
 68                     span_email.innerHTML = "<font color='greenyellow' size='2'>邮箱可用！</font>";
 69                     return true;
 70                 }
 71             }
 72             
 73             function checkForm(){
 74                 var flag = checkUsername()&&checkPassword()&&checkRepassword()&&checkPhone()&&checkEmail();
 75                 return flag;
 76             }
 77         </script>
 78     </head>
 79     <body>
 80         <div>
 81             <form action="../../CSS/CSS美化网页/网站首页美化版.html" method="get" onsubmit="return checkForm()">
 82                 <table>
 83                     <tr>
 84                         <td>用户名</td>
 85                         <td>
 86                             <input type="text" id="username" onfocus="showTips('span_username','用户名不得少于六位')" onblur="checkUsername()" onkeyup="checkUsername()"/><span id="span_username"></span>
 87                         </td>
 88                     </tr>
 89                     <tr>
 90                         <td>密码</td>
 91                         <td>
 92                             <input type="password" id="password" onfocus="showTips('span_password','密码不得少于八位')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span>
 93                         </td>
 94                     </tr>
 95                     <tr>
 96                         <td>确认密码</td>
 97                         <td>
 98                             <input type="password" id="repassword" onfocus="showTips('span_repassword','两次输入的密码必须一致')" onblur="checkRepassword()" onkeyup="checkRepassword()"/><span id="span_repassword"></span>
 99                         </td>
100                     </tr>
101                     <tr>
102                         <td>手机号码</td>
103                         <td>
104                             <input type="text" id="phone" onblur="checkPhone()" onkeyup="checkPhone()"/><span id="span_phone"></span>
105                         </td>
106                     </tr>
107                     <tr>
108                         <td>邮箱</td>
109                         <td>
110                             <input type="text" id="email" onfocus="showTips('span_email','请注意邮箱格式')" onblur="checkEmail()" onkeyup="checkEmail()"/><span id="span_email"></span>
111                         </td>
112                     </tr>
113                     <tr>
114                         <td></td>
115                         <td>
116                             <input type="submit" value="提交" />
117                         </td>
118                     </tr>
119                 </table>
120             </form>
121         </div>
122     </body>
123 </html>

 

posted @ 2020-04-07 15:04  yxfyg  阅读(148)  评论(0)    收藏  举报