码迷,mamicode.com
首页 > Web开发 > 详细

jquery的验证实例方法

时间:2015-09-19 13:44:20      阅读:173      评论:0      收藏:0      [点我收藏+]

标签:

上一篇介绍了js的正则验证法,这一片就用jquery来实例运行一下其中的几个方法

Js部分

<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>

<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>

jquery的验证实例方法

标签:

原文地址:http://www.cnblogs.com/aileen/p/4821260.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!