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="#" id="form1" method="post" name="form1">
	<p class="ywz_zhuce_bao">
	<p class="ywz_zhucexiaobo">
	<p class="ywz_zhuce_youjian">設置密碼:</p>
	<p class="ywz_zhuce_xiaoxiaobao">
	<p class="ywz_zhuce_kuangzi"><input class="ywz_zhuce_kuangwenzil" id="tbPassword" name="tbPassword" type="password" /></p>
	<p class="ywz_zhuce_huixian" id="pwdLevel_1">&nbsp;</p>
	<p class="ywz_zhuce_huixian" id="pwdLevel_2">&nbsp;</p>
	<p class="ywz_zhuce_huixian" id="pwdLevel_3">&nbsp;</p>
	<p class="ywz_zhuce_hongxianwenzi" id="levelText_1">弱</p>
	<p class="ywz_zhuce_hongxianwenzi" id="levelText_2">中</p>
	<p class="ywz_zhuce_hongxianwenzi" id="levelText_3">強</p>
	</p>
	<p 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></p>
	</p>
	</p>
</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

發佈留言