手写注册页面,并实现验证信息(AJAX,Jquery,正则表达式,密码强度验证)

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <script src="~/Scripts/jquery-1.7.1.js"></script>
    <script src="~/Scripts/jquery.validate.js"></script>
    <script>

        $(function () {
             //验证用户名
            $("#StudentLoginName").blur(function () {
                yzLoginName();
            })
            //验证年龄
            $("#StudentAge").blur(function () {
                yzAge();
            });
            //验证本人姓名
            $("#StudentName").blur(function () {
                yzName();
            })
            //验证密码
            //$("#StudentPwd").blur(function () {
            //    var v = $("#StudentPwd").val();
            //    //判断是否为非空字符,并且长度为6-16位的正则
            //    var gz = /\S{6,16}/;
            //    //var gz = /^[A-Za-z0-9._-]{3,16}$/;
            //    if (gz.test(v)) {
            //        $("#pwd_msg").html("ok").css("color","green");
            //    }
            //    else {
            //        $("#pwd_msg").html("必须为6-16位的非空字符").css("color", "red");
            //        return false;
            //    }
            //})
            //验证两次密码一致
            $("#PwdAgain").blur(function () {
                yzPwdAgain();
            })
            //验证邮箱
            $("#StudentEmail").blur(function () {
                yzEmail();
            })
            //验证地址不为空
            $("#StudentAddress").blur(function () {
                yzAddress();
            });
            $("#im").click(function () {
                $(this).attr("src", "/Handler/ValidateCode.ashx?_="+Math.random());
            });
            $("#sub").click(function () {
                var tt = $("#viewData").val();
                alert(tt);
                if (tt == "false") {
                    return false;
                }
            });
        });
        网上的方法///
        //判断输入密码的类型 
        function CharMode(iN) {
            if (iN >= 48 && iN <= 57) //数字 
                return 1;
            if (iN >= 65 && iN <= 90) //大写 
                return 2;
            if (iN >= 97 && iN <= 122) //小写 
                return 4;
            else
                return 8;
        }
        //bitTotal函数 
        //计算密码模式 
        function bitTotal(num) {
            modes = 0;
            for (i = 0; i < 4; i++) {
                if (num & 1) modes++;
                num >>>= 1;
            }
            return modes;
        }
        //返回强度级别 
        function checkStrong(sPW) {
            //if (sPW.length < 6 || sPW.length > 16)
            $("#pwd_msg").html("必须为6到16位的非空字符").css("color", "red");
            //$("#viewData").val("false");
            //return 0; //密码太短 
            Modes = 0;
            for (i = 0; i < sPW.length; i++) {
                //密码模式 
                Modes |= CharMode(sPW.charCodeAt(i));
            }
            return bitTotal(Modes);
        }

        //显示颜色 
        function pwStrength(pwd) {
            O_color = "#eeeeee";
            L_color = "#FF0000";
            M_color = "#FF9900";
            H_color = "#33CC00";
            if (pwd == null || pwd == ''||pwd.length < 6 || pwd.length > 16) {
                Lcolor = Mcolor = Hcolor = O_color;
                $("#pwd_msg").html("必须为6到16位的非空字符").css("color", "red");
                $("#viewData").val("false");
            }
            else {
                $("#tb").css("display", "inline");
                $("#pwd_msg").html("");
                S_level = checkStrong(pwd);
                switch (S_level) {
                    case 0:
                        Lcolor = Mcolor = Hcolor = O_color;
                    case 1:
                        Lcolor = L_color;
                        Mcolor = Hcolor = O_color;
                        break;
                    case 2:
                        Lcolor = Mcolor = M_color;
                        Hcolor = O_color;
                        break;
                    default:
                        Lcolor = Mcolor = Hcolor = H_color;
                }
                $("#viewData").val("true");
            }
            document.getElementById("strength_L").style.background = Lcolor;
            document.getElementById("strength_M").style.background = Mcolor;
            document.getElementById("strength_H").style.background = Hcolor;
            return;
        }
        //
        //验证用户名的方法
        function yzLoginName() {
            //获取用户输入的字符串
            var v = $("#StudentLoginName").val();
            //验证符合3-16位符合要求的字符正则表达式
            var gz = /^[A-Za-z0-9._-]{3,16}$/;
            //验证首字符必须为字母的正则表达式
            var sz = /^[A-Za-z]{1}/;
            if (gz.test(v)) {
                var sp = v.substr(0, 1);
                if (sz.test(sp)) {
                    $.post("/User/CheckLoginName", {data:v}, function (msg) {
                        if (msg == "yes")
                        {
                            $("#username_msg").html("该用户名已使用").css("color", "red");
                            $("#viewData").val("false");
                        }
                        else if (msg == "no") {
                            $("#username_msg").html("恭喜,该用户名可以注册").css("color", "green");
                            $("#viewData").val("true");
                        }
                        else {
                            alert("服务器内部错误");
                        }
                    });
                  
                  
                }
                else {
                    $("#username_msg").html("首字符必须以字母开头").css("color", "red");
                    $("#viewData").val("false");
                }
            }
            else {
                $("#username_msg").html("长度应为3到16个字符").css("color", "red");
                $("#viewData").val("false");
            }
        }
        //验证年龄的方法
        function yzAge() {
            //获取用户输入的字符串
            var age = $("#StudentAge").val();
            //验证输入的为数字
            var gz = /^[0-9]{1,}$/;
            if (gz.test(age)) {
                var ageInt = parseInt(age);
                if (ageInt > 0 && ageInt < 150) {
                    $("#age_msg").html("ok").css("color", "green");
                    $("#viewData").val("true");
                }
                else {
                    $("#age_msg").html("年龄有误").css("color", "red");
                    $("#viewData").val("false");
                }
            }
            else {
                $("#age_msg").html("请输入数字").css("color", "red");
                $("#viewData").val("false");
            }
        }
        //验证本人姓名的方法
        function yzName() {
            var v = $("#StudentName").val();
            if (v.length > 0) {
                $("#name_msg").html("ok").css("color", "green");
                $("#viewData").val("true");
            }
            else {
                $("#name_msg").html("姓名不能为空").css("color", "red");
                $("#viewData").val("false");
            }
        }
        //验证两次密码一致的方法
        function yzPwdAgain() {
            var v = $("#PwdAgain").val();
            var t = $("#StudentPwd").val();
            if (v == t) {
                $("#pwdagain_msg").html("ok").css("color", "green");
                $("#viewData").val("true");
            }
            else {
                $("#pwdagain_msg").html("密码不一致").css("color", "red");
                $("#viewData").val("false");
            }
        }
        //验证邮箱的方法
        function yzEmail() {
            var t = $("#StudentEmail").val();
            //合法邮箱的正则表达式
            var gz = /^[0-9a-zA-Z._-]+@@[0-9a-zA-Z]+([.][a-zA-Z]+){1,2}$/;
            if (gz.test(t)) {
                $("#email_msg").html("ok").css("color", "green");
                $("#viewData").val("true");
            }
            else {
                $("#email_msg").html("邮箱不合法").css("color", "red");
                $("#viewData").val("false");
            }
        }
        //验证地址栏的方法
        function yzAddress() {
            var address = $("#StudentAddress").val();
            if (address.length > 0) {
                $("#address_msg").html("ok").css("color", "green");
                $("#viewData").val("true");
            }
            else {
                $("#address_msg").html("地址不能为空").css("color", "red");
                $("#viewData").val("false");
            }
        }
    </script>

    <title>Register</title>
</head>
<body>
    <form method="post" action="/User/Register">
        <div style="font-size: small">
            <input type="hidden" id="viewData" value="true" />
            <table width="80%" height="22" border="0" align="center" cellpadding="0" cellspacing="0">
                <tr>
                    <td>
                        <div align="center">
                            <table height="61" cellpadding="0" cellspacing="0" style="height: 332px">
                                <tr>
                                    <td height="33" colspan="6">
                                        <p class="STYLE2" style="text-align: center">注册新帐户</p>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="24%" align="center" valign="top" style="height: 26px">用户名</td>
                                    <td valign="top" width="37%" align="left" style="height: 26px">
                                        <input type="text" name="StudentLoginName" id="StudentLoginName" />
                                    </td>
                                    <td>
                                        <span id="username_msg">3-16个字符,可使用字母,数字,下划线,需以字母开头</span>
                                    </td>

                                </tr>
                                <tr>
                                    <td width="24%" height="26" align="center" valign="top">年龄:</td>
                                    <td valign="top" width="37%" align="left">
                                        <input type="text" name="StudentAge" id="StudentAge" />
                                    </td>
                                    <td>
                                        <span id="age_msg">年龄不能为空</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="24%" height="26" align="center" valign="top">真实姓名:</td>
                                    <td valign="top" width="37%" align="left">
                                        <input type="text" name="StudentName" id="StudentName" />
                                    </td>
                                    <td>
                                        <span id="name_msg">本人姓名填写不能为空</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="24%" height="26" align="center" valign="top">密码:</td>
                                    <td valign="top" width="37%" align="left">
                                        <input type="password" name="StudentPwd" id="StudentPwd" οnkeyup="pwStrength(this.value)" οnblur="pwStrength(this.value)" />
                                    </td>
                                    <td>
                                        <span id="pwd_msg">6~16个非空字符</span>
                                        <table id="tb" width="210" border="1" cellspacing="0" cellpadding="1" bordercolor="#eeeeee" height="22" style='display:none'>
                                            <tr align="center" bgcolor="#f5f5f5">
                                                <td width="33%" id="strength_L">弱</td>
                                                <td width="33%" id="strength_M">中</td>
                                                <td width="33%" id="strength_H">强</td>
                                            </tr>
                                        </table>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="24%" height="26" align="center" valign="top">确认密码:</td>
                                    <td valign="top" width="37%" align="left">
                                        <input type="password" name="PwdAgain" id="PwdAgain" />
                                    </td>
                                    <td>
                                        <span id="pwdagain_msg">必须密码一致</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="24%" height="26" align="center" valign="top">Email:</td>
                                    <td valign="top" width="37%" align="left">
                                        <input type="text" name="StudentEmail" id="StudentEmail" />
                                    </td>
                                    <td>
                                        <span id="email_msg">规范的邮箱</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td width="24%" height="26" align="center" valign="top">地址:</td>
                                    <td valign="top" width="37%" align="left">
                                        <input type="text" name="StudentAddress" id="StudentAddress" />
                                    </td>
                                    <td>
                                        <span id="address_msg">地址不能为空</span>
                                    </td>
                                </tr>
                               @* <tr>
                                    <td width="24%" height="26" align="center" valign="top">验证码:</td>
                                    <td valign="top" width="37%" align="left">
                                         <input type="text" name="StudentAddress" id="StudentAddress" />
                                       <img id="im" style="cursor: pointer" title="看不起?点我换一张" src="/Handler/ValidateCode.ashx" />
                                    </td>
                                    <td>
                                        <span id="code_msg">不区分大小写</span>
                                    </td>
                                </tr>*@
                                <tr>
                                    <td colspan="3" align="center">
                                        <input type="submit" value="注册" id="sub" />
                                    </td>

                                </tr>
                                <tr>
                                    <td colspan="3" align="center">&nbsp;</td>
                                </tr>
                            </table>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </form>

</body>
</html>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值