jquery的驗證明例方法

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