JS正则表达式应用——基于Jquery的验证密码强度特效

当用户登录网站时，一般要求用户提供登录该网站的用户名和密码。从某种意义上说，密码的复杂程度越高，用户的信息安全性越高。因此，很多网站在注册用户信息或修改用户密码时，往往会提供一个密码强度的说明，从而提醒用户使用高强度的密码。目前来说，密码字符可以分为4种：数字、大写字母、小写字母和特殊字符（即除数字、字母之外的字符）。用户密码包含上述4种字符种的种类越多，密码的安全性越高。用户密码只含其中一种的安全性是最低的，如123456、abcdef、YTGHRF、%$#@_?等。其次是含上述2种或3种字符的密码，如123abc、123!@#、123OUI、TYrfAe、ERV#_!、asd?*@、56gb#$、ghBN98、Ycv3?s等。密码强度最好的是：包含上述4种字符，如13QdZ#等。
今天得空分享一下自己写的验证密码强度的特效demo，代码质量还有待优化，还请大家能给出宝贵意见！下图是页面效果。



实例需求：要求输入密码长度6-16位，由字母(区分大小写)、数字、符号组成。密码强度分为3个等级，根据用户输入的密码复杂程度显示不同的强度等级。
基本思路：1.正则表达式验证密码格式是否正确(匹配大小写字母、数字和特殊符号)
                  2.如果密码格式正确，进一步验证密码的强度等级
                    a.弱：不管密码有多长，如果只包含小写字母或大写字母或数字或特殊符号中的一种，那密码强度为最弱等级；如果密码长度<=6位，并                        且包含大写字母、小写字母、数字、特殊符号中的任意2种组合，也属于最弱等级。
                    b.中：当密码长度>=6&&<=8时，包含大写字母、小写字母、数字、特殊符号中的任意3种或4种混合，密码强度为中间等级；当密码长度                        >8&&<=16时，包含大写字母、小写字母、数字、特殊符号中的任意2种或3种组合，也属于中间等级。
                    c.强：当密码长度>8&&<=16时，同时包含大写字母、小写字母、数字、特殊符号这4个种类，则达到了最强等级。
具体实现：1.页面结构

<form action="#" name="form1" id="form1" method="post">
<div class="ywz_zhuce_bao">
<div class="ywz_zhucexiaobo">
<div class="ywz_zhuce_youjian">设置密码:</div>
<div class="ywz_zhuce_xiaoxiaobao">
<div class="ywz_zhuce_kuangzi">
<input name="tbPassword" type="password" id="tbPassword" class="ywz_zhuce_kuangwenzil" />
</div>
<div class="ywz_zhuce_huixian" id="pwdLevel_1"></div>
<div class="ywz_zhuce_huixian" id="pwdLevel_2"></div>
<div class="ywz_zhuce_huixian" id="pwdLevel_3"></div>
<div class="ywz_zhuce_hongxianwenzi" id="levelText_1">弱</div>
<div class="ywz_zhuce_hongxianwenzi" id="levelText_2">中</div>
<div class="ywz_zhuce_hongxianwenzi" id="levelText_3">强</div>
</div>
<div class="ywz_zhuce_yongyu1">
<span id="pwd_tip" style="color: #898989;">
<font style="color: #f00;">*</font>
6-16位，由字母(区分大小写)、数字、符号组成
</span>
<span id="pwd_err" style="color: #f00;display: none;">
6-16位，由字母(区分大小写)、数字、符号组成
</span>
</div>
</div>
</div>
</form>

2.css样式

/*密码强度*/
.ywz_zhuce_bao{width: 640px;height: 580px;margin:0 auto;padding: 40px 0px 0px 0px;}
.ywz_zhucexiaobo{float: left;width: 620px;padding-bottom: 10px;padding-top: 5px;margin-left: 20px;}
.ywz_zhuce_youjian{float: left;width: 100px;margin: 5px 0 0 0;font-size: 14px;text-align: right;}
.ywz_zhuce_xiaoxiaobao{float: left;width: 226px;}
.ywz_zhuce_kuangzi{float: left;width: 226px;height: 38px;color: #171717;}
.ywz_zhuce_kuangwenzil{float: left;background: url(../img/dengl_06.jpg) no-repeat;border: 0;color: #3e3e3e;width: 210px;height: 40px;line-height: 35px;padding-left: 25px;_padding-left:20px;outline: medium;}
.ywz_zhuce_huixian{float: left;background: #d6d3d3;width: 72px;height: 6px;margin-top: 5px;_margin-top:0px;margin-left: 5px;_height:2px;font-size: 0px;border-radius: 5px;}
#pwdLevel_1{margin-left: 0px;}
.ywz_zhuce_hongxian{background: #E93807;}
.ywz_zhuce_hongxian2{background: #F58018;}
.ywz_zhuce_hongxian3{background: #68A201;}
.ywz_zhuce_hongxianwenzi{float: left;width: 72px;margin-left: 5px;text-align: center;color: #b0adad;font-size: 12px;}
#levelText_1{margin-left: 0px;}
.ywz_zhuce_yongyu1{float: left;color: #c00;font-size: 12px;padding-left: 10px;margin-top: 10px;_padding-left:0px;}

3.记得引入jquery.min.js,便于对DOM进行操作，接下来即是对密码的验证

$("#tbPassword").focus(function(){     //光标定位在密码框上绑定的事件
$("#pwdLevel_1").attr("class","ywz_zhuce_hongxian");
$("#tbPassword").keyup();    //调用keyup()事件
});
$("#tbPassword").keyup(function(){      //为密码框绑定keyup事件
var _th=$(this);
if(!_th.val()){             //判断非空
console.log(_th.val());
$("#pwd_tip").hide();     //默认提示语隐藏
$("#pwd_err").show();     //错误信息显示
Primary();      //调用Primary(),改变密码强度条显示的样式
return;
}
if(_th.val().length<6){     //判断密码长度是否<6
$("#pwd_tip").hide();   //默认提示语隐藏
$("#pwd_err").show();   //错误信息显示
Weak();  //调用Weak(),改变密码强度条显示的样式
return;
}
var _r=checkPassword(_th);    //调用checkPassword(_th),验证密码格式，返回整数值(true和false相加后的值)，赋值给变量_r
if(_r<1){
$("#pwd_tip").hide();
$("#pwd_err").show();
Primary();   //调用Primary(),改变密码强度条显示的样式
return;
}
if(_r>0&&_r<2){
Weak();    //调用Weak(),改变 密码强度条显示的样式
}else if(_r>=2&&_r<4){
Medium();  //调用Medium(),改变密码强度条显示的样式
}else if(_r>=4){
Tough();   //调用Tough(),改变密码强度条显示的样式
}
$('#pwd_tip').hide();
$('#pwd_err').hide();
});
//"弱、中、强"对应的条为灰色
function Primary(){
$("#pwdLevel_1").attr("class","ywz_zhuce_huixian");
$("#pwdLevel_2").attr("class","ywz_zhuce_huixian");
$("#pwdLevel_3").attr("class","ywz_zhuce_huixian");
}
//"弱"对应的条高亮
function Weak(){
$("#pwdLevel_1").addClass("ywz_zhuce_hongxian");
$("#pwdLevel_2").attr("class","ywz_zhuce_huixian");
$("#pwdLevel_3").attr("class","ywz_zhuce_huixian");
}
//"弱、中"对应的条高亮
function Medium(){
$("#pwdLevel_1").addClass("ywz_zhuce_hongxian");
$("#pwdLevel_2").addClass("ywz_zhuce_hongxian2");
$("#pwdLevel_3").attr("class","ywz_zhuce_huixian");
}
//"弱、中、强"对应的条高亮
function Tough(){
$("#pwdLevel_1").addClass("ywz_zhuce_hongxian");
$("#pwdLevel_2").addClass("ywz_zhuce_hongxian2");
$("#pwdLevel_3").addClass("ywz_zhuce_hongxian3");
}
//验证密码格式
function checkPassword(pwdinput){
var maths,smalls,bigs,corps,cat,num;
var str=$(pwdinput).val();   //输入框密码值
var len=str.length;         //密码长度
var cat=/.{16}/g;            //匹配16个字符，除了换行和行结束符
if(len==0){                  //如果密码长度为0，返回1
return 1;
}
if(len>16){   //如果密码长度超过16位，则密码框内只显示前16位
$(pwdinput).val(str.match(cat)[0]);
console.log(str.match(cat)[0]);
}
cat=/.*[\u4e00-\u9fa5]+.*$/;   //匹配是否含有汉字
if(cat.test(str)){      //如果含有汉字，返回-1
return -1;
}
cat=/[0-9]/;    //匹配是否含有数字
maths=cat.test(str);
cat=/[a-z]/;  //匹配是否含有小写字母
smalls=cat.test(str);
cat=/[A-Z]/;   //匹配是否含有大写字母
bigs=cat.test(str);
corps=corpses(pwdinput);    //调用corpses(pwdinput)方法，验证密码框内的值是否同时含有数字、大小写字母
num = maths + smalls + bigs + corps;    //maths、smalls、bigs、corps为true或false,true表示1,false表示0
if(len<6){    //如果密码长度<6,返回1
return 1;
}
if(len>=6&&len<=8){   //如果密码长度>=6&&<=8
if(num==1 || num==2) return 1;   //如果值中包含数字、小写字母、大写字母、特殊符号中的1种或2种,则返回1
if(num==3 || num==4) return 2; //如果值中包含数字、小写字母、大写字母、特殊符号中的3种或4种,则返回2
}
if(len>8){
if(num==1) return 1;
if(num==2 || num==3) return 2;
if(num==4) return 4;
}
}
function corpses(pwdinput){     //该方法匹配字符串中是否包含特殊字符(即除去大小写字母和数字)
var cat=/./g;   //匹配单个字符，除了换行和行结束符
var str=$(pwdinput).val();   //获取密码框内的值
var sz=str.match(cat);    //匹配单个字符，除了换行和行结束符,返回结果为数组sz
for(var i=0;i<sz.length;i++){    //循环匹配数组中的每个字符，进行验证
cat=/[0-9]/;    //匹配是否含有数字
var maths_01=cat.test(sz[i]);
cat=/[a-z]/;  //匹配是否含有小写字母
var smalls_01=cat.test(sz[i]);
cat=/[A-Z]/;   //匹配是否含有大写字母
var bigs_01=cat.test(sz[i]);
if(!maths_01&&!smalls_01&&!bigs_01){   //如果匹配的字符串包含特殊字符，则返回true，否则返回false
return true;
}
}
return false;
}