上一篇介绍了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>

posted on 2015-09-19 12:13  aileen-1  阅读(245)  评论(0编辑  收藏  举报