`
lesorb
  • 浏览: 123366 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

JS检查密码强弱(jquery框架支持)

    博客分类:
  • it
  • js
阅读更多
请自行下载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() );



	});
});


0
1
分享到:
评论

相关推荐

    JQUERY的密码强弱度检查

    **jQuery密码强弱度检查插件详解** 在Web开发中,用户账户的安全性至关重要,而密码的强度则是安全性的第一道防线。为了确保用户设置的密码足够强大,开发者通常会引入密码强度检查功能。本文将深入讲解jQuery的一...

    密码强弱判断jquery

    以上就是一个简单的jQuery密码强弱判断插件的核心思路。实际开发中,还可以加入更多的验证规则,比如检查连续字符、重复字符,甚至使用现有的密码强度检测库,如zxcvbn,以提高判断的准确性和安全性。 在压缩包...

    jquery插件密码强弱

    总的来说,"jQuery插件密码强弱"是一种实用的前端工具,它通过JavaScript增强了网站的安全功能,帮助用户创建更安全的密码,同时提升了用户体验。在实际项目中,开发者应确保选用的jQuery版本和插件都是最新和安全的...

    js检查密码强弱代码.zip

    这个压缩包文件"js检查密码强弱代码.zip"包含了一个完整的示例,用于演示如何用JavaScript实现这一功能。它包含了四个文件:一个GIF动态图可能展示密码强度检查的效果,以及分别用于JavaScript、CSS和HTML的代码文件...

    JQUERY验证密码强弱

    `JQUERY验证密码强弱`是一个常见的功能,用于确保用户设置的密码达到一定的安全标准。在这个案例中,开发者使用了jQuery库,一种广泛应用于前端开发的JavaScript库,来实现这一功能。下面将详细介绍这个功能的实现...

    js密码强弱检测

    JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,尤其在客户端脚本中扮演着...以上就是JavaScript密码强弱检测的核心知识点,通过这些技术,可以创建一个功能完善的密码验证系统,提高用户账号的安全性。

    密码强弱判定 js 特效

    "密码强弱判定 js 特效"是指利用JavaScript(js)语言实现的一种交互式功能,它能够实时评估用户输入的密码强度,并通过视觉效果(特效)给予用户反馈。这种功能通常包括对密码长度、字符种类、复杂度等方面的检查,...

    我自己修改后JQUERY强密码强弱度提示

    我自己修改后JQUERY强密码强弱度提示,原插件没有强弱图提示,我将其修改了。支持图提示。欢迎各位高手交流

    密码强弱显示 密码强弱显示

    在JQuery中实现密码强弱显示,我们需要以下步骤: 1. **HTML结构**:创建一个输入框用于用户输入密码,一个元素(如进度条或文字提示)用于显示密码强度。 ```html &lt;div id="pwdStrength"&gt;&lt;/div&gt; ``` 2. **...

    Js验证密码强弱jquery插件版实例

    摘要:脚本资源,jQuery,密码强度检测 jQuery验证密码强弱,使用了一个基于jQuery的封装插件,在用户输入密码的时候,适时显示密码是否安全。  password_strength_plugin.js完成核心的密码强度检测。  在网页中,...

    再次修改后的JQUERY密码强弱度提示插件

    本文将深入探讨一个经过再次修改的jQuery密码强弱度提示插件,它具有对中英文支持及强弱进度条显示的功能。 ### 一、插件简介 这个修改后的jQuery插件,专门用于实时评估用户输入的密码强度,并通过可视化的方式,...

    jQuery 验证密码强弱的小例子

    在这个“jQuery验证密码强弱的小例子”中,我们将探讨如何使用jQuery来实现一个简单的密码强度检查功能。 首先,我们需要理解基本的HTML结构。在这个例子中,通常会有一个输入框让用户输入密码,以及一个元素(如...

    JS密码强弱判断-可用于注册等

    javascript 密码强弱判断,可用于用户注册、修改密码等

    js检测密码强弱(纯js脚本检测)

    - **`passwordstrength.js`** 文件很可能包含了用于检查密码强度的函数。这个函数可以接受一个密码字符串作为参数,然后根据预定义的规则评估它。 - 可能的实现方式是使用正则表达式匹配各种字符类型,计数并计算...

    完整的密码强弱

    这个项目可能提供了检查密码长度的功能。 - **字符种类**:强密码应包含大写字母、小写字母、数字和特殊字符(如@、#、$、%等),这增加了破解的难度。 - **随机性**:避免使用常见的单词、生日、电话号码等容易被...

    密码强弱度检测万能插件

    密码强弱度检测万能插件,js的,验证密码输入的强度 1分是象征性的收取,CSDN的分不好赚没办法,大家下了后评价一下就加1分,等于是免费下载的

    比较简单的JavaScript密码强弱检测判断代码.rar

    一个比较简单的JavaScript密码强弱检测判断代码,检测用户输入密码的强度是多少,通过JS方法计算密码强度,适时提醒用户的密码是否安全,现在这种功能基本上很普遍了,本代码没有使用正则表达式。代码中的密码强度值...

    密码强弱显示两种方式

    总之,“密码强弱显示两种方式”是一个关于用户界面设计和密码安全的话题,涵盖了前端开发中的JavaScript交互和密码策略实施。通过有效的视觉反馈,用户能够更好地理解如何创建安全的密码,而开发者则可以通过实现...

    文本狂密码强弱度检测

    密码强弱度测试,主要是测试文本框密码的强弱程度根据长度,字符来判断

    验证密码强弱的源码 验证密码强弱的源码

    本文将深入探讨如何使用JavaScript实现一个验证密码强弱的功能,并基于提供的文件"VerifyPassword.html"、"VerifyPassword.js"和"VerifyPassword.txt"进行分析。 首先,我们需要理解密码强度的基本标准。通常,一个...

Global site tag (gtag.js) - Google Analytics