JavaScript实现简单的表单验证

关键代码：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 不可用 */
        .btn-disable {
            width: 100px;
            height: 40px;
            background-color: rgba(255, 0, 0, 0.4);
            color: #fff;
            border: 0 none;
            cursor: pointer;
        }

        .btn-able {
            width: 100px;
            height: 40px;
            background-color: rgba(255, 0, 0, 1);
            color: #fff;
            border: 0 none;
            cursor: pointer;
        }

        span {
            display: none;
        }
    </style>
</head>

<body>
    <form action="./06小米左侧导航栏.html" method="GET" onsubmit="return disForm()">
        <p> <label for="">用户名：</label>
            <input type="text" name="user" id="txt1">
            <span id="txt1tip">*用户名不能为空(8-12)位数字和字母组合</span></p>
        <p> <label for="">密&nbsp;&nbsp;码：</label>
            <input type="password" name="pwd1" id="txt2">
            <span id="txt2tip">*密码为6位数字</span></p>
        <p> <label for="">重复密码：</label>
            <input type="password" name="pwd2" id="txt3">
            <span id="txt3tip">*两次输入密码要一致</span></p>
        <p> <label for="">电话：</label>
            <input type="text" name="tel" id="txt4">
            <span id="txt4tip">请输入正确手机号</span></p>
        <p><input type="checkbox" id="cbx">同意****协议</p>
        <input type="submit" value="注册" class="btn-disable" id="btn">
    </form>
    <script>
        var txt1 = document.querySelector('#txt1');
        var cbx = document.querySelector('#cbx');
        var btn = document.querySelector('#btn');

        function disForm() {
            return checkuser() && checkpwd() && checkpwds() && checktel() && change();
        }
        // // 校验用户名
        function checkuser() {
            var v1 = txt1.value;
            var reg = /^\w{8,12}$/ig;
            if (reg.test(v1)) {
                txt1tip.style.display = 'none';
                return true;
            } else {
                txt1tip.style.display = 'block';
                txt1tip.style.color = 'red';
                return false;
            }
        }

        // 校验密码
        function checkpwd() {
            var v2 = txt2.value;
            var reg1 = /^\d{6}$/ig;
            if (reg1.test(v2)) {
                txt2tip.style.display = 'none';
                return true;
            } else {
                txt2tip.style.display = 'block';
                txt2tip.style.color = 'red';
                return false;
            }
        }
        // 校验重复密码
        function checkpwds() {
            var v2 = txt2.value;
            var v3 = txt3.value;
            // var reg1 = /^\d{6}$/ig;
            if (v2 === v3) {
                txt3tip.style.display = 'none';
                return true;
            } else {
                txt3tip.style.display = 'block';
                txt3tip.style.color = 'red';
                return false;
            }
        }
        //  校验电话，电话是选填
        function checktel() {
            var v4 = txt4.value;
            // var v3 = txt3.value;
            var reg3 = /^[1][3-9]\d{9}$/;
            if (reg3.test(v4) || v4.trim().length == 0) {
                txt4tip.style.display = 'none';
                return true;
            } else {
                txt4tip.style.display = 'block';
                txt4tip.style.color = 'red';
                return false;
            }
        }



        cbx.addEventListener('change', function () {
            if (cbx.checked) {
                btn.classList.remove('btn-disable');
                btn.classList.add('btn-able');
                btn.disabled = false;
            } else {
                btn.classList.remove('btn-able');
                btn.classList.add('btn-disable');
                btn.disabled = true;
            }
        });
    </script>
</body>

</html>