表单正则验证

Posted zzz723

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了表单正则验证相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css/userReg.css" rel="stylesheet">
    <link href="">
    <style>
 
    </style>
</head>
 
<body>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
               <div class="top-banner"><img src="img/regbanner.jpg" style="text-align: center"></div>
               <div class="title-line"><span class="tit">注册</span></div>
            <form action="" method="post">
                <label>昵  称:</label><input type="text" name="userName" id="userName" value="" placeholder="请输入你的昵称" /><span class="spa spa1" ></span><br />
                <label>密  码:</label><input type="text" name="password" id="password" value="" placeholder="请输入密码"/><span class="spa spa4"></span><br />
                <label>确认密码:</label><input type="text" name="password" id="password1" value="" placeholder="请确认密码"/><span id="tishi"></span>
                <label>    </label>
                <div>
                    <input type="submit" value="注册" id="sub" />
                   <input type="submit" value="返回" id="back" />
                </div>
            </form>
            <div class="title-line"></div>
 
 
            </div>
        <div class="tfoot" style="max-width:100%;">
            <div class="tips">Pet store</div>
            <div class="cards">
              <a target="_blank" href="#">帮助中心</a>
            </div>
            <div class="cards">
                <a target="_blank" href="#">友情链接</a>
            </div>
            <div class="cards">
                <a target="_blank" href="#">联系我们</a>
            </div>
            <div class="cards">
                <a target="_blank" href="#">加入我们</a>
            </div>
 
 
            <div class="tips">传送门</div>
            <div class="cards">
                <a target="_blank" href="#">首页</a>
            </div>
            <div class="cards">
                <a target="_blank" href="#">宠物分类</a>
            </div>
            <div class="cards">
                <a target="_blank" href="#">宠物用品</a>
            </div>
            <div class="cards">
                <a target="_blank" href="#">画廊</a>
            </div>
            <div class="tips">合作伙伴</div>
 
        </div>
 
        <script src="js/jquery-1.12.2.min.js"></script>
        <script type="text/javascript">
        window.onload=function(){
            $("#userName").focus()
        }
        /************************  失焦判断  **********************************/
        $("input").blur(function(){
            $(".spa1").css("color","#BD362F")
            $(".spa4").css("color","#BD362F")
            if($(this).is("#userName")){             //姓名判断
                var na=/^[\u4E00-\u9FA5]{2,4}$/
                if($("#userName").val()!=""){
                    if(!(na.test($("#userName").val()))){
                        $(".spa1").text("请输入2-4个汉字");
                        $(this).css("border","1px solid #BD362F")
                        return false;
                    }else if(na){
                        $(".spa1").text("");
                        return true;
                    }
                }else{
                    $(".spa1").text("");
                }
            }
            if($(this).is("#userName")){             //姓名判断是否为空
                var na=/^[\u4E00-\u9FA5]{2,4}$/
                if($("#userName").val()==""){
                    if(!(na.test($("#userName").val()))){
                        $(".spa1").text("用户名不能为空");
                        $(this).css("border","1px solid #BD362F")
                        return false;
                    }else if(na){
                        $(".spa1").text("");
                        return true;
                    }
                }else{
                    $(".spa1").text("");
                }
            }
            if($(this).is("#password")){             //密码判断
                var wp=/^[a-zA-Z]\w{5,17}$/
                if($("#password").val()!=""){
                    if(!(wp.test($("#password").val()))){
                        $(".spa4").text("请输入以字母开头,6~18位字符");
                        $(this).css("border","1px solid #BD362F")
                        return false;
                    }else if(wp){
                        $(".spa4").text("");
                        return true;
                    }
                }else{
                    $(".spa4").text("");
                }
            }
 
            if($(this).is("#password")){             //密码是否判断
                var wp=/^[a-zA-Z]\w{5,17}$/
                if($("#password").val()==""){
                    if(!(wp.test($("#password").val()))){
                        $(".spa4").text("密码不能为空!");
                        $(this).css("border","1px solid #BD362F")
 
                        return false;
                    }else if(wp){
                        $(".spa4").text("");
                        return true;
                    }
                }else{
                    $(".spa4").text("");
                }
            }
 
 
        })
        /********************** 聚焦提示 ************************/
        $("input").focus(function(){
            if($(this).is("#userName")){
                $(".spa1").text("2-4个汉字").css("color","#aaa")
                $(this).css("border","1px solid #aaa")
            }
 
            if($(this).is("#password")){
                $(".spa4").text("以字母开头,6~18位字符").css("color","#aaa")
                $(this).css("border","1px solid #aaa")
            }
 
 
        })
 
        /*********************** 提交验证 ***************************/
        $("#sub").click(function(){
            var na=/^[\u4E00-\u9FA5]{2,4}$/;   //用户名正则
            var wp=/^[a-zA-Z]\w{5,17}$/;  //密码正则
 
            if(na.test($("#userName").val())
                    &&wp.test($("#password").val())){
                return true;
            }else{
                if($("#userName").val()==""){
                    $(".spa1").text(请输入用户名)
                }
                if($("#password").val()==""){
                    $(".spa4").text(请输入密码)
                }
 
            }
        })
        </script>
        <script>
            function validate() {
 
                var password = document.getElementById("password").value;
                var password1 = document.getElementById("password1").value;
 
                <!-- 对比两次输入的密码 -->
                if(password == password1)
                {
                    document.getElementById("tishi").innerHTML="<font color=‘green‘>两次密码相同</font>";
                    document.getElementById("button").disabled = false;
                }
                else {
                    document.getElementById("tishi").innerHTML="<font color=‘red‘>两次密码不相同</font>";
                    document.getElementById("button").disabled = true;
                }
 
            }
        </script>
    </div>
</div>
</body>
</html>

 

以上是关于表单正则验证的主要内容,如果未能解决你的问题,请参考以下文章

js常用正则表达式表单验证代码

正则表达式实现表单的验证(代码)

js 常用正则表达式表单验证代码

JavaScript 正则表单验证(用户名密码确认密码手机号座机号身份证号)

JavaScript表单通过正则表达式验证电话号码

asp.net 使用正则表达式验证包含打开/关闭括号片段的属性字符串