基于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 相关文章推荐
js 禁用只读文本框获得焦点时的退格键
Apr 25 Javascript
分享几个超级震憾的图片特效
Jan 08 Javascript
javascript模拟post提交隐藏地址栏的参数
Sep 03 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
Bootstrap实现提示框和弹出框效果
Jan 11 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
Jan 19 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
深究AngularJS中ng-drag、ng-drop的用法
Jun 12 Javascript
Vue仿今日头条实例详解
Feb 06 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 Javascript
jQuery实现全选按钮
Jan 01 jQuery
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
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
mysql 查询指定日期时间内sql语句实现原理与代码
2012/12/16 PHP
php通过baihui网API实现读取word文档并展示
2015/06/22 PHP
Codeigniter的dom类用法实例
2015/06/26 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
JavaScript中关于indexOf的使用方法与问题小结
2010/08/05 Javascript
Jquery公告滚动+AJAX后台得到数据
2011/04/14 Javascript
改善用户体验的五款jQuery插件分享
2011/05/22 Javascript
深入理解JavaScript系列(11) 执行上下文(Execution Contexts)
2012/01/15 Javascript
JavaScript DOM操作表格及样式
2015/04/13 Javascript
jquery验证邮箱格式是否正确实例讲解
2015/11/16 Javascript
JavaScript中字符串与Unicode编码互相转换的实现方法
2015/12/18 Javascript
jQuery 获取多选框的值及多选框中文的函数
2016/05/16 Javascript
基于angular中的重要指令详解($eval,$parse和$compile)
2016/10/21 Javascript
从0开始学Vue
2016/10/27 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
Python多线程实现同步的四种方式
2017/05/02 Python
Python图像处理之直线和曲线的拟合与绘制【curve_fit()应用】
2018/12/26 Python
对Python中创建进程的两种方式以及进程池详解
2019/01/14 Python
Python Web框架之Django框架Model基础详解
2019/08/16 Python
python怎么判断素数
2020/07/01 Python
曼联官方网上商店:Manchester United Direct
2017/07/28 全球购物
什么是数组名
2012/05/10 面试题
护士自我鉴定范文
2013/10/06 职场文书
我的小天地教学反思
2014/04/30 职场文书
教师三严三实对照检查材料
2014/09/25 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
开工典礼致辞
2015/07/29 职场文书
表扬信范文
2019/04/22 职场文书
nginx基于域名,端口,不同IP的虚拟主机设置的实现
2021/03/31 Servers
MySQL面试题讲解之如何设置Hash索引
2021/11/01 MySQL
Go gorilla securecookie库的安装使用详解
2022/08/14 Golang