利用js写表单验证

最新推荐文章于 2024-09-05 16:27:03 发布

哎亚亚哎亚亚

最新推荐文章于 2024-09-05 16:27:03 发布

阅读量68

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/weixin_65459869/article/details/132588946

版权

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js练习2</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .box {
            width: 500px;
            height: 450px;
            margin: 100px auto;
            padding: 20px 30px;
            /* background-color: aquamarine; */
        }

        .title {
            margin-bottom: 20px;
            text-align: center;
        }

        .content form {
            display: flex;
            flex-direction: column;
        }

        .label {
            display: flex;
            flex-direction: column;
            margin-bottom: 10px;
        }

        .item {
            display: flex;
        }

        .title1 {
            width: 80px;
            font-style: 14px;
            line-height: 40px;
            text-align-last: justify;
        }

        .control {
            margin-left: 20px;
            flex: 1;
            display: flex;
        }

        .control input {
            display: block;
            width: 90%;
            padding: 0 20px;
            height: 40px;
            font-size: 14px;
            border: 2px solid #eee;
            outline: none;
            line-height: 40px;
            border-radius: 5px;
        }

        .btn {
            width: 150px;
            height: 40px;
            margin: auto;
            line-height: 40px;
            font-size: 16px;
            cursor: pointer;
            margin-bottom: 10px;
            background-color: rgb(68, 148, 201);
            border: 1px solid white;
        }

        .btn span {
            color: white;
        }

        #sp {
            /* background-color: blueviolet; */
            display: inline-block;
            width: 10%;
            height: 40px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h2 class="title">填写注册信息</h2>
        <div class="content">
            <div class="label">
                <div class="item">
                    <div class="title1" id="username">用户名：</div>
                    <div class="control">
                        <input type="text" id="name" placeholder="长度为4~12,英文大小写字母">
                    </div>
                </div>
            </div>
            <div class="label">
                <div class="item">
                    <div class="title1" id="passwod">密码：</div>
                    <div class="control">
                        <input type="password" id="password" placeholder="长度6~20,大小写字母、数字或下划线">
                    </div>
                </div>
            </div>
            <div class="label">
                <div class="item">
                    <div class="title1" id="passwor">确认密码：</div>
                    <div class="control">
                        <input type="password" id="password1" placeholder="请再次输入密码进行确认">
                    </div>
                </div>
            </div>
            <div class="label">
                <div class="item">
                    <div class="title1" id="one">手机号码：</div>
                    <div class="control">
                        <input type="text" id="phone" placeholder="13、14、15、17、18开头的11位手机号">
                    </div>
                </div>
            </div>
            <div class="label">
                <div class="item">
                    <div class="title1" id="card">身份证号：</div>
                    <div class="control">
                        <input type="text" id="idcard" placeholder="18位身份证号">
                    </div>
                </div>
            </div>
            <div class="label">
                <div class="item">
                    <div class="title1" id="email">邮箱：</div>
                    <div class="control">
                        <input type="text" id="useremail" placeholder="用户名 @ 域名(域名后缀至少2个字符)">
                    </div>
                </div>
            </div>
            <div class="label">
                <div class="item">
                    <button class="btn" type="submit" onclick="sub()"><span>注册</span></button>
                </div>
            </div>
        </div>
    </div>

    
    <script src="./practise.js"></script>
</body>

</html>

function sub() {
    // 用户名
    var name = document.getElementById("name").value;
    var usernames = /^[a-zA-Z]{4,12}$/;
    // if (usernames.test(name)) {
    //     alert("注册成功");
    // } else {
    //     alert("注册失败");
    // }

    // 密码
    var password = document.getElementById("password").value;
    var passwords = /^[a-zA-Z0-9_]{6,20}$/;
    // if (passwords.test(password)) {
    //     alert("注册成功");
    // } else {
    //     alert("注册失败");
    // }

    // 确认密码
    var password1 = document.getElementById("password1").value;
    var password1s = /^[a-zA-Z0-9_]{6,20}$/;
    // if (password1s.test(password1)) {
    //     alert("注册成功");
    // } else {
    //     alert("注册失败");
    // }

    // 电话号码
    var phone = document.getElementById("phone").value;
    var cellphone = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/;
    // if (cellphone.test(phone)) {
    //     alert("注册成功");
    // } else {
    //     alert("注册失败");
    // }

    // 身份证号
    var idcard = document.getElementById("idcard").value;
    var idcards = /^[1-9]\d{5}(?:18|19|20)\d{2}(?:0[1-9]|10|11|12)(?:0[1-9]|[1-2]\d|30|31)\d{3}[\dXx]$/;
    // if (idcards.test(idcard)) {
    //     alert("注册成功");
    // } else {
    //     alert("注册失败");
    // }

    // 邮箱
    var useremail = document.getElementById("useremail").value;
    var emails =  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<> ()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
    // if (emails.test(useremail)) {
    //     alert("注册成功");
    // } else {
    //     alert("注册失败");
    // }


    if (emails.test(useremail) && usernames.test(name) && passwords.test(password) && password1s.test(password1) && cellphone.test(phone) && idcards.test(idcard)){
        alert("注册成功");
    } else {
        alert("注册失败");
    }
}