源码来自github前端大神:view-source:http://blog.poetries.top/works/demo/jquery/jQuery%E5%AF%86%E7%A0%81%E5%BC%BA%E5%BA%A6%E7%9A%84%E5%88%A4%E6%96%AD.html
html文件
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>jQuery密码强度验证</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
width:100%;
height:100%;
}
.pwdcheck {
margin:50px auto;
width:700px;
height:50px;
}
.pwdcheck p.pwdInput input.pwd{
width:150px;
height:20px;
}
.pwdcheck p.pwdInput label {
font-size:12px;
}
.pwdcheck p.pwdInput label.tips{
color:red;
}
.pwdcheck p.pwdInput label span {
color:#f00;
padding:0 5px;
}
.pwdcheck p.pwdColor {
width:150px;
height:5px;
margin-top:6px;
margin-left:53px;
}
.pwdcheck p.pwdColor span {
display:inline-block;
width:40px;
height:4px;
float:left;
margin-right:10px;
background:#ccc;
}
.pwdcheck p.pwdText {
margin-left:60px;
}
.pwdcheck p.pwdText span{
margin-right:20px;
margin-left:10px;
font-size:12px;
color:#ddd;
}
/* 密码强度改变的样式 */
.pwdcheck p.pwdColor span.co1 {
background:#f00;
}
.pwdcheck p.pwdColor span.co2 {
background:#00ff66;
}
.pwdcheck p.pwdColor span.co3 {
background:#0033cc;
}
</style>
</head>
<body>
<div class="pwdcheck">
<p class="pwdInput">
密码:<input type="password" class="pwd" id="pwd" name="pwd" maxlength="16">
<label><span>*</span>由字母(区分大小写)、数字、符号组成6-16位</label>
</p>
<p class="pwdColor">
<span class="c1"></span>
<span class="c2"></span>
<span class="c3"></span>
</p>
<p class="pwdText">
<span>弱</span>
<span>中</span>
<span>强</span>
</p>
</div>
</body>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" >
$("input#pwd").keyup(function(){
var txt=$(this).val(); //获取密码框内容
var len=txt.length; //获取内容长度
if(txt=='' || len<6){
$("label").show();
$("label").addClass("tips");
}else {
$("label").hide();
}
checkpwd($(this));
});
//全部都是灰色的
function primary(){
$("p.pwdColor span").removeClass("co1,co2,co3");
}
//密码强度为弱的时候
function weak(){
$("span.c1").addClass("co1");
$("span.c2").removeClass("co2");
$("span.c3").removeClass("co3");
}
//密码强度为中等的时候
function middle(){
$("span.c1").addClass("co1");
$("span.c2").addClass("co2");
$("span.c3").removeClass("co3");
}
//密码强度为强的时候
function strong(){
$("span.c1").addClass("co1");
$("span.c2").addClass("co2");
$("span.c3").addClass("co3");
}
/**判断密码的强弱规则
1、如果是单一的字符(全是数字 或 字母 )长度小于 6 弱
2、如果是两两混合 (数字+字母(大小) 或 数字+特殊字符 或 特殊字符+字母 长度大于 8 中)
3、如果是三者组合 (数字 +大写字母+小写字母 或 数字+字母+特殊字符 长度>8 强))
**/
//密码强弱判断函数
function checkpwd(obj){
var txt = $.trim(obj.val());//输入框内容 trim处理两端空格
var len = txt.length;
var num = /\d/.test(txt);//匹配数字
var small = /[a-z]/.test(txt);//匹配小写字母
var big = /[A-Z]/.test(txt);//匹配大写字母
var corps = /\W/.test(txt);//特殊符号
var val = num + small+big+corps; //四个组合
if(len<1){
primary();
}else if(len<6){
weak();
}else if(len>6 && len<=8){
if(val==1){
weak();
}else if(val==2){
middle();
}
}else if(len>8){
if(val==1){
weak();
}else if(val==2){
middle();
}else if(val==3){
strong();
}
return false;
}
}
</script>
</html>