Jquery表单验证，免得自己写了

来源：互联网发布：非农数据在哪里看编辑：程序博客网时间：2024/05/17 03:45
<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>
0 0