JS中的表单验证。

最新推荐文章于 2025-06-11 21:14:22 发布

原创最新推荐文章于 2025-06-11 21:14:22 发布 · 3k 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

这篇博客探讨了如何使用HTML、CSS和JavaScript实现表单验证，避免页面刷新导致的JS执行问题。通过邮箱、密码和重复密码的验证函数，确保用户输入的有效性和安全性。同时，利用CSS调整样式，提高用户交互体验。在验证失败时，提供明确的提示信息，引导用户正确填写。

HTML部分：

 <form action="javascript:void(0)" id="login">
        <p>账号:&emsp;&emsp;<input type="text" id="email">
            <span>提示</span>
        </p>
        <p>密码:&emsp;&emsp;<input type="text" id="pwd">
            <span>提示</span>
        </p>
        <p>重复密码:<input type="text" id="rpwd">
            <span>提示</span>
        </p>
        <button id="login-btn">登录</button>
    </form>

CSS部分：

<style>
     #login span {
        display: none;
        font-size: 14px;
        font-weight: bold;
     
</style>

dom选择器获取ID

var email = document.getElementById('email');
var pwd = document.getElementById('pwd');
var rpwd = document.getElementById('rpwd');
var btn = document.getElementById('login-btn')

// 表单验证都是在输入框失去焦点的时候进行验证

// 登录验证 :

// - 当我们所有的元素都通过验证了我们就可以进行登录操作了;

// - 否则哪里没通过验证就让哪里有焦点，重新输入;

// - 当一个元素通过验证，我们给元素一个标记;

// - 在提交之前判定所有的元素是否都有标记，如果没有就终止提交;

添加事件监听：

 email.addEventListener('blur', validateEamil);
 pwd.addEventListener('blur', validatePwd);
 rpwd.addEventListener('blur', validateRpwd);
 btn.addEventListener('click', isLogin)

邮箱验证的函数：

 //邮箱帐号验证函数
 function validateEamil() {
    //获取输入框的文本内容
    var text = email.value;
    //找到tip提示元素
    var tip = email.nextElementSibling;
    //编写正则进行匹配
    var reg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;
    if (reg.test(text)) {
         //如果正确
         // 边框标注绿色
         email.style.borderColor = 'green';
         //隐藏tip
         tip.style.display = 'none';
         //验证标志位
         email.validate = true;
     } else {
        // 如果错误
        // 边框标注红色
        email.style.borderColor = 'red';
        // 提示文本
        tip.innerHTML = '请输入正确的邮箱地址';
        //显示tip
        tip.style.display = 'block';
        email.validate = false;
    }

}

// 密码验证 :

// - 1. 位数验证 ;

// - 2. 密码强度验证 ;

// 这种存在多个规则验证的核心在于一个验证没有通过的情况下不继续执行下一个验证;

// - 验证失败就使用 return 跳出程序;

function validatePwd() {
    var text = pwd.value;
    // 找到tip提示元素
    var tip = pwd.nextElementSibling;
    // 查看位数是否6-20位
    var reg_count = /^.{6,20}$/
    if (!reg_count.test(text)) {
       // 提示
       tip.innerHTML = "密码的长度应该是 6~20位之间，请输入正确位数的密码";
        //显示tip
       tip.style.display = 'block';
       pwd.style.borderColor = "red";
       tip.style.color = 'red';
       pwd.validate = false;
       return false;
        } else {
                tip.style.display = 'none';
        }
    // 继续验证 : 
            // - 如何判定密码强度 : 
            //  - 低 : 只有 数字 | 字母 | 字符串其中之一组成密码
            //  - 中 : 有 数字 | 字母 | 字符串其中之二组成密码
            //  - 高 : 有 数字 | 字母 | 字符串三者功能组成的密码
     var strength = 0;
        if (/\d/.test(text)) {
            strength++;
        }
        if (/[a-zA-Z]/.test(text)) {
            strength++;
        }
        if (/[\!@#\$%\^&\*\(\)_\+]/.test(text)) {
            strength++;
        }
// 根据 strength 数值判定密码强度; 

            switch (strength) {
                case 1:
                    // pwd.focus();
                    tip.innerHTML = "密码强度较低，建议使用数字字母特殊符号组合密码";
                    tip.style.color = 'red';
                    tip.style.display = 'block';
                    pwd.validate = false;
                    break;
                case 2:
                    tip.innerHTML = "密码强度中等，建议使用更高强度的密码";
                    tip.style.color = "orange";
                    tip.style.display = 'block';
                    pwd.validate = true;
                    break;
                case 3:
                    tip.style.display = "none";
                    pwd.style.borderColor = "green";
                    tip.style.display = 'block';
                    pwd.validate = true;
                    break;
            }
       
}

重复密码验证函数：

function validateRpwd() {
     var tip = rpwd.nextElementSibling;
    
     if (pwd.value === rpwd.value) {
          rpwd.style.borderColor = 'green';
          tip.style.display = "none";
          rpwd.validate = true;
       } else {
          tip.style.display = "block";
          tip.innerHTML = '请再次输入相同的密码'
          tip.style.color = 'red';
          rpwd.validate = false;
       }
  }

登录验证

function isLogin() {
            if (!email.validate) {
                email.focus();
                return;
            } else if (!pwd.validate) {
                pwd.focus();
                return;
            } else if (!rpwd.validate) {
                rpwd.focus();
                return;
            } else {
                alert('yes');
            }
        }