基于Jquery实现表单验证

2019-11-20 11:55:42

字体：大中小

来源：转载

供稿：网友

有时在我们注册账户、登陆系统时，当所有验证通过方可提交这就需要Jquery来实现表单验证，今天分享给小伙伴们一段基于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:;"><img class='submit' type='image' src='./images/reg.gif' /></a></form></body></html>

以上就是本文的全部内容，希望大家可以喜欢。

上一篇：JavaScript数组各种常见用法实例分析

下一篇：javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码