基于JQuery的密码强度验证代码


Posted in Javascript onMarch 01, 2010

基于JQuery的密码强度验证代码  基于JQuery的密码强度验证代码 

基于JQuery的密码强度验证代码基于JQuery的密码强度验证代码
因为是基于JQuery的控件,当然需要JQuery库,还要一个本控件的JS。JQuery的JS大家可以到官网下载:http://code.jquery.com/jquery-1.4.2.min.js
这个控件的JS文件:password_strength_plugin.js
password_strength_plugin.js

(function($){ 
$.fn.shortPass = 'Too short'; 
$.fn.badPass = 'Weak'; 
$.fn.goodPass = 'Good'; 
$.fn.strongPass = 'Strong'; 
$.fn.samePassword = 'Username and Password identical.'; 
$.fn.resultStyle = ""; 
$.fn.passStrength = function(options) { 
var defaults = { 
shortPass: "shortPass", //optional 
badPass: "badPass", //optional 
goodPass: "goodPass", //optional 
strongPass: "strongPass", //optional 
baseStyle: "testresult", //optional 
userid: "", //required override 
messageloc: 1 //before == 0 or after == 1 
}; 
var opts = $.extend(defaults, options); 
return this.each(function() { 
var obj = $(this); 
$(obj).unbind().keyup(function() 
{ 
var results = $.fn.teststrength($(this).val(),$(opts.userid).val(),opts); 
if(opts.messageloc === 1) 
{ 
$(this).next("." + opts.baseStyle).remove(); 
$(this).after("<span class=\""+opts.baseStyle+"\"><span></span></span>"); 
$(this).next("." + opts.baseStyle).addClass($(this).resultStyle).find("span").text(results); 
} 
else 
{ 
$(this).prev("." + opts.baseStyle).remove(); 
$(this).before("<span class=\""+opts.baseStyle+"\"><span></span></span>"); 
$(this).prev("." + opts.baseStyle).addClass($(this).resultStyle).find("span").text(results); 
} 
}); 
//FUNCTIONS 
$.fn.teststrength = function(password,username,option){ 
var score = 0; 
//password < 4 
if (password.length < 4 ) { this.resultStyle = option.shortPass;return $(this).shortPass; } 
//password == user name 
if (password.toLowerCase()==username.toLowerCase()){this.resultStyle = option.badPass;return $(this).samePassword;} 
//password length 
score += password.length * 4; 
score += ( $.fn.checkRepetition(1,password).length - password.length ) * 1; 
score += ( $.fn.checkRepetition(2,password).length - password.length ) * 1; 
score += ( $.fn.checkRepetition(3,password).length - password.length ) * 1; 
score += ( $.fn.checkRepetition(4,password).length - password.length ) * 1; 
//password has 3 numbers 
if (password.match(/(.*[0-9].*[0-9].*[0-9])/)){ score += 5;} 
//password has 2 symbols 
if (password.match(/(.*[!,@,#,$,%,^,&,*,?,_,~].*[!,@,#,$,%,^,&,*,?,_,~])/)){ score += 5 ;} 
//password has Upper and Lower chars 
if (password.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/)){ score += 10;} 
//password has number and chars 
if (password.match(/([a-zA-Z])/) && password.match(/([0-9])/)){ score += 15;} 
// 
//password has number and symbol 
if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([0-9])/)){ score += 15;} 
//password has char and symbol 
if (password.match(/([!,@,#,$,%,^,&,*,?,_,~])/) && password.match(/([a-zA-Z])/)){score += 15;} 
//password is just a numbers or chars 
if (password.match(/^\w+$/) || password.match(/^\d+$/) ){ score -= 10;} 
//verifying 0 < score < 100 
if ( score < 0 ){score = 0;} 
if ( score > 100 ){ score = 100;} 
if (score < 34 ){ this.resultStyle = option.badPass; return $(this).badPass;} 
if (score < 68 ){ this.resultStyle = option.goodPass;return $(this).goodPass;} 
this.resultStyle= option.strongPass; 
return $(this).strongPass; 
}; 
}); 
}; 
})(jQuery); 
$.fn.checkRepetition = function(pLen,str) { 
var res = ""; 
for (var i=0; i<str.length ; i++ ) 
{ 
var repeated=true; 
for (var j=0;j < pLen && (j+i+pLen) < str.length;j++){ 
repeated=repeated && (str.charAt(j+i)==str.charAt(j+i+pLen)); 
} 
if (j<pLen){repeated=false;} 
if (repeated) { 
i+=pLen-1; 
repeated=false; 
} 
else { 
res+=str.charAt(i); 
} 
} 
return res; 
};

这个控件的css文件:
style.css
td label{ 
font-size:14px; 
font-weight:bold; 
color:#666; 
font-family: arail,helvetica,san-serif; 
} 
input{ 
height:28px; 
width:200px; 
border:1px solid #ccc; 
font-size:16px; 
font-weight: bold; 
color:#666; 
padding:7px 0 0 4px; 
} 
/* ADVANCED STYLES */ 
.top_testresult{ 
font-weight: bold; 
font-size:13px; 
font-family: arail,helvetica,san-serif; 
color:#666; 
padding:0; 
margin:0 0 2px 0; 
} 
.top_testresult span{ 
padding:6px ; 
margin:0; 
} 
.top_shortPass{ 
background:#edabab; 
border:1px solid #bc0000; 
display:block; 
} 
.top_shortPass span{ 
} 
.top_badPass{ 
background:#edabab; 
border:1px solid #bc0000; 
display:block; 
} 
.top_badPass span{ 
} 
.top_goodPass{ 
background:#ede3ab; 
border:1px solid #bc9f00; 
display:block; 
} 
.top_goodPass span{ 
} 
.top_strongPass{ 
background:#d3edab; 
border:1px solid #73bc00; 
display:block; 
} 
.top_strongPass span{ 
} 
/* RESULT STYLE */ 
.testresult{ 
font-weight: bold; 
font-size:13px; 
font-family: arial,helvetica,san-serif; 
color:#666; 
padding:0px 0px 12px 10px; 
margin-left:10px; 
display: block; 
height:28px; 
float:left; 
} 
.testresult span{ 
padding:10px 20px 12px 10px; 
margin: 0px 0px 0px 20px; 
display:block; 
float:right; 
white-space: nowrap; 
} 
.shortPass{ 
background:url(../images/red.png) no-repeat 0 0; 
} 
.shortPass span{ 
background:url(../images/red.png) no-repeat top right; 
} 
.badPass{ 
background:url(../images/red.png) no-repeat 0 0; 
} 
.badPass span{ 
background:url(../images/red.png) no-repeat top right; 
} 
.goodPass{ 
background:url(../images/yellow.png) no-repeat 0 0; 
} 
.goodPass span{ 
background:url(../images/yellow.png) no-repeat top right; 
} 
.strongPass{ 
background:url(../images/green.png) no-repeat 0 0; 
} 
.strongPass span{ 
background:url(../images/green.png) no-repeat top right; 
}

head部分代码
head
<title>无标题页</title> 
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
<!-- custom select plugin js --> 
<script type="text/javascript" src="js/password_strength_plugin.js"></script> 
<link rel="stylesheet" type="text/css" href="css/style.css"> 
<script> 
$(document).ready( function() { 
//BASIC 
$(".password_test").passStrength({ 
userid: "#user_id" 
}); 
//ADVANCED 
$(".password_adv").passStrength({ 
shortPass: "top_shortPass", 
badPass: "top_badPass", 
goodPass: "top_goodPass", 
strongPass: "top_strongPass", 
baseStyle: "top_testresult", 
userid: "#user_id_adv", 
messageloc: 0 
}); 
}); 
</script>

body部分代码
body
<body> 
<table cellpadding="2" cellspacing="0" border="0"> 
<tr> 
<td align="right"><label>User Name:</label></td> 
<td><input type="text" name="user_name" id="user_id_adv"/></td> 
</tr> 
<tr> 
<td align="right"><label>Password:</label></td> 
<td><input type="password" name="pass_word" class="password_adv"/></td> 
</tr> 
</table> 
</body>
Javascript 相关文章推荐
比较全面的event对像在IE与FF中的区别 推荐
Sep 21 Javascript
jQuery 获取URL参数的插件
Mar 04 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
js实现的奥运倒计时时钟效果代码
Dec 09 Javascript
基于jQuery实现鼠标点击导航菜单水波动画效果附源码下载
Jan 06 Javascript
浅析JS原型继承与类的继承
Apr 07 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
微信小程序如何修改本地缓存key中单个数据的详解
Apr 26 Javascript
js中的面向对象之对象常见创建方法详解
Dec 16 Javascript
解决vuex刷新数据消失问题
Nov 12 Javascript
JavaScript原始值与包装对象的详细介绍
May 11 Javascript
Jquery下的26个实用小技巧(jQuery tips, tricks &amp; solutions)
Mar 01 #Javascript
基于jquery.Jcrop的头像编辑器
Mar 01 #Javascript
IE event.srcElement和FF event.target 功能比较
Mar 01 #Javascript
Javascript 判断客户端浏览器类型代码
Mar 01 #Javascript
在chrome中window.onload事件的一些问题
Mar 01 #Javascript
仅用[]()+!等符号就足以实现几乎任意Javascript代码
Mar 01 #Javascript
Javascript 网页水印(非图片水印)实现代码
Mar 01 #Javascript
You might like
双料怀旧--SHARP GF515的维护、修理和简单调试
2021/03/02 无线电
鸡肋的PHP单例模式应用详解
2013/06/03 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
Smarty使用自定义资源的方法
2015/08/08 PHP
讲解WordPress开发中一些常用的debug技巧
2015/12/18 PHP
对采用动态原型方式无法展示继承机制得思考
2009/12/04 Javascript
背景图跟随鼠标移动的Mootools插件实现代码
2011/12/12 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
jQuery simplePage+AJAX plus分页插件用法实例
2016/02/17 Javascript
JavaScript闭包实例详解
2016/06/03 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
VueJs单页应用实现微信网页授权及微信分享功能示例
2017/07/26 Javascript
使用JS组件实现带ToolTip验证框的实例代码
2017/08/23 Javascript
jquery实现回车键触发事件(实例讲解)
2017/11/21 jQuery
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
使用jQuery动态设置单选框的选中效果
2018/12/06 jQuery
JavaScript简单实现的仿微博留言功能示例
2019/01/17 Javascript
python利用拉链法实现字典方法示例
2017/03/25 Python
python实现对图片进行旋转,放缩,裁剪的功能
2019/08/07 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python tqdm 实现滚动条不上下滚动代码(保持一行内滚动)
2020/02/19 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
Python中读取文件名中的数字的实例详解
2020/12/25 Python
SmartBuyGlasses荷兰:购买太阳镜和眼镜
2020/03/16 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
企业优秀团员事迹材料
2014/08/20 职场文书
健康状况证明书
2014/11/26 职场文书
汶川大地震感悟
2015/08/10 职场文书
2016年教师节感恩寄语
2015/12/04 职场文书
《秋思》教学反思
2016/02/23 职场文书
OpenCV-Python使用cv2实现傅里叶变换
2021/06/09 Python
MySQL提取JSON字段数据实现查询
2022/04/22 MySQL
Java线程的6种状态与生命周期
2022/05/11 Java/Android