身份证号码的验证没有效果

来源：4-8 编程练习

天青色烟雨蒙

2019-06-18 17:27:48

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        .main {
            width: 800px;
            height: 600px;
            margin: 0 auto;
            background-color: #eee;
        }

        .top {
            height: 40px;
            background-color: #3092D1;
            line-height: 40px;
            color: #fff;
            padding-left: 20px;
        }

        .table {
            text-align: center;
        }

        .table input,
        .table select {

            width: 200px;

            padding: 5px 0;

            text-indent: 5px;

        }

        .table span {
            color: red;
            padding-left: 10px;
        }

        .table .submit {
            margin-top: 50px;
            width: 80px;
            height: 40px;
            background-color: #3092D1;
            border-radius: 5px;
            text-align: center;
            line-height: 40px;
            color: #fff;
            outline: 0;
            border: 0;
        }
    </style>
</head>
<body>
<div class="main">
    <div class="top">用户注册</div>
    <div class="table">
        <p>
            用户名：<input type="text" class="uname"/>
            <span class="uname_info"></span>
        </p>

        <p>登录密码：<input type="password" class="upwd"/>
            <span class="upwd_info"></span>
        </p>

        <p>
            确认密码：<input type="password" class="repwd"/>
            <span class="repwd_info"></span>
        </p>

        <p>
            姓名：<input type="text" class="real_name"/>
            <span class="real_name_info"></span>
        </p>

        <p>
            性别：<select id="sex">
            <option value="male">男</option>
            <option value="female">女</option>
        </select>
        </p>

        <p>
            身份证号码：<input type="text" class="id_number"/>
            <span class="id_number_info"></span>
        </p>

        <p>
            邮箱：<input type="text" class="email"/>
            <span class="email_info"></span>
        </p>

        <p>
            手机号码：<input type="text" class="phone"/>
            <span class="phone_info"></span>
        </p>

        <input type="button" class="submit" value="提交"/>
    </div>
</div>
<script>
    var uname = document.querySelector('.uname');
    var upwd = document.querySelector('.upwd');
    var repwd = document.querySelector('.repwd');
    var real_name = document.querySelector('.real_name');
    var id_number = document.querySelector('.id_number');
    var email = document.querySelector('.email');
    var phone = document.querySelector('.phone');
    var submitBtn = document.querySelector('.submit');

    var uname_info = document.querySelector('.uname_info');
    var upwd_info = document.querySelector('.upwd_info');
    var repwd_info = document.querySelector('.repwd_info');
    var real_name_info = document.querySelector('.real_name_info');
    var id_number_info = document.querySelector('.id_number_info');
    var email_info = document.querySelector('.email_info');
    var phone_info = document.querySelector('.phone_info');

    var patter_uname = /^\w{6,20}$/;
    var patter_upwd = /^[^\s]{6,18}$/;
    var patter_real_name = /^[\u4e00-\u9fa5]{2,4}$/;
    var patter_id_number = /^\d{15,17}(?:\d|x|X)$/;
    var patter_email = /^\w+@\w+[\.\w]+$/;
    var patter_phone = /^(?:(?:13\d)|(?:147)|(?:15[0,1,2,3,5,6,7,8,9])|(?:18[0,2,5,6,7,8,9]))\d{8}$/;

    //用户名
 uname.onblur = function () {
        if (patter_uname.exec(this.value)) {
            uname_info.innerHTML = 'ok';
        } else {
            uname_info.innerHTML = '6-20位字母、数字或“_”,字母开头';
        }
    }

    //密码
 upwd.onblur = function () {
        if (patter_upwd.exec(this.value)) {
            upwd_info.innerHTML = 'ok';
        } else {
            upwd_info.innerHTML = '6-18位，数字字母或符号，中间不能有空格';
        }
    }

    //确认密码
 repwd.onblur = function () {
        if (patter_upwd.test(this.value)) {
            if (repwd.value === upwd.value) {
                repwd_info.innerHTML = 'ok';
            } else {
                repwd_info.innerHTML = '两次输入密码不一致';
            }
        } else {
            repwd_info.innerHTML = '请设置密码';
        }
    }

    //姓名
 real_name.onblur = function () {
        if (patter_real_name.exec(this.value)) {
            real_name_info.innerHTML = 'ok';
        } else {
            real_name_info.innerHTML = '真实姓名为两位到四位的中文';
        }
    }

    //身份证
 id_number.onblur = function () {
        if (patter_id_number.exec(this.value)) {
            id_number_info = 'ok';
        } else {
            id_number_info = '15位或者18位的数字';
        }
    }

    //邮箱
 email.onblur = function () {
        if (patter_email.exec(this.value)) {
            email_info.innerHTML = 'ok';
        } else {
            email_info.innerHTML = '邮箱格式不正确';
        }
    }

    //手机号码
 phone.onblur = function () {
        if (patter_phone.exec(this.value)) {
            phone_info.innerHTML = 'ok';
        } else {
            phone_info.innerHTML = '电话号码不正确';
        }
    }

    // submit
 submitBtn.onclick=function(){
        uname.onblur();
        upwd.onblur();
        repwd.onblur();
        real_name.onblur();
        id_number.onblur();
        email.onblur();
        phone.onblur();
        if(patter_upwd.test(upwd.value)
                && patter_upwd.test(repwd.value)
                && repwd.value===upwd.value
 && patter_real_name.test(real_name.value)
                && patter_id_number.test(id_number.value)
                && patter_email.test(email.value)
                && patter_phone.test(phone.value)){
            alert("验证通过");
        }else{
            alert("验证失败");
        }
    }


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

写回答

2回答