JS检查密码强弱（jquery框架支持）-优快云博客

本文介绍了一个使用jQuery实现的密码强度检测插件，该插件可根据用户输入的密码复杂度实时显示密码强度，并通过不同颜色及文字提示来帮助用户创建更安全的密码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请自行下载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() );


	});
});