前端注册页面（输入身份证号自动填充生日）

钰后彩虹

于 2023-04-30 23:03:38 发布

阅读量192

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/ZJY158480/article/details/130452555

版权

<!DOCTYPE html>
<html>
    <head>
        <body background="https://tse4-mm.cn.bing.net/th/id/OIP-C.dwfxOXUobS-fmKrqWktzwQHaFO?w=272&h=192&c=7&r=0&o=5&dpr=1.3&pid=1.7"></body>
        <style>
            .wrap {
            margin: 100px auto;
            width: 380px;
            background-color: #fff;
            padding: 38px 0 22px;
            font-size: 12px;
            color: #999;
            border-radius: 5px;
            }

            .wrap input {
            box-sizing: border-box;
            display: block;
            width: 300px;
            height: 40px;
            margin-bottom: 18px;
            padding-left: 17px;
            border: 1px solid #cecece;
            border-radius: 5px;
            color: #999;
            }

            input::-webkit-input-placeholder {
            color: #cecece;
            }

            .box {
            margin: 0 39px;
            }

            .box p {
            text-align: right;
            margin: 14px 0;
            color: #cecece;
            }

            .box p>a {
            color: #999;
            }

            .box button {
            box-sizing: border-box;
            display: block;
            width: 300px;
            height: 40px;
            margin-bottom: 18px;
            padding-left: 17px;
            border: 1px solid #cecece;
            border-radius: 5px;
            }

            .login-type {
            border-top: 1px solid #999;
            padding: 15px 38px 0;
            }
        </style>
    </head>

    <body>
        <div class="wrap">
            <div class="box">            
                <input type="text" placeholder="请输入您的账号" id="account">                     
                <input type="text"  placeholder="请输入密码" id="num" style="display: block;">           
                <input type="text" placeholder="请输入您的身份证号" id="sfz" var="idcard">                       
                <input type="text"  placeholder="请输入邮箱" id="yx">
                <input type="text"  placeholder="请输入手机号" id="phone">          
                <input type="text"  placeholder="请输入出生日期" id="birth">
                <button type="button" onclick="getInformation()">立即注册</button>
                <p>注册即视为同意<a href="#">《注册协议》</a></p>
                
                <script>
                    function getInformation(){
                    var account=document.getElementById("account").value;
                    var num=document.getElementById("num").value;
                    var sfz=document.getElementById("sfz").value;
                    var yx=document.getElementById("yx").value;
                    var phone=document.getElementById("phone").value;
                    var birth=document.getElementById("birth").value;

                    if(account==""){
                    alert("账号不能为空");
                    return false;}

                    if(num.length!=8){
                    alert("请输入8位数密码");
                    return false;}

                    if(sfz.length!=18){
                    alert("请输入18位数正确身份证号");
                    return false;}

                    if(yx==""){
                    alert("邮箱不能为空");
                    return false;}

                    if(phone.length!=11){
                    alert("请输入正确手机号码");
                    return false;}

                    if(birth==""){
                    alert("生日不能为空");
                    return false;}

                    alert('注册成功');
                    form.reset();

                    localStorage.setItem("account", document.getElementById("account").value);
                    localStorage.setItem("num", document.getElementById("num").value)
                    localStorage.setItem("sfz", document.getElementById("sfz").value)
                    localStorage.setItem("yx", document.getElementById("yx").value)
                    localStorage.setItem("phone", document.getElementById("phone").value)
                    localStorage.setItem("birth", document.getElementById("birth").value)
                    }

                    const sfzInput = document.querySelector('#sfz');
                    const birthInput = document.querySelector('#birth');
                    
                    sfzInput.addEventListener('input', function () {
                        const sfz = this.value.trim();
                        if (/^(\d{15}|\d{18}|\d{17}x)$/.test(sfz)) {
                            const year = sfz.substring(6, 10);
                            const month = sfz.substring(10, 12);
                            const day = sfz.substring(12, 14);
                            birthInput.value = `${year}-${month}-${day}`;
                        }
                    });

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