日期:2014-05-16  浏览次数:20459 次

JS检查密码强弱(jquery框架支持)
请自行下载jquery框架验证。本例已经经jquery-1.4.2.min.js验证通过。

var ValidatePwd = {

		Pwd : {

			color: ['#E6EAED', '#AC0035', '#FFCC33', '#639BCC', '#246626'],

			text: ['太短', '弱', '一般', '很好', '极佳']

		},

		Result : 0,

		ColorInit : function(){

			$('#pwdStrong_1,#pwdStrong_2,#pwdStrong_3,#pwdStrong_4').css({"background-color":ValidatePwd.Pwd.color[0]});

		},

		Evaluate : function(word) {	

			if (word == "") {

				this.Result = 0;

			} else if (word.length < 6) {

				this.Result =  1;

			} else {

				this.Result =  word.match(/[a-z](?![^a-z]*[a-z])|[A-Z](?![^A-Z]*[A-Z])|\d(?![^\d]*\d)|[^a-zA-Z\d](?![a-zA-Z\d]*[^a-zA-Z\d])/g).length;

			} 

		},

		Check : function(value){

			this.Evaluate(value);

			this.ColorInit();

			this.textColor();

		},

		textColor : function(){console.log( this.Result );

			var j=0;

			for(j;j<parseInt(this.Result);j++){

				$("#pwdStrong_"+j).css({"background-color":ValidatePwd.Pwd.color[j]});

			}

			

			$('#pwdStrong_text').text( ValidatePwd.Pwd.text[j] )

			.css({"background-color":ValidatePwd.Pwd.color[j]});



		}


	}


附加html格式:

<form >

<div>

<table>

<tr>

<td>

密码:

</td>

<td>

<input id="txtPassword" type="password" name="password" style="width: 130px;" maxlength="16" onfocus="InitCss();" />

</td>

<td>

<div id="tipPosition">

</div>

</td>

</tr>

<tr>

<td>

</td>

<td>

<table id="pwdStrong_color">

<tr>

<td id="pwdStrong_1">

</td>

<td id="pwdStrong_2">

</td>

<td id="pwdStrong_3">

</td>

<td id="pwdStrong_4">

</td>

</tr>

</table>

</td>

<td>

<div id="pwdStrong_text">

</div>

</td>

</tr>

</table>

</div>

</form>


附加CSS样式:

<style>

body

{

font: 13px 宋体;

}

#tipPosition

{

width: 400px;

height: 16px;

line-height: 18px;

padding: 2px 30px;

}

.tip

{

background: #E6F2FF url(images/register_tip.png) no-repeat 10px center;

border: 1px #0E5863 dashed;

color: #0E5863;

}

.error

{

background: #FBECDF url(images/register_error.png) no-repeat 10px center;

border: 1px Red dashed;

color: #6D3737;

}

.success

{

background: #D6FCD2 url(images/register_success.png) no-repeat 10px center;

border: 1px #2F5D36 dashed;

color: #3D934A;

}

#pwdStrong_color

{

width: 136px;

height: 3px;

border: 0px;

border-collapse: collapse;

border-spacing: 0;

background: #E6EAED;

margin-top: 5px;

}

#pwdStrong_color td

{

padding: 0px;

width: 44px; 

}

#pwdStrong_text

{

font: 12px 宋体;

} 

</style>


调用:

jQuery(function($) {


	$("input[name=password]").keydown(function(){

		//

		ValidatePwd.Check( $(this).val() );



	});
});