用正则验证登录密码
思路:1.先验证内容是否合法
2.在合法前提下,处理长度问题
3.在满足合法;长度满足前提下,在处理强度问题
div 部分:
<div class="box">
<input type="password"><span></span>
<div>
<button id="vbBtn">显示密码</button>
<button id="hBtn">隐藏密码</button>
</div>
</div>
js部分:
var ipt = document.getElementsByTagName("input")[0];
var p = document.getElementsByTagName("p")[0];
var span = document.getElementsByTagName("span")[0];
var vbBtn = document.getElementById("vbBtn");
var hBtn = document.getElementById("hBtn");
ipt.onfocus = function () {
span.innerHTML = "<span>请输入6-12密码</span>";
ipt.oninput = function () {
var value = ipt.value;
if (value.length == 0) {
span.innerHTML = "密码不能为空";
span.style.color = "red";
} else if (value.length < 6) {
span.innerHTML = "密码不能小于6";
span.style.color = "red";
} else if (value.length > 12) {
span.innerHTML = "密码不能大于12";
span.style.color = "red";
} else {
var patt1 = /[^\w]/;
var res = patt1.test(value);
if (!res) {
var reg1 = /^\d*$/g; //纯数字
var reg2 = /^[a-zA-Z]*$/g; //纯字母
var reg3 = /^\_*$/g; //纯下划线
var reg4 = /^[a-zA-Z0-9]*$/g;
var reg5 = /^[a-zA-Z\_]*$/g;
var reg6 = /^[0-9\_]*$/g;
var reg7 = /^\w*$/g;
if (value.match(reg1) || value.match(reg2) || value.match(reg3)) {
span.innerHTML = "密码强度弱";
span.style.color = "red";
} else if (value.match(reg4) || value.match(reg5) || value.match(reg6)) {
span.innerHTML = "密码强度中";
span.style.color = "orange";
} else if (value.match(reg7)) {
span.innerHTML = "密码强度高";
span.style.color = "green";
}
} else {
span.innerHTML = "输入不合法";
span.style.color = "red";
}
}
}
}
// 点击显示密码
vbBtn.onclick = function () {
ipt.type = "text";
}
// 点击隐藏密码
hBtn.onclick = function () {
ipt.type = "password";
}