javaScript 動态生成密碼強度

現在在很多web網站注冊使用者資訊時，在填寫密碼元素的時候更多頁面會動态提示我們目前輸入的密碼強度【'低'、'中'、'高'】；

接下來我們來模拟這種形式：

1：密碼強度算法

/*
 * |檢測密碼強度
 * |密碼中包含字母強度值加一
 * |密碼中包含數字強度加一
 * |密碼中包含其他字元強度值加一
 * |密碼長度小于5，強度值為0
 * |強度值大于三，則為三
 */

function checkPwdStrong(pwd){
	var lv = 0;
    if(pwd.match(/[a-z]/g)){lv++;}
    if(pwd.match(/[0-9]/g)){lv++;}
    if(pwd.match(/(.[^a-z0-9])/g)){lv++;}
    if(pwd.length < 5){lv=0;}
    if(lv > 3){lv=3;}
}
           

下面來看一個HTML的表單元素input吧：

<input type="password" id="passwordOne" class="input228_26_blue_jr" tabindex="2" name="userVo.userPwd"/>
<div class="pwdstr02_jr">
	                            	<div class="pwdstr01_jr"></div>
                                </div>
                                <div class="pwdstr001_jr"></div>
           

寫完表單稍稍加上一些樣式：

<style type="text/css">
    #pwdstr01_jr{height:6px;width:81px;border:1px solid #ccc;padding:2px;}
</style>
           

我們應用Jquery來動态判斷密碼強度

$(document).ready(function() {
	//密碼強度判斷
	$("#passwordOne").keyup(function() {
		var S_level = checkPwdStrong($(this).val());
		switch (S_level) {
			case 0:
				$(".pwdstr01_jr").css("background-color", "#33CC00").css("width", "0px");
				$(".pwdstr001_jr").html("");
				break;
			case 1:
				$(".pwdstr01_jr").css("background-color", "#95c62e").css("width", "27px");
				$(".pwdstr001_jr").html("弱");
				
				break;
			case 2:
				$(".pwdstr01_jr").css("background-color", "#FF9900").css("width", "54px");
				$(".pwdstr001_jr").html("中");
				break;
			case 3:
				$(".pwdstr01_jr").css("background-color", "#33CC00").css("width", "81px");
				$(".pwdstr001_jr").html("強");
				break;
			default:
				$(".pwdstr01_jr").css("background-color", "#95c62e").css("width", "0px");
				$(".pwdstr001_jr").html("弱");
		}


	});
})
           

結束任務