<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
#passStrength {
height: 6px;
width: 120px;
border: 1px solid #ccc;
padding: 2px;
}
.strengthLv1 {
background: red;
height: 6px;
width: 40px;
}
.strengthLv2 {
background: orange;
height: 6px;
width: 80px;
}
.strengthLv3 {
background: green;
height: 6px;
width: 120px;
}
</style>
</head>
<body>
<input type="text" name="pass" id="pass" value="womenlaiiztong" maxlength="16" />
<div class="pass-wrap">
密码强度:
<div id="passStrength"></div>
</div>
<script type="text/javascript">
function PasswordStrength(passwordID, strengthID) {
let password = document.getElementById(passwordID);
let id = document.getElementById(strengthID);
let div = document.createElement('div');
let strong = document.createElement('strong');
let oStrength = id.appendChild(div);
let oStrengthTxt = id.parentNode.appendChild(strong);
password.onkeyup = function () {
let val = document.getElementById(passwordID).value
var aLvTxt = ['', '低', '中', '高'];
var lv = 0;
if (val.match(/[a-z]/g)) {
lv++;
}
if (val.match(/[0-9]/g)) {
lv++;
}
if (val.match(/(.[^a-z0-9])/g)) {
lv++;
}
if (val.length < 6) {
lv = 0;
}
if (lv > 3) {
lv = 3;
}
oStrength.className = 'strengthLv' + lv;
oStrengthTxt.innerHTML = aLvTxt[lv];
};
};
window.onload = function () {
PasswordStrength('pass', 'passStrength')
}
</script>
</body>
</html>
最好使用面向对象的写法，但对于这个不熟，有好的建议可以留言