请自行下载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() );
});
});
分享到:
相关推荐
**jQuery密码强弱度检查插件详解** 在Web开发中,用户账户的安全性至关重要,而密码的强度则是安全性的第一道防线。为了确保用户设置的密码足够强大,开发者通常会引入密码强度检查功能。本文将深入讲解jQuery的一...
以上就是一个简单的jQuery密码强弱判断插件的核心思路。实际开发中,还可以加入更多的验证规则,比如检查连续字符、重复字符,甚至使用现有的密码强度检测库,如zxcvbn,以提高判断的准确性和安全性。 在压缩包...
总的来说,"jQuery插件密码强弱"是一种实用的前端工具,它通过JavaScript增强了网站的安全功能,帮助用户创建更安全的密码,同时提升了用户体验。在实际项目中,开发者应确保选用的jQuery版本和插件都是最新和安全的...
这个压缩包文件"js检查密码强弱代码.zip"包含了一个完整的示例,用于演示如何用JavaScript实现这一功能。它包含了四个文件:一个GIF动态图可能展示密码强度检查的效果,以及分别用于JavaScript、CSS和HTML的代码文件...
`JQUERY验证密码强弱`是一个常见的功能,用于确保用户设置的密码达到一定的安全标准。在这个案例中,开发者使用了jQuery库,一种广泛应用于前端开发的JavaScript库,来实现这一功能。下面将详细介绍这个功能的实现...
JavaScript(简称JS)是一种广泛用于网页和网络应用的编程语言,尤其在客户端脚本中扮演着...以上就是JavaScript密码强弱检测的核心知识点,通过这些技术,可以创建一个功能完善的密码验证系统,提高用户账号的安全性。
"密码强弱判定 js 特效"是指利用JavaScript(js)语言实现的一种交互式功能,它能够实时评估用户输入的密码强度,并通过视觉效果(特效)给予用户反馈。这种功能通常包括对密码长度、字符种类、复杂度等方面的检查,...
我自己修改后JQUERY强密码强弱度提示,原插件没有强弱图提示,我将其修改了。支持图提示。欢迎各位高手交流
在JQuery中实现密码强弱显示,我们需要以下步骤: 1. **HTML结构**:创建一个输入框用于用户输入密码,一个元素(如进度条或文字提示)用于显示密码强度。 ```html <div id="pwdStrength"></div> ``` 2. **...
摘要:脚本资源,jQuery,密码强度检测 jQuery验证密码强弱,使用了一个基于jQuery的封装插件,在用户输入密码的时候,适时显示密码是否安全。 password_strength_plugin.js完成核心的密码强度检测。 在网页中,...
本文将深入探讨一个经过再次修改的jQuery密码强弱度提示插件,它具有对中英文支持及强弱进度条显示的功能。 ### 一、插件简介 这个修改后的jQuery插件,专门用于实时评估用户输入的密码强度,并通过可视化的方式,...
在这个“jQuery验证密码强弱的小例子”中,我们将探讨如何使用jQuery来实现一个简单的密码强度检查功能。 首先,我们需要理解基本的HTML结构。在这个例子中,通常会有一个输入框让用户输入密码,以及一个元素(如...
javascript 密码强弱判断,可用于用户注册、修改密码等
- **`passwordstrength.js`** 文件很可能包含了用于检查密码强度的函数。这个函数可以接受一个密码字符串作为参数,然后根据预定义的规则评估它。 - 可能的实现方式是使用正则表达式匹配各种字符类型,计数并计算...
这个项目可能提供了检查密码长度的功能。 - **字符种类**:强密码应包含大写字母、小写字母、数字和特殊字符(如@、#、$、%等),这增加了破解的难度。 - **随机性**:避免使用常见的单词、生日、电话号码等容易被...
密码强弱度检测万能插件,js的,验证密码输入的强度 1分是象征性的收取,CSDN的分不好赚没办法,大家下了后评价一下就加1分,等于是免费下载的
一个比较简单的JavaScript密码强弱检测判断代码,检测用户输入密码的强度是多少,通过JS方法计算密码强度,适时提醒用户的密码是否安全,现在这种功能基本上很普遍了,本代码没有使用正则表达式。代码中的密码强度值...
总之,“密码强弱显示两种方式”是一个关于用户界面设计和密码安全的话题,涵盖了前端开发中的JavaScript交互和密码策略实施。通过有效的视觉反馈,用户能够更好地理解如何创建安全的密码,而开发者则可以通过实现...
密码强弱度测试,主要是测试文本框密码的强弱程度根据长度,字符来判断
本文将深入探讨如何使用JavaScript实现一个验证密码强弱的功能,并基于提供的文件"VerifyPassword.html"、"VerifyPassword.js"和"VerifyPassword.txt"进行分析。 首先,我们需要理解密码强度的基本标准。通常,一个...