js实现密码强度校验

今天呢, 我们写一个简单的需求
在很多网站中, 修改密码都会看到的一个校验提示就是密码校验, 那么密码校验是怎么来实现呢?
我们可以用到正则来匹配密码的复杂度, 从而实现对复杂度的一个评级, 我们用评级的分数来展示对应范围内的密码是否强弱即可
那我们写一个输入框用于我们的密码输入

现在, 我们来编写密码强度评分函数
首先, 我们创建一个评分变量, 当匹配到不同的字段或者符号时, 我们让其加1

我上面写了一个长度为6让其加1, 密码的长度一般都是大于6或者8位的
我们监听一下输入框的input事件, 看看效果

效果确实实现了, 但是我们还没有使用正则来匹配密码复杂度呢
我们先来考虑一下密码有哪些部分组成, 一般是英文大小写, 数字和特殊符号等
那么我们分别用正则来匹配一下, 匹配到我们就将评分变量加1即可
if (/\d/.test(value)) ratNum++;
if (/[a-z]/.test(value)) ratNum++;
if (/[A-Z]/.test(value)) ratNum++;
if (/\W/.test(value)) ratNum++;
我们分别对数字英文大小写和特殊符号做了匹配
可以拿到最终的评分等级, 我们监听输入框的输入事件, 并调用该函数, 拿到评分等级进行展示
inp.addEventListener(“input”, () => {
const rat = handlePasswordRating();
if (rat >= 4) {
strText.innerText = “强”;
} else if (2 < rat && rat < 4) {
strText.innerText = “中”;
} else {
strText.innerText = “弱”;
}
console.log(rat);
});
我们看下效果

这样, 我们的小需求就完成了
该需求主要是一种密码提示的优化, 比如当用户评分等级不通过, 我们的输入校验虽然通过了, 我们依然可以进行判断, 提示用户, 密码过于简单等等
今天我们就讲解到这
我们下期见

她的码农
酷爱前端开发，酷爱写作，向全栈工程师奋进！
326篇原创内容
公众号
JavaScript
40
JavaScript · 目录
上一篇
前端实现商品放大镜效果