jQuery实现所有验证通过方可提交的表单实例讲解

互联网 18-1-16
本文主要为大家详细介绍了jQuery实现表单验证，所有验证通过方可提交，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。
<html>   <head>    <meta http-equiv="content-type" content="text/html; charset=utf-8">    <title>Reg</title>    <style>     .state1{      color:#aaa;     }     .state2{      color:#000;     }     .state3{      color:red;     }     .state4{      color:green;     }    </style>    <script src="jquery.js"></script>    <script>     $(function(){         var ok1=false;      var ok2=false;      var ok3=false;      var ok4=false;      // 验证用户名      $('input[name="username"]').focus(function(){       $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state2');      }).blur(function(){       if($(this).val().length >= 3 && $(this).val().length <=12 && $(this).val()!=''){        $(this).next().text('输入成功').removeClass('state1').addClass('state4');        ok1=true;       }else{        $(this).next().text('用户名应该为3-20位之间').removeClass('state1').addClass('state3');       }              });         //验证密码      $('input[name="password"]').focus(function(){       $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state2');      }).blur(function(){       if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!=''){        $(this).next().text('输入成功').removeClass('state1').addClass('state4');        ok2=true;       }else{        $(this).next().text('密码应该为6-20位之间').removeClass('state1').addClass('state3');       }              });         //验证确认密码       $('input[name="repass"]').focus(function(){       $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state2');      }).blur(function(){       if($(this).val().length >= 6 && $(this).val().length <=20 && $(this).val()!='' && $(this).val() == $('input[name="password"]').val()){        $(this).next().text('输入成功').removeClass('state1').addClass('state4');        ok3=true;       }else{        $(this).next().text('输入的确认密码要和上面的密码一致,规则也要相同').removeClass('state1').addClass('state3');       }              });         //验证邮箱      $('input[name="email"]').focus(function(){       $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state2');      }).blur(function(){       if($(this).val().search(/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/)==-1){        $(this).next().text('请输入正确的EMAIL格式').removeClass('state1').addClass('state3');       }else{             $(this).next().text('输入成功').removeClass('state1').addClass('state4');        ok4=true;       }              });         //提交按钮,所有验证通过方可提交         $('.submit').click(function(){       if(ok1 && ok2 && ok3 && ok4){        $('form').submit();       }else{        return false;       }      });            });    </script>   </head>  <body>     <form action='do.php' method='post' >   用 户 名:<input type="text" name="username">      <span class='state1'>请输入用户名</span><br/><br/>   密　　码:<input type="password" name="password">      <span class='state1'>请输入密码</span><br/><br/>   确认密码:<input type="password" name="repass">      <span class='state1'>请输入确认密码</span><br/><br/>   邮　　箱:<input type="text" name="email">      <span class='state1'>请输入邮箱</span><br/><br/>    <a href="javascript:;" rel="external nofollow" ><img class='submit' type='image' src='./images/reg.gif' /></a>  </form>  </body>  </html>
jQuery实现所有验证通过方可提交的表单实例讲解

相关资讯

标签推荐
