一个简单的判断密码强度的小例子。
密码强度等级设定:
弱：纯字母或者纯数字组成
中：数字与字母混合组成
高：数字，字母，符号三者混合组成
这部分的js代码：
$(‘#pass‘).keyup(function(e) {
// 最强的正则表达式：8位 大小写字母 数字 符号
var strongRegex = new RegExp("^(?=.{8,})(?=.*[a-zA-Z])(?=.*[0-9])(?=.*\\W).*$", "g");
// 中等强度 ： 7位 大小写字母或者大写字母数字混合或者小写字母数字混合
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
// 弱密码强度 ： 6位 纯数字
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$(‘#passstrength‘).html(‘密码长度至少6位‘);
} else if (strongRegex.test($(this).val())) {
$(‘#passstrength‘).html(‘密码强度:强!‘);
strong();
} else if (mediumRegex.test($(this).val())) {
$(‘#passstrength‘).html(‘密码强度:中等!‘);
medium();
} else {
$(‘#passstrength‘).html(‘密码强度:弱!‘);
week();
}
return true;
});
然后对密码的不同强度分别设置css样式，结果：
下面附上全部html内容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>password strangth validate</title>
<script src="jquery-1.8.3.min.js"></script>
</head>
<style>
.form{
width: 500px;
height: 200px;
margin: 100px auto;
border: 1px solid #ddd;
border-bottom: 3px solid #ddd;
border-right: 2px solid #ddd;
border-radius: 10px;
background-color: rgba(0,0,0,.1);
text-align: center;
}
.form input{
margin-top: 70px;
height: 30px;
width: 200px;
border: none;
border-radius: 5px;
border:1px solid #ddd;
text-indent: 10px;
color: #666;
}
.form .grade3{
width: 195px;
height: 10px;
margin: 5px auto;
position: relative;
}
.form .grade3 .grade{
width: 60px;
height: 100%;
border: 1px solid #fff;
margin-right: 3px;
float: left;
}
.form .grade3 .yellow{
background-color: #E38D33;
}
.form .grade3 .green{
background-color: #6DBD2E;
}
.form .grade3 .red{
background-color: #EE5E59;
}
#passstrength{
color: #666;
position: absolute;
top: 0px;
left:0;
font-size: 10px;
line-height: 20px;
font-family: ‘微软雅黑‘;
}
</style>
<body>
<div class="form">
<input type="password" name="pass" id="pass" />
<div class="grade3">
<div class="grade g1 "></div>
<div class="grade g2 "></div>
<div class="grade g3 "></div>
<p id="passstrength"></p>
</div>
</div>
</body>
<script type="text/javascript">
$(‘#pass‘).keyup(function(e) {
// 最强的正则表达式：8位 大小写字母 数字 符号
var strongRegex = new RegExp("^(?=.{8,})(?=.*[a-zA-Z])(?=.*[0-9])(?=.*\\W).*$", "g");
// 中等强度 ： 7位 大小写字母或者大写字母数字混合或者小写字母数字混合
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
// 弱密码强度 ： 6位 纯数字
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$(‘#passstrength‘).html(‘密码长度至少6位‘);
} else if (strongRegex.test($(this).val())) {
$(‘#passstrength‘).html(‘密码强度:强!‘);
strong();
} else if (mediumRegex.test($(this).val())) {
$(‘#passstrength‘).html(‘密码强度:中等!‘);
medium();
} else {
$(‘#passstrength‘).html(‘密码强度:弱!‘);
week();
}
return true;
});
function week (argument) {
$(‘.g1,.g2‘).removeClass(‘yellow‘);
$(‘.g1,.g2,.g3‘).removeClass(‘green‘);
$(‘.g1‘).addClass(‘red‘);
}
function medium (argument) {
$(‘.g1‘).removeClass(‘red‘);
$(‘.g1,.g2,.g3‘).removeClass(‘green‘);
$(‘.g1,.g2‘).addClass(‘yellow‘);
}
function strong (argument) {
$(‘.g1‘).removeClass(‘red‘);
$(‘.g1,.g2‘).removeClass(‘yellow‘);
$(‘.g1,.g2,.g3‘).addClass(‘green‘);
}
</script>
</html>
注：jquery库自备。
时间： 2024-08-08 01:17:44