JQuery 实现表单验证，所有验证通过方可提交

  1 <html>
  2     <head>
  3         <meta http-equiv="content-type" content="text/html; charset=utf-8">
  4         <title>Reg</title>
  5         <style>
  6             .state1{
  7                 color:#aaa;
  8             }
  9             .state2{
 10                 color:#000;
 11             }
 12             .state3{
 13                 color:red;
 14             }
 15             .state4{
 16                 color:green;
 17             }
 18         </style>
 19         <script src="jquery.js"></script>
 20         <script>
 21             $(function(){
 22  
 23                 var ok1=false;
 24                 var ok2=false;
 25                 var ok3=false;
 26                 var ok4=false;
 27                 // 验证用户名
 28                 $('input[name="username"]').focus(function(){
 29                     $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state2');
 30                 }).blur(function(){
 31                     if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){
 32                         $(this).next().text('输入成功').removeClass('state1').addClass('state4');
 33                         ok1=true;
 34                     }else{
 35                         $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state3');
 36                     }
 37                      
 38                 });
 39  
 40                 //验证密码
 41                 $('input[name="password"]').focus(function(){
 42                     $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state2');
 43                 }).blur(function(){
 44                     if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){
 45                         $(this).next().text('输入成功').removeClass('state1').addClass('state4');
 46                         ok2=true;
 47                     }else{
 48                         $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state3');
 49                     }
 50                      
 51                 });
 52  
 53                 //验证确认密码
 54                     $('input[name="repass"]').focus(function(){
 55                     $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state2');
 56                 }).blur(function(){
 57                     if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){
 58                         $(this).next().text('输入成功').removeClass('state1').addClass('state4');
 59                         ok3=true;
 60                     }else{
 61                         $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');
 62                     }
 63                      
 64                 });
 65  
 66                 //验证邮箱
 67                 $('input[name="email"]').focus(function(){
 68                     $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2');
 69                 }).blur(function(){
 70                     if($(this).val().search(/w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*/)==-1){
 71                         $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');
 72                     }else{                  
 73                         $(this).next().text('输入成功').removeClass('state1').addClass('state4');
 74                         ok4=true;
 75                     }
 76                      
 77                 });
 78  
 79                 //提交按钮,所有验证通过方可提交
 80  
 81                 $('.submit').click(function(){
 82                     if(ok1 && ok2 && ok3 && ok4){
 83                         $('form').submit();
 84                     }else{
 85                         return false;
 86                     }
 87                 });
 88                  
 89             });
 90         </script>
 91     </head>
 92 <body>
 93   
 94 <form action='do.php' method='post' >
 95     用 户 名:<input type="text" name="username">
 96                 <span class='state1'>请输入用户名</span><br/><br/>
 97     密　　码:<input type="password" name="password">
 98                 <span class='state1'>请输入密码</span><br/><br/>
 99     确认密码:<input type="password" name="repass">
100                 <span class='state1'>请输入确认密码</span><br/><br/>
101     邮　　箱:<input type="text" name="email">
102                 <span class='state1'>请输入邮箱</span><br/><br/>   
103     <a href="javascript:;"><img class='submit' type='image' src='./images/reg.gif' /></a>
104 </form>
105 </body>
来源:https://my.oschina.net/yuewawa/blog/609925
JQuery 实现表单验证，所有验证通过方可提交

相关推荐
