jQuery之表单校验：新用户注册

其他 2018-07-12 20:06:49 阅读次数: 0 


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第10章新用户注册</title>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<link rel="stylesheet" href="css/register.css">
</style>
<script type="text/javascript">
    $(function() {
        
        //验证通行证用户名的非空验证
        function Passname() {
            var pname = $("#userName").val();
            if (pname == '') {
                $("#userNameId").addClass('error_prompt');
                $("#userNameId").html("验证通行证用户名不能为空");
                return false;
            }
            //规定正则以数字字母开头
            var reg = /^[a-zA-Z][a-zA-Z0-9_]*$/;
            if (reg.test(pname) == false) {
                $("#userNameId").addClass("error_prompt");
                $("#userNameId").html("由字，数，下，点，减号组成...");
                //$("#userName").val("");
                return false;
            } else if (reg.test(pname) == true) {
                $("#userNameId").addClass('ok_prompt');
                $("#userNameId").html("通行证用户名输入正确");
                return true;
            }
        }
        //通行证失去焦点的时候
        var blurname = $("#userName");
        blurname.blur(function() {
            return Passname();
        });
        
        
          //验证登陆密码长度为6~16位
        //密码是6-16位字母加数字
        function Pwd11() {
            var textpwd = $("#pwd").val();
            if (textpwd =='') {
                $("#pwdId").addClass("error_prompt");
                $("#pwdId").html("密码是必填！");
                return false;
            }
            var pwd11 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
            if (pwd11.test(textpwd) == false) {
                $("#pwdId").addClass("error_prompt");
                $("#pwdId").html("密码是6-16位字母加数字");
                return false;
            }else if (pwd11.test(textpwd) == true) {
                $("#pwdId").addClass("ok_prompt");
                $("#pwdId").html("密码格式合格");
                return true;
            }
        }  
          //密码失去焦点
        var blurpwd = $("#pwd");
        blurpwd.blur(function() {
            return Pwd11();
        });
          
          
        //再次验证密码
        function twopwd(){
            var firstpwd = $("#pwd").val();//第一次输入的密码
            var tpwd = $("#repwd").val();//第二次输入的密码的时候。             
            if (firstpwd != tpwd) {    
                $("#repwdId").addClass("error_prompt");
                $("#repwdId").html("两次输入的密码不一致！");
                return false;
            }else{
                //$("repwdId").html("");
                return true;
            }                    
        }
        //重复密码失去焦点
        var blurtwopwd = $("#repwd");
        blurtwopwd.blur(function() {
            return twopwd();
        });
        
        
        /* //真实姓名
        function truename(){
            var regname = $("#realName").val();
            //汉字
            var regn = /^[\u4e00-\u9fa5]{2,4}$/;
            if (regn.test(regname) == false) {
                $("#pwdId").addClass("ok_prompt");
                $("#pwdId").html("密码格式合格");
                return true;
            }                        
        } */
        
        
        //昵称
        function nickname(){
            var kname = $("#nickName").val();
            var len = kname.replace(/[\u4e00-\u9fa5]/g,"xx").length;
            if (len == 0) {
                
                $("#nickNameId").addClass("error_prompt");
                $("#nickNameId").html("昵称的输入的格式不正确！");
                return false;
            }else{
                $("#nickNameId").addClass("ok_prompt");
                $("#nickNameId").html("昵称的输入的格式正确！");
                return true;
            }
        }
         //昵称失去焦点
        var e = $("#nickName");
        e.blur(function(){
            return nickname();
        }); 
        
        //验证以1开头的11位手机号码
        function number(){
            var num = $("#tel").val();
            var regnum = /^1([1-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/;
            if (regnum.test(num) == false) {
                $("#telId").addClass("error_prompt");
                $("#telId").html("请以1开头的11位手机号码");
                return false;
            }else if (regnum.test(num) == true) {
                $("#telId").addClass("ok_prompt");
                $("#telId").html("关联手机号正确！");
                return true;
            }
        }
        //失去焦点的时候
        var num1 = $("#tel");
        num1.blur(function(){
            return number();
        });
        
        
        //邮箱
        function emails(){
            var ema = $("#email").val();
            if (ema == '') {
                $("#emailId").addClass("import_prompt");
                $("#emailId").html("跟你说了多少遍了别空格");
            }
        }
        var emalss = $("#email");
        emalss.blur(function(){
            return emails();
        });
        //form.submit提交的按钮
        $("#registerForm").submit(function() {
            return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails();
        });

        //键盘点击事件
        $(document).keydown(function(event) {
            if (event.keyCode == "13") {//按下回车键
                return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails();
            }
        });
    });
</script>
</head>
<body>
    <div id="header">
        <img src="images/register_logo.gif" alt="logo" />
    </div>
    <div id="main">
        <form id="registerForm" action="myCart.html" method="post"
            name="myform">
            <dl>
                <dt>通行证用户名：</dt>
                <dd>
                    <input type="text" id="userName" class="inputs userWidth" />@163.com
                </dd>
                <dd>
                    <div id="userNameId"></div>
                </dd>
            </dl>
            <dl>
                <dt>登录密码：</dt>
                <dd>
                    <input type="password" id="pwd" class="inputs" />
                </dd>
                <dd>
                    <div id="pwdId"></div>
                </dd>
            </dl>
            <dl>
                <dt>重复登录密码：</dt>
                <dd>
                    <input type="password" id="repwd" class="inputs" />
                </dd>
                <dd>
                    <div id="repwdId"></div>
                </dd>
            </dl>
            <dl>
                <dt>性别：</dt>
                <dd>
                    <input name="sex" type="radio" value="" checked="checked" />男 <input
                        name="sex" type="radio" value="" />女
                </dd>
            </dl>
            <dl>
                <dt>真实姓名：</dt>
                <dd>
                    <input type="text" id="realName" class="inputs" />
                </dd>
            </dl>
            <dl>
                <dt>昵称：</dt>
                <dd>
                    <input type="text" id="nickName" class="inputs" />
                </dd>
                <dd>
                    <div id="nickNameId"></div>
                </dd>
            </dl>
            <dl>
                <dt>关联手机号：</dt>
                <dd>
                    <input type="text" id="tel" class="inputs" />
                </dd>
                <dd>
                    <div id="telId"></div>
                </dd>
            </dl>
            <dl>
                <dt>保密邮箱：</dt>
                <dd>
                    <input type="email" id="email" class="inputs" />
                </dd>
                <dd>
                    <div id="emailId"></div>
                </dd>
            </dl>
            <dl>
                <dt></dt>
                <dd>
                    <input name=" " type="image" src="images/button.gif" />
                </dd>
            </dl>
        </form>
    </div>

</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>第10章新用户注册</title>
<script type="text/javascript" src="js/jquery-migrate-1.2.0.js"></script>
<script type="text/javascript" src="js/jQuery1.11.1.js"></script>
<link rel="stylesheet" href="css/register.css">
</style>
<script type="text/javascript">
    $(function() {
        
        //验证通行证用户名的非空验证
        function Passname() {
            var pname = $("#userName").val();
            if (pname == '') {
                $("#userNameId").addClass('error_prompt');
                $("#userNameId").html("验证通行证用户名不能为空");
                return false;
            }
            //规定正则以数字字母开头
            var reg = /^[a-zA-Z][a-zA-Z0-9_]*$/;
            if (reg.test(pname) == false) {
                $("#userNameId").addClass("error_prompt");
                $("#userNameId").html("由字，数，下，点，减号组成...");
                //$("#userName").val("");
                return false;
            } else if (reg.test(pname) == true) {
                $("#userNameId").addClass('ok_prompt');
                $("#userNameId").html("通行证用户名输入正确");
                return true;
            }
        }
        //通行证失去焦点的时候
        var blurname = $("#userName");
        blurname.blur(function() {
            return Passname();
        });
        
        
          //验证登陆密码长度为6~16位
        //密码是6-16位字母加数字
        function Pwd11() {
            var textpwd = $("#pwd").val();
            if (textpwd =='') {
                $("#pwdId").addClass("error_prompt");
                $("#pwdId").html("密码是必填！");
                return false;
            }
            var pwd11 = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/;
            if (pwd11.test(textpwd) == false) {
                $("#pwdId").addClass("error_prompt");
                $("#pwdId").html("密码是6-16位字母加数字");
                return false;
            }else if (pwd11.test(textpwd) == true) {
                $("#pwdId").addClass("ok_prompt");
                $("#pwdId").html("密码格式合格");
                return true;
            }
        }  
          //密码失去焦点
        var blurpwd = $("#pwd");
        blurpwd.blur(function() {
            return Pwd11();
        });
          
          
        //再次验证密码
        function twopwd(){
            var firstpwd = $("#pwd").val();//第一次输入的密码
            var tpwd = $("#repwd").val();//第二次输入的密码的时候。             
            if (firstpwd != tpwd) {    
                $("#repwdId").addClass("error_prompt");
                $("#repwdId").html("两次输入的密码不一致！");
                return false;
            }else{
                //$("repwdId").html("");
                return true;
            }                    
        }
        //重复密码失去焦点
        var blurtwopwd = $("#repwd");
        blurtwopwd.blur(function() {
            return twopwd();
        });
        
        
        /* //真实姓名
        function truename(){
            var regname = $("#realName").val();
            //汉字
            var regn = /^[\u4e00-\u9fa5]{2,4}$/;
            if (regn.test(regname) == false) {
                $("#pwdId").addClass("ok_prompt");
                $("#pwdId").html("密码格式合格");
                return true;
            }                        
        } */
        
        
        //昵称
        function nickname(){
            var kname = $("#nickName").val();
            var len = kname.replace(/[\u4e00-\u9fa5]/g,"xx").length;
            if (len == 0) {
                
                $("#nickNameId").addClass("error_prompt");
                $("#nickNameId").html("昵称的输入的格式不正确！");
                return false;
            }else{
                $("#nickNameId").addClass("ok_prompt");
                $("#nickNameId").html("昵称的输入的格式正确！");
                return true;
            }
        }
         //昵称失去焦点
        var e = $("#nickName");
        e.blur(function(){
            return nickname();
        }); 
        
        //验证以1开头的11位手机号码
        function number(){
            var num = $("#tel").val();
            var regnum = /^1([1-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$/;
            if (regnum.test(num) == false) {
                $("#telId").addClass("error_prompt");
                $("#telId").html("请以1开头的11位手机号码");
                return false;
            }else if (regnum.test(num) == true) {
                $("#telId").addClass("ok_prompt");
                $("#telId").html("关联手机号正确！");
                return true;
            }
        }
        //失去焦点的时候
        var num1 = $("#tel");
        num1.blur(function(){
            return number();
        });
        
        
        //邮箱
        function emails(){
            var ema = $("#email").val();
            if (ema == '') {
                $("#emailId").addClass("import_prompt");
                $("#emailId").html("跟你说了多少遍了别空格");
            }
        }
        var emalss = $("#email");
        emalss.blur(function(){
            return emails();
        });
        //form.submit提交的按钮
        $("#registerForm").submit(function() {
            return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails();
        });

        //键盘点击事件
        $(document).keydown(function(event) {
            if (event.keyCode == "13") {//按下回车键
                return Passname()&&Pwd11()&&twopwd()&&nickname()&&number()&&emails();
            }
        });
    });
</script>
</head>
<body>
    <div id="header">
        <img src="images/register_logo.gif" alt="logo" />
    </div>
    <div id="main">
        <form id="registerForm" action="myCart.html" method="post"
            name="myform">
            <dl>
                <dt>通行证用户名：</dt>
                <dd>
                    <input type="text" id="userName" class="inputs userWidth" />@163.com
                </dd>
                <dd>
                    <div id="userNameId"></div>
                </dd>
            </dl>
            <dl>
                <dt>登录密码：</dt>
                <dd>
                    <input type="password" id="pwd" class="inputs" />
                </dd>
                <dd>
                    <div id="pwdId"></div>
                </dd>
            </dl>
            <dl>
                <dt>重复登录密码：</dt>
                <dd>
                    <input type="password" id="repwd" class="inputs" />
                </dd>
                <dd>
                    <div id="repwdId"></div>
                </dd>
            </dl>
            <dl>
                <dt>性别：</dt>
                <dd>
                    <input name="sex" type="radio" value="" checked="checked" />男 <input
                        name="sex" type="radio" value="" />女
                </dd>
            </dl>
            <dl>
                <dt>真实姓名：</dt>
                <dd>
                    <input type="text" id="realName" class="inputs" />
                </dd>
            </dl>
            <dl>
                <dt>昵称：</dt>
                <dd>
                    <input type="text" id="nickName" class="inputs" />
                </dd>
                <dd>
                    <div id="nickNameId"></div>
                </dd>
            </dl>
            <dl>
                <dt>关联手机号：</dt>
                <dd>
                    <input type="text" id="tel" class="inputs" />
                </dd>
                <dd>
                    <div id="telId"></div>
                </dd>
            </dl>
            <dl>
                <dt>保密邮箱：</dt>
                <dd>
                    <input type="email" id="email" class="inputs" />
                </dd>
                <dd>
                    <div id="emailId"></div>
                </dd>
            </dl>
            <dl>
                <dt></dt>
                <dd>
                    <input name=" " type="image" src="images/button.gif" />
                </dd>
            </dl>
        </form>
    </div>

</body>
</html>

CSS的样式：

* {padding:0;margin:0;}

#header,#main{
    width:600px;
    margin:0 auto;
}
#main{
    padding: 10px;
    border: 1px #999999 solid;
    border-radius: 8px;
    overflow: hidden;
}
.inputs{
    border:solid 1px #a4c8e0;
    width:150px;
    height:15px;
}

.userWidth{
    width:110px;
}
dl dd div{
    display: inline-block;
    font-size:12px;
    color:#000;
    margin-left: 5px;
    line-height: 18px;
}
dl{
    clear:both;
    line-height: 22px;
}
dt,dd{
    float:left;
}
dt{
    width:110px;
    text-align:right;
    font-size:14px;
    height:30px;
    line-height:25px;
}
dd{
    font-size:12px;
    color:#666666;
}
dl>dd:first-of-type{width: 170px;}

.import_prompt{
    border:solid 1px #ffcd00;
    background-color:#ffffda;
    padding-left:5px;
    padding-right:5px;
    line-height:20px;
}

.error_prompt{
    border:solid 1px #ff3300;
    background:#fff2e5 url(../images/li_err.gif)5px 2px  no-repeat;
    padding:2px 5px 0px 25px;
    line-height:20px;
}
/*褰撴枃鏈鍐呭杈撳叆姝ｇ‘鏃讹紝鎻愮ず鏂囨湰鐨勬牱寮�*/
.ok_prompt{
    border:solid 1px #01be00;
    background:#e6fee4 url(../images/li_ok.gif) 5px 2px no-repeat;
    padding:2px 5px 0px 25px;
    line-height:20px;
}

希望能够帮到大家。

猜你喜欢

转载自www.cnblogs.com/www-yang-com/p/9301547.html
今日推荐
NetBSD 禁止提交由 AI 生成的代码
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
周排行
static方法和非static方法的区别（java）
如何查找计算机专业paper
java.lang.ClassFormatError: Incompatible magic value 0 in class file com/sitecha
跳跃游戏II
stm32_之【建立工程】
TeaWeb v0.0.9 发布，统计底层优化、主机监控功能改进
事件分发 -----控制字体大小
JavaScript DOM练习（动态表格添加） December 25，2019
JSF Scope & CDI
实现从零搭建一个登录注册页面（附源代码）
每日归档
更多
2024-05-19(0)
2024-05-18(4)
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022