用正则进行表单验证（含密码强弱展示）

阳光穿透心脏的1/2处 2023-02-16 12:10 8阅读 0赞

写在前面：刚回顾完正则表达式[正则基础][Link 1]，就来对表单下手啦。本文用正则表达式进行一些表单的基础验证，同时验证密码时展示密码强弱。希望跟大家多多交流。

### 1. 效果展示 ###

![在这里插入图片描述][20200609205007277.gif]

### 2. demo分析 ###

#### 2.1 功能： ####

1.  如果用户名输入合法, 则后面提示信息为: 验证通过,并且颜色为绿色
2.  如果用户名输入不合法, 则后面提示信息为: 验证失败, 并且颜色为红色
3.  当密码状态发生改变时，提示用户密码安全程度

#### 2.2 思路: ####

1.  定义验证不同板块的不同正则规范
2.  因为验证思路一致，故把验证机制封装为函数
3.  当表单中按键弹起就开始验证.
4.  如果符合正则规范, 则让后面的span标签添加 success类.
5.  如果不符合正则规范, 则让后面的span标签添加 error类.
6.  密码强弱程度单独判断
7.  最后确认两次密码是否一致

### 开始撸 ###

此处html、css部分省略，怕你们嫌弃，哈哈哈。  
直接上js代码好吧，毕竟注释超级超级超级清晰

//等dom渲染完毕
 window.addEventListener('load', function() { 
 // 获取元素
 var tel = document.querySelector('#tel');
 var qq = document.querySelector('#qq');
 var name = document.querySelector('#name');
 var msg = document.querySelector('#msg');
 var pwd = document.querySelector('#pwd');
 var surepwd = document.querySelector('#surepwd');
 var safe = document.querySelector('.safe');
 
 // 定义正则
 var regTel = /^1[3|4|5|7|8][0-9]{9}$/;
 var regQq = /^[1-9][0-9]{4,}$/;
 var regName = /^[\u4e00-\u9fa5]{3,6}$/;
 var regMsg = /^\d{6}$/;
 var regPwd = /^[a-zA-Z0-9\W]{6,16}$/;
 
 // 判断密码强度正则（纯字母、数字、字符）
 var regNum = /^\d+$/;
 var regLetter = /^[a-zA-Z]+$/;
 var regSpe = /^\W+$/;
 
 // 包含（纯字母、数字、字符）
 var _regNum = /\d+/;
 var _regLetter = /[a-zA-Z]+/;
 var _regSpe = /\W+/;
 
 // 调用验证函数
 getReg(tel, regTel);
 getReg(qq, regQq);
 getReg(name, regName);
 getReg(msg, regMsg);
 getReg(pwd, regPwd);
 
 // 封装验证函数
 function getReg(obj, myreg) { 
 obj.addEventListener('keyup', function() { 
 // 如果文本框内容为空，对验证提示进行隐藏。否则显示
 if (obj.value.trim() == 0) { 
 this.nextElementSibling.style.display = 'none';
 } else { 
 this.nextElementSibling.style.display = 'inline-block';
 // 验证通过改变兄的节点样式（正确），否则错误
 if (myreg.test(this.value)) { 
 this.nextElementSibling.className = 'success';
 this.nextElementSibling.innerHTML = ' 验证通过';
 } else { 
 this.nextElementSibling.className = 'error';
 this.nextElementSibling.innerHTML = ' 验证失败'
 }
 }
 
 })
 };
 
 
 // 密码强弱判断
 pwd.addEventListener('keyup', function() { 
 var mypwd = this.value;
 // 循环去除上一次判断的样式
 for (var i = 0; i < safe.children.length; i++) { 
 safe.children[i].className = 'zhong';
 };
 // 判断密码长度是否合格
 if (mypwd.length < 6) { 
 return
 }
 // 如果满足纯数字，纯字母，纯字符任意一种。密码强度为弱（给弱添加样式）
 if (regNum.test(mypwd) || regLetter.test(mypwd) || regSpe.test(mypwd)) { 
 safe.children[0].className = 'high';
 // 如果满足数字、字母、下划线组合。密码强度为强（给强添加样式）
 } else if (_regNum.test(mypwd) && _regLetter.test(mypwd) && _regSpe.test(mypwd)) { 
 safe.children[2].className = 'high';
 // 否则为中（为其添加样式）
 } else { 
 safe.children[1].className = 'high';
 }
 })
 
 // 验证两次密码是否一致（与验证函数相似）
 surepwd.addEventListener('keyup', function() { 
 if (this.value == pwd.value) { 
 this.nextElementSibling.className = 'success';
 this.nextElementSibling.innerHTML = ' 密码一致';
 } else { 
 this.nextElementSibling.className = 'error';
 this.nextElementSibling.innerHTML = ' 两次密码有偏差'
 }
 });
 })

[Link 1]: https://blog.csdn.net/cwq521o/article/details/106649725
[20200609205007277.gif]: https://img-blog.csdnimg.cn/20200609205007277.gif