案例一:表单验证问题

苦逼的猿宝
于 2023-03-02 19:05:16 发布
阅读量237
点赞数 1
分类专栏： js案例文章标签： javascript 学习前端 Powered by 金山文档
本文链接：https://blog.csdn.net/GAGGAAAAA/article/details/129306894
版权
js案例专栏收录该内容
2 篇文章 0 订阅
订阅专栏
表单验证

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            font: 14px/28px "微软雅黑";
        }

        .contact *:focus {
            outline: none;
        }

        .contact {
            width: 700px;
            height: auto;
            background: #f6f6f6;
            margin: 40px auto;
            padding: 10px;
        }

        .contact ul {
            width: 680px;
            margin: 0 auto;
        }

        .contact ul li {
            border-bottom: 1px solid #dfdfdf;
            list-style: none;
            padding: 12px;
        }

        .contact ul li label {
            width: 120px;
            display: inline-block;
            /* float: left; */
        }

        .contact ul li input[type="text"],
        .contact ul li input[type="password"] {
            width: 220px;
            height: 25px;
            border: 1px solid #aaa;
            padding: 3px 8px;
            border-radius: 5px;
        }

        .contact ul li input:focus {
            border-color: #c00;
        }

        .contact ul li input[type="text"] {
            transition: padding 0.25s;
            -o-transition: padding 0.25s;
            -moz-transition: padding 0.25s;
            -webkit-transition: padding 0.25s;
        }

        .contact ul li input[type="password"] {
            transition: padding 0.25s;
            -o-transition: padding 0.25s;
            -moz-transition: padding 0.25s;
            -webkit-transition: padding 0.25s;
        }

        .contact ul li input:focus {
            padding-right: 70px;
        }

        .btn {
            position: relative;

            left: 300px;
        }

        .tips {
            color: rgba(0, 0, 0, 0.5);
            padding-left: 10px;
        }

        .tips_true,
        .tips_false {
            padding-left: 10px;
        }

        .tips_true {
            color: green;
        }

        .tips_false {
            color: red;
        }
    </style>
</head>

<body>
    <div class="contact">
        <form name="form1" method="post" action="https://www.baidu.com">
            <ul>
                <li>
                    <label>姓名：</label>
                    <input type="text" name="yourname" placeholder="请输入用户名" /><span class="tips"
                        id="divname">长度1~12个字符</span>
                </li>
                <li>
                    <label>密码：</label>
                    <input type="password" name="yourpass" placeholder="请输入你的密码" /><span class="tips"
                        id="divpassword1">密码必须6-12位的字母和数字组成</span>
                </li>
                <li>
                    <label>确认密码：</label>
                    <input type="password" name="yourpass2" placeholder="请再次输入你的密码" /><span class="tips"
                        id="divpassword2">两次密码需要相同</span>
                </li>
                <li>
                    <label>电子邮箱：</label>
                    <input type="text" name="youremail" placeholder="请输入你的邮箱" /><span class="tips"
                        id="divmail">请输入你的邮箱名</span>
                </li>
            </ul>
            <b class="btn"><input type="submit" value="提交" />
                <input type="reset" value="取消" /></b>
        </form>
    </div>
    <script>
        //获取input元素
        var nameInput = document.querySelector('input[name=yourname]')
        var passInput = document.querySelector('input[name=yourpass]')
        var passInput2 = document.querySelector('input[name=yourpass2]')
        var emailInput = document.querySelector('input[name=youremail]')

        var divname = document.getElementById('divname')   //获取名字的span 
        var divpassword1 = document.getElementById('divpassword1') //获取密码的span
        var divpassword2 = document.getElementById('divpassword2') //获取确认密码的span
        var divmail = document.getElementById('divmail')

        //给nameInput添加失去焦点事件 验证用户名
        nameInput.onblur = function () {
            var username = nameInput.value
            var regName = /^.{1,12}$/
            if (regName.test(username)) {
                // 验证正确
                divname.classList.remove('tips_false')
                divname.classList.add('tips_true')
                divname.innerText = '用户名格式正确'
            } else {
                divname.classList.add('tips_false')
                divname.classList.remove('tips_true')
                divname.innerText = '用户名的长度1~12个字符'
            }
        }

        //给密码passInput添加失去焦点事件,验证密码
        passInput.onblur = function () {
            var password1 = passInput.value
            var regPassword1 = /^[a-zA-Z0-9]{6,12}$/
            /* var reg = new RegExp(/^(?![^a-zA-Z]+$)(?!\D+$){6,12}/)
            if(reg.test(password1)){
                divpassword1.classList.remove('tips_false')
                divpassword1.classList.add('tips_true')
                divpassword1.innerText = '密码正确'
            }else {
                divpassword1.classList.add('tips_false')
                divpassword1.classList.remove('tips_true')
                divpassword1.innerText = '密码为6~12个字母和数字'
            }
        } */
            if (regPassword1.test(password1)) {
                var regZM = /[a-zA-Z]/
                var regSZ = /\d/
                hasZM = false
                hasSZ = false
                for (var i = 0; i < password1.length; i++) {
                    if (regZM.test(password1[i])) {
                        hasZM = true
                    }
                    if (regSZ.test(password1[i])) {
                        hasSZ = true
                    }
                } if (hasSZ && hasZM) {
                    divpassword1.classList.remove('tips_false')
                    divpassword1.classList.add('tips_true')
                    divpassword1.innerText = '密码正确'
                } else {
                    divpassword1.classList.add('tips_false')
                    divpassword1.classList.remove('tips_true')
                    divpassword1.innerText = '密码字母和数字'
                }

            } else {
                divpassword1.classList.add('tips_false')
                divpassword1.classList.remove('tips_true')
                divpassword1.innerText = '密码为6~12个字母和数字'
            }
        }

        //给确认密码添加失去焦点事件
        passInput2.onblur = function () {
            var password1 = passInput.value
            var password2 = passInput2.value
            var regPassword2 = /^[a-zA-Z0-9]{6,12}$/
            if (regPassword2.test(password2)) {
                var regZM = /[a-zA-Z]/
                var regSZ = /\d/
                hasZM = false
                hasSZ = false
                for (var i = 0; i < password2.length; i++) {
                    if (regZM.test(password2[i])) {
                        hasZM = true
                    }
                    if (regSZ.test(password2[i])) {
                        hasSZ = true
                    }
                }
                if (hasSZ && hasZM) {
                    divpassword2.classList.remove('tips_false')
                    divpassword2.classList.add('tips_true')
                    divpassword2.innerText = '密码正确'
                } else {
                    divpassword2.classList.add('tips_false')
                    divpassword2.classList.remove('tips_true')
                    divpassword2.innerText = '密码为6~12个字母和数字'
                }
            } else {
                divpassword2.classList.add('tips_false')
                divpassword2.classList.remove('tips_true')
                divpassword2.innerText = '密码为6~12个字母和数字'
            }
            if (password2 === password1 && password2 !== '') {
                divpassword2.innerHTML = '密码一致'
                divpassword2.classList.remove('tips_false')
                divpassword2.classList.add('tips_true')
            } else {
                divpassword2.innerHTML = '密码不一致'
                divpassword2.classList.remove('tips_true')
                divpassword2.classList.add('tips_false')
            }
        }

        //给邮箱添加失去焦点事件
        emailInput.onblur = function () {
            var divmailValue = emailInput.value
            var regEmail = /^\w+@[0-9a-zA-Z\.-]+\.([a-z]{2,6})$/
            if (regEmail.test(divmailValue)) {
                divmail.innerHTML = '邮箱正确'
                divmail.classList.remove('tips_false')
                divmail.classList.add('tips_true')
            } else {
                divmail.innerHTML = '邮箱格式不对'
                divmail.classList.remove('tips_true')
                divmail.classList.add('tips_false')
            }
        }

        // 给表单验证的流程
        var form = document.querySelector('form')//获取表单元素
        form.onsubmit = function (e) {//给表单添加提交事件
            var evt = event || e
            evt.preventDefault()

            //验证名字
            var username = nameInput.value
            var regName = /^.{1,12}$/
            if (!regName.test(username)) {
                divname.classList.add('tips_false')
                divname.classList.remove('tips_true')
                divname.innerText = '用户名的长度1~12个字符'
                return
            }
            //验证密码
            var password1 = passInput.value
            var regPassword1 = /^[a-zA-Z0-9]{6,12}$/
            if (!regPassword1.test(password1)) {
                divpassword1.classList.add('tips_false')
                divpassword1.classList.remove('tips_true')
                divpassword1.innerText = '密码为6~12个字母和数字'
                return
            }


            //验证是否是组合(字母和数字)
            var regZM = /[a-zA-Z]/;
            var regSZ = /\d/;
            var hasZM = false;
            var hasSZ = false;
            for (var i = 0; i < password1.length; i++) {
                if (regZM.test(password1[i])) {
                    hasZM = true;
                }
                if (regSZ.test(password1[i])) {
                    hasSZ = true;
                }
            }
            if (!hasSZ || !hasZM) {
                divpassword1.classList.add('tips_false')
                divpassword1.classList.remove('tips_true')
                divpassword1.innerText = '密码是字母和数字'
                return
            }

            //验证确认密码
            var password1 = passInput.value
            var password2 = passInput2.value
            var regPassword2 = /^[a-zA-Z0-9]{6,12}$/
            if (!regPassword2.test(password2)) {
                divpassword2.innerHTML = '密码不一致'
                divpassword2.classList.remove('tips_true')
                divpassword2.classList.add('tips_false')
                return
            }

            var regZM = /[a-zA-Z]/
            var regSZ = /\d/
            hasZM = false
            hasSZ = false
            for (var i = 0; i < password2.length; i++) {
                if (regZM.test(password2[i])) {
                    hasZM = true
                }
                if (regSZ.test(password2[i])) {
                    hasSZ = true
                }
            }
            if (!hasSZ || !hasZM) {
                divpassword2.innerHTML = '密码不一致'
                divpassword2.classList.remove('tips_true')
                divpassword2.classList.add('tips_false')
                return
            }

            //验证邮箱
            var divmailValue = emailInput.value
            var regEmail = /^\w+@[0-9a-zA-Z\.-]+\.([a-z]{2,6})$/
            if (!regEmail.test(divmailValue)) {
                divmail.innerHTML = '邮箱格式不对'
                divmail.classList.remove('tips_true')
                divmail.classList.add('tips_false')
                return
            }
            this.submit()
        }

    </script>
</body>

</html>