请自行下载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() );
});
});
分享到:
相关推荐
js检查密码强弱代码.zip
jquery插件,密码强弱判断,简单实用,效果自行修改,免费分享给大家。
一个很好的JQUERY密码强弱度插件,内有测试代码。
用JQUERY验证密码强弱, 包括CSS,js,html,jquery_1.3.2. 希望对你有帮助。
用jquery插件 密码强弱函数判断 内附插件并带有使用例子,敬请下载
密码强弱显示,修改密码,JQuery实现
js密码强弱检测
我自己修改后JQUERY强密码强弱度提示,原插件没有强弱图提示,我将其修改了。支持图提示。欢迎各位高手交流
密码强弱判定 js 特效
jQuery 验证密码强弱的小例子 jQuery 验证密码强弱的小例子
摘要:脚本资源,jQuery,密码强度检测 jQuery验证密码强弱,使用了一个基于jQuery的封装插件,在用户输入密码的时候,适时显示密码是否安全。 password_strength_plugin.js完成核心的密码强度检测。 在网页中,...
javascript 密码强弱判断,可用于用户注册、修改密码等
js检测密码强弱(纯js脚本检测),功能强大实用!
再次修改后的JQUERY密码强弱度提示插件,修改后的JQUERY密码强弱度提示插件: 1 支持中英文。 2 强弱进度条 内附有说明文档,以及测试代码
密码强弱度检测万能插件,js的,验证密码输入的强度 1分是象征性的收取,CSDN的分不好赚没办法,大家下了后评价一下就加1分,等于是免费下载的
一个比较简单的JavaScript密码强弱检测判断代码,检测用户输入密码的强度是多少,通过JS方法计算密码强度,适时提醒用户的密码是否安全,现在这种功能基本上很普遍了,本代码没有使用正则表达式。代码中的密码强度值...
验证密码强弱源码 通过JS实现 验证密码强弱的源码
密码强弱度测试,主要是测试文本框密码的强弱程度根据长度,字符来判断
自己写的密码强弱,下载可直接用,已经测试了很多次了,感觉还不错!!
用jquery异步处理验证用户输入的密码强弱,超赞!个人珍藏!