<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用正则表达式验证注册页面</title>
    <link rel="stylesheet" href="css/register.css">

</head>

<body>
<section id="register">
    <div><img src="images/logo.jpg" alt="logo"/><img src="images/banner.jpg" alt="banner"/></div>
    <h1 class="hr_1">新用户注册</h1>
    <form action="success.html" method="post" name="myform">
        <dl>
            <dt>用户名：</dt>
            <dd><input id="user" type="text"/>
                <div id="user_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>密码：</dt>
            <dd><input id="pwd" type="password"/>
                <div id="pwd_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>确认密码：</dt>
            <dd><input id="repwd" type="password"/>
                <div id="repwd_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>电子邮箱：</dt>
            <dd><input id="email" type="text"/>
                <div id="email_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>手机号码：</dt>
            <dd><input id="mobile" type="text"/>
                <div id="mobile_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>生日：</dt>
            <dd><input id="birth" type="text"/>
                <div id="birth_prompt"></div>
            </dd>
        </dl>
        <dl>
            <dt>&nbsp;</dt>
            <dd><input name="" type="image" src="images/register.jpg" class="btn"/></dd>
        </dl>
    </form>
</section>
<script src="js/jquery-1.12.4.js"></script>
<script type="text/javascript">
    $(function () {
        $("#user").blur(checkUser);
        $("#pwd").blur(checkPwd);
        $("#repwd").blur(checkRepwd);
        $("#email").blur(checkEmail);
         $("#mobile").blur(checkMobile);
         $("#birth").blur(checkBirth);
        function checkUser() {
            let userValue = $(this).val();
            let user_prompt = $("#user_prompt");
            let userAge = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
            if (!(userAge).test(userValue)) {
                user_prompt.html("用户名由英文字母和数字组成的4-16位字符以字母开头");
                return false
            }
            user_prompt.html("");
            return true
        }

        function checkPwd() {
            let pwdValue = $(this).val();
            let pwd_Prompt = $("#pwd_prompt");
            let pwdAge = /^[a-zA-Z0-9]{4,10}$/;
            if (!(pwdAge).test(pwdValue)) {
                pwd_Prompt.html("密码由英文字母和数字组成的4-10位字符");
                return false
            }
            pwd_Prompt.html("");
            return true
        }

        function checkRepwd() {
            let repwdValue = $(this).val();
            let pwdValue = $("#pwd").val();
            let repwd_Prompt = $("#repwd_prompt");
            if (repwdValue !== pwdValue) {
                repwd_Prompt.html("两次密码不相同");
                return false
            }
            repwd_Prompt.html("");
            return true
        }

        function checkEmail() {
            let emailValue = $(this).val();
            let email_Prompt = $("#email_prompt");
            let emailAge = /^\w+([-+.]\w+)*@\w+([-.]\\w+)*\.\w+([-.]\w+)*$/;
            if (!(emailAge).test(emailValue)) {
                email_Prompt.html("邮箱格式错误");
                return false
            }
            email_Prompt.html("")
            return true

        }
        function checkMobile() {
           let mobileValue = $(this).val();
            let mobile_Prompt = $("#mobile_prompt");
            let mobileAge=/^(?:13\d|15\d|18\d)\d{5}(\d{3}|\*{3})$/;
            if (!(mobileAge).test(mobileValue)){
                mobile_Prompt.html("符合13*********,15*********,18***********;");
                return false
            }
            mobile_Prompt.html("");
            return true
        }
        function checkBirth() {
            let birthValue = $(this).val();
            let birth_Prompt = $("#birth_prompt");
            let birthAge= /^(19|20)\d{2}-(1[0-2]|0?[1-9])-(0?[1-9]|[1-2][0-9]|3[0-1])$/;
            if (!(birthAge).test(birthValue)){
                birth_Prompt.html("只接受19，20开头的年份");
                return false
            }
            birth_Prompt.html("");
            return true
        }
    })

</script>
</body>
</html>

更多推荐

使用正则表达式验证注册页面