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>
  • 相关阅读:
    面向消息的持久通信与面向流的通信
    通信协议
    [1]序章，基本
    深拷贝和浅拷贝
    堆/栈 内存管理相关
    C++的四种cast（显示类型转换）
    智能指针相关
    C++对象模型：单继承，多继承，虚继承
    HTTP/TCP
    [读书笔记] 为什么绝不在构造/析构函数中调用virtual函数
  • 原文地址：https://www.cnblogs.com/gaoxuqing/p/6733552.html
Copyright © 2011-2022 走看看