js实现表单规则校验

最新推荐文章于 2024-09-16 23:39:36 发布

Y_U_U

最新推荐文章于 2024-09-16 23:39:36 发布

阅读量93

点赞数

文章标签： html javascript 前端 Powered by 金山文档

本文链接：https://blog.csdn.net/Y_U_U/article/details/128922846

版权

本文介绍了如何使用JavaScript来实现表单的数据校验，包括在输入不符合规则时如何展示错误样式，确保前端数据的有效性。

摘要由CSDN通过智能技术生成

<div class="data">
        <form action="#">
            <div class="form-group">
                <p>账号</p>
                <input type="text" class="username" placeholder="账号为邮箱" />
                <p class="extra"></p>
            </div>
            <div class="form-group icon">
                <p>密码</p>
                <div class="icon">
                    <input type="password" class="pwd" placeholder="密码长度不小于6" placeholder-style="color: #333;" />
                    <img src="./切图/关闭显示.png" alt="" class="eye">
                    <p class="extrapwd"></p>
                </div>
            </div>
            <div class="form_group">
                <span>
                    <input type="checkbox" class="radio" id="remeberPwd">
                    <span>记住密码</span>
                </span>
                <span></span>
                <span><a href="#">忘记密码</a></span>
            </div>
            <button class="btn" id="loginBtn">登录</button>
        </form>
    </div>

不符合校验规则时的样式：

.extra {
            font-size: 13px;
            color: #e74c3c;
        }

        .extrapwd {
            font-size: 13px;
            color: #e74c3c;
        }

let showPaw = false;
        let ruleForm = {};
        let remeberPwdFlag = false
        let email = document.querySelector('.username')
        let pword = document.querySelector('.pwd')
        let btn = document.querySelector('#loginBtn');

        // 邮箱验证
        email.addEventListener('blur', function () {
            emailVal = email.value;
            var pattern = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
            if (!pattern.test(emailVal)) {
                email.style.borderColor = '#e74c3c';
                document.querySelector('.extra').innerHTML = '<p style="color: red">-请输入正确的账号-</p>';
            } else {
                email.style.borderColor = '#2ecc71';
                document.querySelector('.extra').innerHTML = '';
                document.querySelector('.extra').className = 'change';
            }
        })
        email.addEventListener('keyup', function (e) {
            if (e.keyCode == 13) {
                email.blur();
                pword.focus();
            }
        })

        // 密码校验
        pword.addEventListener('blur', function () {
            pwdVal = pword.value;
            if (pwdVal.length < 6) {
                pword.style.borderColor = '#e74c3c';
                document.querySelector('.extrapwd').innerHTML = '<p style="color: red">-密码必须大于6位-</p>';
            } else {
                pword.style.borderColor = '#2ecc71';
                document.querySelector('.extrapwd').innerHTML = '';
                document.querySelector('.extrapwd').className = 'change';
                
            }
        })
        pword.addEventListener('keyup', function (e) {
            if (e.keyCode == 13) {
                pword.blur();
            }
        })

        // 点击登录校验邮箱及密码
        btn.addEventListener('click', function () {
            email.blur();
            pword.blur();
        })

页面展示：