密码:数字,字母,特殊符号
只有数字的时候,或者只有字母的时候,或者特殊符号的时候-----低---1
两两组合:数字和字母,数字和特殊符号,字母和特殊符号-----中----2
三个都有:数字和字母和特殊符号 ----- 高----3
先获取一下
var pwd = document.getElementById("pwd");
var strengthLevel = document.getElementById("strengthLevel");
在注册键盘抬起事件
pwd.onkeyup = function(){
// console.log(this.value);
If判断
// 1.如果密码长度小于6位数
// if(this.value.length>=6){
// if(lvl==1){
// strengthLevel.className = "strengthLv1";
// }else if(lvl==2){
// strengthLevel.className = "strengthLv2";
// }else if(lvl==3){
// strengthLevel.className = "strengthLv3";
// }
// }else{
// strengthLevel.className = "strengthLv0";
// }
如果密码长度小于6位数,就把选定的那个标签更改一下,三个标签不同的颜色
否则都是为原本的标签
简单写法:
// 2.如果密码长度小于6位数
// if(this.value.length>=6){
// strengthLevel.className = "strengthLv"+lvl;
// }else{
// strengthLevel.className = "strengthLv0";
// }
如果小于6
直接让那两个加起来
否则都是不变
究极简写
trengthLevel.className ="strengthLv"+ (this.value.length>=6 ? lvl : 0);
三元运算
最后的判断
// 给你密码,给我返回密码强度
function getLvl(password){
// 初始的密码强度 0
var lvl = 0;
// 如果有数字 等级就+1
if(/\d/.test(password)){
lvl++;
}
// 如果有字母 等级也+1
if(/[a-zA-Z]/.test(password)){
lvl++;
}
// 特殊符号
if(/[^0-9a-zA-Z_]/.test(password)){
lvl++;
}
return lvl;
成品
小于6位数强度为0
只有一种强度为一级
两种强度为2级
三种强度为3级