最近打算在用户改密表单 或 创建账号表单中，对输入的密码进行强度检测功能。在网上找了两篇比较实用的资源，本人对这些资源进行了整合。下面给出了几种效果图：
说明，这里的强中弱三种效果是使用背景图片实现的
说明，这个案例中是使用纯CSS效果实现
效果3：本人整理上面资源后的效果（使用纯CSS实现）
说明：为什么要整理？因为效果1中的是背景图片实现，虽然资源资源以及上传到CSDN网站，本人没有积分下载不了。于是本人想了想是否可以整合一下，将效果1中的表单保留，强中弱三种效果参考效果二中的源码，最后将两个案例中的代码整合了，使用纯CSS去实现它了。
整理后源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/jquery.metadata.js"></script>
<script src="js/jquery.validate.js"></script>
<script src="js/jquery.validate.cn.js"></script>
<script src="js/jquery.validate.methods.js"></script>
<style>
.pass-txt{float:left;width:62px;margin-left:5px;text-align:center;color:#b0adad;font-size:12px;}
.pass-default{float:left;background:#d6d3d3;width:62px;height:15px;border-radius: 15px;;margin-top:5px;_margin-top:0px;margin-left:5px;_height:2px;font-size:0px;}
.pass-weak{background: #ff3300;}
.pass-medium{background: #099;}
.pass-strong{background: #060;}
</style>
<script>
$.validator.setDefaults({
submitHandler: function() {
alert("提交事件!");
}
});
$().ready(function() {
$('#password').keyup(function () {
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g");
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g");
var enoughRegex = new RegExp("(?=.{6,}).*", "g");
if (false == enoughRegex.test($(this).val())) {
$('#pwdLevel_3').removeClass('pass-strong');
$('#pwdLevel_2').removeClass('pass-medium');
$('#pwdLevel_1').removeClass('pass-weak');
//密码小于六位的时候，密码强度图片都为灰色
}
else if (strongRegex.test($(this).val())) {
$('#pwdLevel_1').addClass('pass-weak');
$('#pwdLevel_2').addClass('pass-medium');
$('#pwdLevel_3').addClass('pass-strong');
//密码为八位及以上并且字母数字特殊字符三项都包括,强度最强
}
else if (mediumRegex.test($(this).val())) {
$('#pwdLevel_1').addClass('pass-weak');
$('#pwdLevel_2').addClass('pass-medium');
$('#pwdLevel_3').removeClass('pass-strong');
//密码为七位及以上并且字母、数字、特殊字符三项中有两项，强度是中等
}
else {
$('#pwdLevel_1').addClass('pass-weak');
$('#pwdLevel_2').removeClass('pass-medium');
$('#pwdLevel_3').removeClass('pass-strong');
//如果密码为6为及以下，就算字母、数字、特殊字符三项都包括，强度也是弱的
}
//return true;
});
// 自定义校验规则
/**
$.validator.addMethod("passwordCheck",function(value, element){
var returnVal = false;
var chrnum = /^[0-9]*$/;
//return this.optional(element) || (chrnum.test(value));
},"必须填入数字");
*/
// 在键盘按下并释放及提交后验证提交表单
$("#signupForm").validate({
rules: {
username: {
required: true,
minlength: 2
},
password: {
required: true,
passwordCheck:true,
minlength: 5
},
confirm_password: {
required: true,
minlength: 5,
equalTo: "#password"
}
},
messages: {
username: {
required: "请输入用户名",
minlength: "用户名必需由两个字母组成"
},
password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母"
},
confirm_password: {
required: "请输入密码",
minlength: "密码长度不能小于 5 个字母",
equalTo: "两次密码输入不一致"
}
}
});
});
</script>
<style>
.error{
color:red;
}
</style>
</head>
<body>
<form class="cmxform" id="signupForm" method="get" action="">
<fieldset>
<legend>表单</legend>
<p>
<label for="username">用户名</label>
<input id="username" name="username" type="text">
</p>
<p>
<label for="password">密码</label>
<input id="password" name="password" type="password">
</p>
<p>
<div class="pass-default" id='pwdLevel_1'> </div>
<div class="pass-default" id='pwdLevel_2'> </div>
<div class="pass-default" id='pwdLevel_3'> </div>
<br />
<div class="pass-txt"> 弱</div>
<div class="pass-txt"> 中</div>
<div class="pass-txt"> 强</div>
</p>
<p>
<label for="confirm_password">验证密码</label>
<input id="confirm_password" name="confirm_password" type="password">
</p>
<p>
<input class="submit" type="submit" value="提交">
</p>
</fieldset>
</form>
</body>
</html>
jquery validation 自定义验证密码复杂度
jQuery.validator.addMethod("isPassword", function(value, element) {
var reg = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^a-zA-Z0-9]).{6,20}$/;
return reg.test(value);
}, "密码中必须包含含数字、字母、特殊符号");
调用：
password: {
minlength: 6,
isPassword: true
}说明：校验规则（密码复杂度）可以根据源码中的正则表达式校验规则进行调整。
补充：之前工作中，密码强度校验
校验规则： 密码必须是 大小字母、小写字母、特殊字符、数字这 4 种种的至少三种组合。
java正则表达式
^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])|(?=.*[A-Z])(?=.*[a-z])(?=.*[^A-Za-z0-9])|(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])|(?=.*[a-z])(?=.*[0-9])(?=.*[^A-Za-z0-9])).+public boolean isRightPass(String password){
//新密码不符合系统要求：必须是数字、大写字母、小写字母、符号这4种中的至少3种组合！
String regex ="^(?:(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])|(?=.*[A-Z])(?=.*[a-z])(?=.*[^A-Za-z0-9])|(?=.*[A-Z])(?=.*[0-9])(?=.*[^A-Za-z0-9])|(?=.*[a-z])(?=.*[0-9])(?=.*[^A-Za-z0-9])).+";
Pattern pa =Pattern.compile(regex);
Matcher m = pa.matcher(password);
boolean b = m.find();
return b;
}本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
