验证“密码强度”的例子很常见,我们注册新的账号的时候往往设置密码,此时就遇到验证密码强度的问题了。“密码强度”也就是密码难易程度的意思。
<强>原理:
1,如果输入的密码为单纯的数字或者字母:提示"
2,如果是数字和字母混合的:提示“<强> 强”,
3,如果数字,字母,特殊字符都有:提示"
下面是一种“密码强度”的验证方法,觉得很有意思。
HTML和CSS代码:
& lt; !DOCTYPE HTML>
& lt; html比;& lt; !——lang=癳n”——比;
& lt; head>
& lt;元charset=" utf - 8 "/比;
& lt; title>密码强度& lt;/title>
& lt;风格类型=" text/css "比;
# pwdStrength {
高度:30 px;
宽度:180 px;
边界:1 px固体# ccc;
填充:2 px;
}
.strengthLv1 {
背景:红色;
高度:30 px;
宽度:60 px;
}
.strengthLv2 {
背景:橙色;
高度:30 px;
宽度:120 px;
}
.strengthLv3 {
背景:绿色;
高度:30 px;
宽度:180 px;
}
# pwd {
高度:30 px;
字体大小:20 px;
}
强大的{
margin-left: 90 px;
}
# pwd1 {
颜色:红色;
margin-top: 5 px;
margin-bottom: 5 px;
}
& lt;/style>
& lt;/head>
& lt; body>
& lt;输入类型="密码" name=" pwd " id=" pwd最大长度=" 16 "/比;
& lt; div类=皃ass-wrap”比;
& lt; !——& lt; em>密码强度:& lt;/em>——比;
& lt; p id=" pwd1 " name=" pwd祝辞密码强度:& lt;/p>
& lt; div id=" pwdStrength "祝辞& lt;/div>
& lt;/div>
& lt;/body>
& lt;/html>
javascript代码:
& lt;脚本type=" text/javascript祝辞
函数PasswordStrength (passwordID strengthID) {
this.init (strengthID);
var _this=;
. getelementbyid (passwordID)。onkeyup=function () {//onkeyup事件,在键盘按键被松开时发生,进行判断
_this.checkStrength (this.value);
}
};
PasswordStrength.prototype。init=函数(strengthID) {
var id=. getelementbyid (strengthID);
var div=document.createElement (div);
var=document.createElement强(“强”);
这一点。oStrength=id.appendChild (div);
这一点。oStrengthTxt=id.parentNode.appendChild(强);
};
PasswordStrength.prototype。checkStrength=函数(val){//验证密码强度的函数
var aLvTxt=[”、“低”、“中”、“高”);//定义提示消息的种类
var lv=0;//初始化提示消息为空
如果(val.match (/[a - z]/g)) {lv + +;}//验证是否包含字母
如果(val.match (/[0 - 9]/g)) {lv + +;}//验证是否包含数字
如果(val.match (/(。[^ a-z0-9])/g)) {lv + +;}//验证是否包含字母,数字,字符
如果(val.length & lt;6){lv=0;}//如果密码长度小于6位,提示消息为空
如果(lv比;3){lv=3;}
this.oStrength。className=' strengthLv ' + lv;
this.oStrengthTxt。innerHTML=aLvTxt (lv);
};
新PasswordStrength (“pwd”、“pwdStrength”);
& lt;/script>
效果图:
小结:
1。利用onkeyup事件(在键盘按键被松开时发生)进行三种判断,简单方便。
2. 正则表达式的功能真的很强大。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
