zoukankan      html  css  js  c++  java

  • 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>
  • 相关阅读:
    Changing Icon File Of Push Button At Runtime In Oracle Forms 6i
    Set Font Properties On Mouse Hover Of Push Button And Text Items At Run time In Oracle Forms
    Change An Item Property Using Set_Item_Property In Oracle Forms
    Calling / Running a report in Oracle forms 10g / 11g
    Change Or Set Report Object Property At Run Time In Oracle Forms Using Set_Report_Object_Property Command
    Refresh / Updating a form screen in Oracle D2k Forms 6i
    Know How And When To Use System.Message_Level To Control Messages In Oracle Forms
    Perform Cut Copy Paste Operations Using Cut_Region Copy_Region Paste_Region Commands In Oracle Forms
    CHECKBOX_CHECKED built-in in Oracle D2k Forms
    Limiting To Select Only 5 Check Boxes Out Of Ten In Oracle Forms
  • 原文地址：https://www.cnblogs.com/gaoxuqing/p/6733552.html
Copyright © 2011-2022 走看看