分享

表单验证(登录/注册)

 昵称36780756 2016-09-23

表单验证(登录/注册)

登录,注册是我们使用的较多的表单认证,每个项目都从头开始写,显然是没有必要的。下面和大家分享下我所写的表单验证:

下面的代码,会附上完整代码,使用的过程中,只需要根据自己的项目进行简单的修改即可,非常方便。

此表单认证使用了jquery,如您需要原生的JS,改写起来,也是非常方便的。

请看效果图:

<!doctype html>
<html lang="en">
    <head>
        <!--网站编码格式,UTF-8 国际编码,GBK或 gb2312 中文编码-->
        <meta http-equiv="content-type" content="text/html;charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="Keywords" content="关键词一,关键词二">
        <meta name="Description" content="网站描述内容">
        <meta name="Author" content="Yvette Lau">
        <meta name = "viewport" content = " width = device-width, initial-scale = 1 ">      
        <title>CSSDemo</title>
        <style>
            *{
                margin: 0px;
                padding: 0px;
            }
            /*布局开始*/
            #login_dialog {
                position: fixed;
                left: 40%;
                top: 40%;
                background-color: #303a40;
                width: 500px;
                margin-left: -200px;
                margin-top: -150px;
                font-family: "黑体";
                /*禁止复制粘贴*/
                -moz-user-select: none;
                -webkit-user-select: none;
                user-select:none;
            }
            .register_dialog_title {
                height: 35px;
                line-height: 35px;
                margin: 0 5px;
            }

            .register_dialog_info {
                float: left;
                margin-left:10px;
                color: #fff;
                margin-top: 5px;
                font-size: 20px;
            }
            #register_dialog {
                position: fixed;
                left: 40%;
                top: 40%;
                background-color: #303a40;
                width: 500px;
            /*  height: 600px; */
                margin-left: -200px;
                margin-top: -200px;
                font-family: "黑体";
                -moz-user-select:none; /*火狐*/
                -webkit-user-select:none; /*webkit浏览器*/
                -ms-user-select:none; /*IE10*/
                -khtml-user-select:none; /*早期浏览器*/
                user-select:none;
            }

            .register_dialog_info {
                float: left;
                margin-left:10px;
                color: #fff;
                margin-top: 5px;
                font-size: 20px;
            }
            .dialog_close {
                cursor: pointer;
                width: 40px;
                height:40px;
                border-radius:25px;
                float: right;
                line-height:40px;
                font-size: 20px;
                color: #d8dadb;
                font-family: "微软雅黑";
                text-align: center;
                cursor:center;
            }
            form{padding: 20px 0px;}
            ul li {list-style: none;}
            .sub {
                text-align: center;
            }
            .sub input {
                display: inline-block;
                width: 300px;
                background-color: rgb(255, 109, 11);
                color: rgb(255, 255, 255);
                font-size: 20px;
                text-align: center;
                height: 40px;
                line-height: 40px;
                font-family: 黑体;
                outline: none;
                border: none;
                margin: auto;
            }
            .dialog_close:hover {
                background-color: #566
            }
            input[type = "submit"]:hover{cursor: pointer;}
            /*布局结束*/
            .reg-box { padding-left: 30px; }

            .reg-box li { line-height: 44px; width: 500px; overflow: hidden; }

            .reg-box li label { width: 68px; height: 50px; float: left; line-height: 50px; text-align: right; padding-right: 20px; }

            .reg-box li input,.reg-box li select{ padding: 6px 0; font-size: 16px; width: 296px; height: 28px; line-height: 28px; border: 1px solid #dddddd; text-indent: 0.5em; float: left; }

            .reg-box li select option{font-size:16px;}

            .registered .btn a { background: #ff7200; margin-left: 110px; }

            /*验证码*/
            .add { width: 128px; height: 44px; float: left; _display: inline; cursor: pointer; margin-left: 20px; }

            .reg-box li .sradd { width: 148px; text-indent: 4px; font-size: 14px; }

            .reg-box li .input-code { width: 106px; padding: 10px; font-family: Arial; font-style: italic; color: red; letter-spacing: 1px; cursor: pointer; text-align: center; text-indent: 0; }

            .yzm,.phoKey { background: #ff7200; text-align: center; line-height: 44px; color: #fff; }

            .phoKey{letter-spacing: 3px; font-size:18px;}

            .yzmc { background: #dddddd; text-align: center; line-height: 44px; color: #999; }

            .error { clear:both;display:block;color: red; padding-left: 90px; padding-bottom:5px;height:20px;float: left; font-size:12px;line-height: 20px;}

            input { background-color: #fff; outline: none; }

            .reg-box li { width: auto; }

            .reg-box li input.errorC, .errorC{ border: 1px solid red; }

            .reg-box li input.checkedN , .checkedN{ border: 1px solid #1ece6d; }

        </style>
        <!--css js 文件的引入-->
        <script type="text/javascript" src="jquery-1.11.2.min.js"></script>
    </head>
    <body>
        <div id="login_dialog">
            <div class="register_dialog_title">
                <p class="register_dialog_info">登录</p>
                <p class="dialog_close">X</p>
                <div class="clear"></div>
            </div>
            <div style="background-color:#ffffff;margin:10px;">
                <form action="">                
                    <ul class="reg-box">                 
                        <li>
                            <label for="">账    号</label><input type="text" value="请输入您的账号" class="account" maxlength="11" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error5"></span>
                        </li>
                        <li>
                            <label for="">密    码</label><input type="password"  class = "admin_pwd" value="请输入密码" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error6"></span>
                        </li>
                        <li>
                            <label for="">验证码</label><input type="text" class="sradd photokey" value="请输入验证码" style="color:#999;ime-mode:disabled;-webkit-ime-mode:inactive;" onBlur="textBlur(this)" onFocus=" textFocus(this) "  /><span class="add phoKey"></span><span class="error error7"></span>
                        </li>
                    </ul>
                    <div class="sub">
                        <input type="submit" value="立即登录" />
                    </div>                  
                </form>
            </div>
        </div>
    </body>
</html>

JS部分代码如下:

<script type="text/javascript">    
    //文本框默认提示文字
    function textFocus(el) {
        if (el.defaultValue == el.value) { el.value = ''; el.style.color = '#333'; }
    }
    function textBlur(el) {
        if (el.value == '') { el.value = el.defaultValue; el.style.color = '#999'; }
    }

    $(function(){ 
        //注册页面的提示文字
       (function register(){
           //手机号栏失去焦点
            $(".reg-box .phone").blur(function(){
                reg=/^1[3|4|5|7|8][0-9]\d{4,8}$/i;//验证手机正则(输入前7位至11位)

                if( $(this).val()==""|| $(this).val()=="请输入您的手机号")
                { 
                    $(this).addClass("errorC");
                    $(this).next().html("请输入您的手机号");
                    $(this).next().css("display","block");
                }
                else if($(this).val().length<11)
                {   
                    $(this).addClass("errorC");
                    $(this).next().html("手机号长度有误!");
                    $(this).next().css("display","block");
                }
                else if(!reg.test($(".reg-box .phone").val()))
                {   
                    $(this).addClass("errorC");
                    $(this).next().html("手机号不存在!");
                    $(this).next().css("display","block");
                }
                else
                {
                    $(this).addClass("checkedN");
                    $(this).removeClass("errorC");
                    $(this).next().empty();
                }
            });

            //验证码栏失去焦点
            $(".reg-box .phonekey").blur(function(){
                reg=/^[A-Za-z0-9]{6}$/;
                if( $(this).val()=="" || $(this).val()=="请输入收到的验证码")
                {
                    $(this).addClass("errorC");
                    $(this).next().next().html("请填写验证码");
                    $(this).next().next().css("display","block");
                }
                else if(!reg.test($(".phonekey").val()))
                {
                    $(this).addClass("errorC");
                    $(this).next().next().html("验证码输入有误!");
                    $(this).next().next().css("display","block");
                } 
                else 
                {
                    $(this).removeClass("errorC");
                    $(this).next().next().empty();
                    $(this).addClass("checkedN");
              }
            });

            //密码栏失去焦点
            $(".reg-box .password").blur(function(){
                reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;
                if(!reg.test($(".password").val()))
                {
                    $(this).addClass("errorC");
                    $(this).next().html("格式有误,请输入6~12位的数字、字母或特殊字符!");
                    $(this).next().css("display","block");
                }
                else 
                {
                    $(this).removeClass("errorC");
                    $(".reg-box .error3").empty();
                    $(this).addClass("checkedN");
                }
            });
            /*确认密码失去焦点*/
            $(".reg-box .email").blur(function(){
                var pwd1=$('.reg-box input.password').val();
                var pwd2=$(this).val();
                if(($(this).val() == '请再次输入密码' || $(this).val() == "") && (pwd1 == "请输入密码" || pwd1 == "") ){                  
                        return;
                }else if(pwd1!=pwd2)
                {
                    $(this).addClass("errorC");
                    $(this).removeClass("checkedN");
                    $(this).next().html("两次密码输入不一致!");

                    $(this).next().css("display","block");
                }
                else 
                {
                    $(this).removeClass("errorC");
                    $(this).next().empty();
                    $(this).addClass("checkedN");
                }
            });
       })();
        /*生成验证码*/
        (function create_code(){
            function shuffle(){
                var arr=['1','r','Q','4','S','6','w','u','D','I','a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p',
                        'q','2','s','t','8','v','7','x','y','z','A','B','C','9','E','F','G','H','0','J','K','L','M','N','O','P','3','R',
                        '5','T','U','V','W','X','Y','Z'];
                return arr.sort(function(){
                    return (Math.random()-.5);
                });
            };
            shuffle();      
            function show_code(){
                var ar1='';
                var code=shuffle();
                for(var i=0;i<6;i++){
                    ar1+=code[i];
                };
                //var ar=ar1.join('');
                $(".reg-box .phoKey").text(ar1);
            };
            show_code();
            $(".reg-box .phoKey").click(function(){
                show_code();
            }); 
        })();

        //登录页面的提示文字
        //账户输入框失去焦点
        (function login_validate(){
            $(".reg-box .account").blur(function(){
                reg=/^1[3|4|5|8][0-9]\d{4,8}$/i;//验证手机正则(输入前7位至11位)

                if( $(this).val()==""|| $(this).val()=="请输入您的账号")
                { 
                    $(this).addClass("errorC");
                    $(this).next().html("账号不能为空!");
                    $(this).next().css("display","block");
                }
                else if($(".reg-box .account").val().length<11)
                {   
                    $(this).addClass("errorC");
                    $(this).next().html("账号长度有误!");
                    $(this).next().css("display","block");
                }
                else if(!reg.test($(".reg-box .account").val()))
                {   
                    $(this).addClass("errorC");
                    $(this).next().html("账号不存在!");
                    $(this).next().css("display","block");
                }
                else
                {
                    $(this).addClass("checkedN");
                    $(this).removeClass("errorC");
                    $(this).next().empty();
                }
            });
            /*密码输入框失去焦点*/
            $(".reg-box .admin_pwd").blur(function(){
                reg=/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]{6,22}$/;

                if($(this).val() == "请输入密码"){
                    $(this).addClass("errorC");
                    $(this).next().html("密码不能为空!");
                    $(this).next().css("display","block");

                }else if(!reg.test($(".admin_pwd").val()))
                {
                    $(this).addClass("errorC");
                    $(this).next().html("密码为6~12位的数字、字母或特殊字符!");
                    $(this).next().css("display","block");
                }else
                {
                    $(this).addClass("checkedN");
                    $(this).removeClass("errorC");
                    $(this).next().empty();
                }
            });

            /*验证码输入框失去焦点*/
            $(".reg-box .photokey").blur(function(){
                var code1=$('.reg-box input.photokey').val().toLowerCase();
                var code2=$(".reg-box .phoKey").text().toLowerCase(); 
                if(code1!=code2)
                {
                    $(this).addClass("errorC");
                    $(this).next().next().html("验证码输入错误!");
                    $(this).next().next().css("display","block");
                }
                else 
                {
                    $(this).removeClass("errorC");
                    $(this).next().next().empty();
                    $(this).addClass("checkedN");
                }
            })
        })();
    }); 

    /*清除提示信息*/
    function emptyRegister(){
        $(".reg-box .phone,.reg-box .phonekey,.reg-box .password,.reg-box .email").removeClass("errorC");;
        $(".reg-box .error1,.reg-box .error2,.reg-box .error3,.reg-box .error4").empty();
    }
    function emptyLogin(){
        $(".reg-box .account,.reg-box .admin_pwd,.reg-box .photokey").removeClass("errorC");;
        $(".reg-box .error5,.reg-box .error6,.reg-box .error7").empty();
    }

</script>

备注:这段JS代码中不仅包含了登录对话框的验证部分,其实也包含了注册对话框的验证.

注册对话框的效果图如下:

    <body>
        <div id="register_dialog">
            <div class="register_dialog_title">
                <p class="register_dialog_info">注册</p>
                <p class="dialog_close">X</p>
                <div class="clear"></div>
            </div>
            <div style="background-color:#ffffff;margin:10px;">
                    <form action="">
                            <ul class="reg-box">                 
                                <li>
                                    <label for="">手    机</label><input type="text" value="手机号为登录密码" class="phone" maxlength="11" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error1"></span>
                                </li>
                                <li>
                                    <label for="">验证码</label><input type="text" class="sradd phonekey" value="请输入收到的验证码" style="color:#999;ime-mode:disabled;-webkit-ime-mode:inactive;" banInputMethod = "english" onBlur="textBlur(this)" onFocus=" textFocus(this) " /><span class="add yzm">发送验证码</span><span class="error error2"></span>
                                </li>                               
                                <li>
                                    <label for="">密    码</label><input type="password"  class = "password" value="请输入密码" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error3"></span>
                                </li>
                                <li>
                                    <label for="">确认密码</label><input type="password"  class = "email" value="请再次输入密码" style="color:#999;" onBlur="textBlur(this)" onFocus="textFocus(this)"/><span class="error error4"></span>
                                </li>
                            </ul>
                    <div class="sub">
                        <input type="submit" value="立即注册" />

                    </div>

                </form>
            </div>
        </div>
    </body>

说明:

如果需要使用注册对话框,只需要替换body中的内容即可。JS和html部分都是通用的。注意jquery.min.js的路径,是您自己本地的路径,记得修改。

另外,如果需要修改样式,可以自行修改css部分。

您可以根据自己的需求,进行修改。

附上一些实用的正则表达式,您可以利用下面的正则表达式,写出丰富的表单:

1.身份证验证:

reg=/^(\d{15}$|^\d{18}$|^\d{17}(\d|X|x))$/;

2.手机号验证:

reg=/^1[3|4|5|8][0-9]\d{4,8}$/i;

3.密码验证:

6~15位,不能含有空格,支持中文、字母、数字、下划线和小数点

reg = /^([\w._]|[\u4e00-\u9fa5]){6,15}$/;

密码中必须包含字母、数字、特称字符,至少8个字符,最多30个字符

reg = /(?=.[0-9])(?=.[a-zA-Z])(?=.*[^a-zA-Z0-9])/;

4.邮箱验证

reg = /^([a-zA-Z0-9_.-])+\@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;

5.只能输入中文

reg = /^[u4e00-u9fa5],{0,}$/

6.只能输入数字

reg = /^[0,9]{0,}$/


    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约