• 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>
        <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>
  • 相关阅读:
    大四实习有点晚[转载]
    .net2.0数据绑定语法
    明天要去南京了
    Master & Content Page Relation(Event Ordering)
    在验证中使用图像和声音(ErrorMessage)
    设置FLash透明
    Basic Skill in .net2.0
    教育研究方法
    程序员是如何捕猎大象的[转]
    My lost card
  • 原文地址：https://www.cnblogs.com/gaoxuqing/p/6733552.html
Copyright © 2020-2023  润新知