使用jQuery验证表单 

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="UTF-8">
  5         <title>JQuery实现表单验证</title>
  6     </head>
  7     <script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
  8     <body>
  9         <form action="#">
 10             
 11             用户名：<input type="text" name="username" id="username"><span id="username_msg"></span><br>
 12             密码：<input type="password" name="password" id="password"><span id="password_msg"></span><br>
 13             确认密码：<input type="password" name="repasswprd" id="repassword"><span id="repassword_msg"></span><br>
 14             Email：<input type="text" name="email" id="email"><span id="email_msg"></span><br>
 15             用户类型：<input type="radio" name="userType" id="userType" checked>个人
 16             <input type="radio" name="userType" id="userType">企业<br>
 17             所在城市：
 18             <select name="address" id="address">
 19                 <option value="1" selected="selected">北京</option>
 20                 <option value="2">上海</option>
 21                 <option value="3">广州</option>
 22                 <option value="4">深圳</option>
 23             </select>
 24             <br>
 25             <input type="submit" name="submit" value="提交" onclick="return checkForm()"/>
 26             <span id="msg" name="msg"></span>
 27         </form>
 28     </body>
 29     <script type="text/javascript">
 30         function ifnull(txt){
 31             if(txt.length==0){
 32                 return true;
 33             }
 34             var $reg=/\s+/;
 35             return $reg.test(txt);
 36         } 
 37         $("#email").blur(function(){
 38             if(ifnull($(this).val())){
 39                 $("#email_msg").html("邮箱不能为空").css("color","red");
 40             }else{
 41                 var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
 42                 if(!$reg.test($("#email").val())){
 43                     $("#email_msg").html("邮箱格式错误").css("color","red");
 44                 }else{
 45                     $("#email_msg").html("√").css("color","green");
 46                 }
 47             }
 48         });
 49         $("#username").blur(function(){
 50             if(ifnull($(this).val())){
 51                 $("#username_msg").html("用户名不能为空").css("color","red");
 52             }else{
 53                 $("#username_msg").html("√").css("color","green");
 54             }
 55         });
 56         $("#password").blur(function(){
 57             if(ifnull($(this).val())){
 58                 $("#password_msg").html("密码不能为空").css("color","red");
 59             }else{
 60                 var $reg=/^\w{6,}$/;
 61                 if(!$reg.test($("#password").val())){
 62                     $("#password_msg").html("密码至少要6位哦").css("color","red");
 63                 }else{
 64                     $("#password_msg").html("√").css("color","green");
 65                 }
 66             }
 67         });
 68         $("#repassword").blur(function(){
 69             if(ifnull($(this).val())){
 70                 $("#repassword_msg").html("请确认密码").css("color","red");
 71             }else{
 72                 if($("#password").val()!=$("#repassword").val()){
 73                     $("#repassword_msg").html("两次密码不一致").css("color","red");
 74                 }else{
 75                     $("#repassword_msg").html("√").css("color","green");
 76                 }
 77             }
 78         });
 79 
 80         function checkForm(){
 81             if(ifnull($("#email").val())){
 82                 $("#email_msg").html("邮箱不能为空").css("color","red");
 83                 return false;
 84             }else{
 85                 var $reg=/^[a-zA-Z1-9]\w{1,}@[a-zA-Z1-9]{2,}(\.(com|cn|net)){1,2}$/;
 86                 if(!$reg.test($("#email").val())){
 87                     $("#email_msg").html("邮箱格式错误").css("color","red");
 88                     return false;
 89                 }
 90             }
 91             if(ifnull($("#username").val())){
 92                 $("#username_msg").html("用户名不能为空").css("color","red");
 93                 return false;
 94             }
 95             if(ifnull($("#password").val())){
 96                 $("#password_msg").html("密码不能为空").css("color","red");
 97                 return false;
 98             }else{
 99                 var $reg=/^\w{6,}$/;
100                 if(!$reg.test($("#password").val())){
101                     $("#password_msg").html("密码至少6位").css("color","red");
102                     return false;
103                 }
104             }
105             if(ifnull($("#repassword").val())){
106                 $("#repassword_msg").html("请确认密码").css("color","red");
107                 return false;
108             }
109             if($("#password").val()!=$("#repassword").val()){
110                 $("#repassword_msg").html("两次密码不一致").css("color","red");
111                 return false;
112             }
113         }
114 
115     </script>
116 </html>

 

posted @ 2021-03-25 17:33  MyNorth  阅读(40)  评论(0)    收藏  举报