JS判断密码强度
2018-01-26 11:28
453 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.strength{background-color:#E0E0E0;margin-left:5px;padding:0 20px;text-align: center;line-height: 20px;font-size: 12px;}
</style>
</head>
<body>
<input id="idpassword" type="password" name="" maxlength="20" />
<br><br>
<span class="strength">危险</span>
<span class="strength">一般</span>
<span class="strength">安全</span>
<!-- jquery官方类库 -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- 密码强度 -->
<script type="text/javascript">
$(function() {
var aStr = ["危险", "一般", "安全"];
function checkStrong(val) {
var modes = 0;
if (val.length < 6) return 0;
if (/\d/.test(val)) modes++; //数字
if (/[a-z]/.test(val)) modes++; //小写
if (/[A-Z]/.test(val)) modes++; //大写
if (val.length > 12) return 3;
return modes;
};
$("#idpassword").keyup(function() {
var val = $(this).val();
//$("#ePassword").text(val.length);
var num = checkStrong(val);
switch (num) {
case 0:
break;
case 1:
$(".strength").css('background', '').eq(num - 1).css('background', 'red').text(aStr[num - 1]);
break;
case 2:
$(".strength").css('background', '').eq(num - 1).css('background', 'yellow').text(aStr[num - 1]);
break;
case 3:
$(".strength").css('background', '').eq(num - 1).css('background', 'green').text(aStr[num - 1]);
break;
default:
break;
}
});
});
</script>
</body>
</html>参考:http://blog.csdn.net/libin_1/article/details/51577472
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 