jQuery判断密码强度实现思路及代码


Posted in Javascript onApril 24, 2013

jQuery判断密码强度实现思路及代码

<head> 
<title></title> 
<script src="jquery-1.9.1.js" type="text/javascript"></script> 
<style type="text/css"> 
.qiang{background:url(/images/pas4.JPG) no-repeat;width:150px;height:40px;float:left;} 
.zhong{background:url(/images/pas3.JPG) no-repeat;width:150px;height:40px;float:left;} 
.ruo{background:url(/images/pas2.JPG) no-repeat;width:150px;height:40px;float:left;} 
.ruox{background:url(/images/pas1.JPG) no-repeat;width:150px;height:40px;float:left;} 
.div1css{float:left;width:200px;} 
</style> 
<script type="text/javascript"> 
$(function () { 
$('#pass').keyup(function () { 
var strongRegex = new RegExp("^(?=.{8,})(?=.*[A-Z])(?=.*[a-z])(?=.*[0-9])(?=.*\\W).*$", "g"); 
var mediumRegex = new RegExp("^(?=.{7,})(((?=.*[A-Z])(?=.*[a-z]))|((?=.*[A-Z])(?=.*[0-9]))|((?=.*[a-z])(?=.*[0-9]))).*$", "g"); 
var enoughRegex = new RegExp("(?=.{6,}).*", "g"); if (false == enoughRegex.test($(this).val())) { 
$('#div2').addClass('ruox'); 
//$('#passstrength').html('小于六位的时候'); //密码小于六位的时候,密码强度图片都为灰色 
} 
else if (strongRegex.test($(this).val())) { 
$('#div2').removeClass('zhong'); 
$('#div2').addClass('qiang'); 
//$('#passstrength').html('强!'); //密码为八位及以上并且字母数字特殊字符三项都包括 
} 
else if (mediumRegex.test($(this).val())) { 
$('#div2').removeClass('ruo'); 
$('#div2').addClass('zhong'); 
//$('#passstrength').html('中!'); //密码为七位及以上并且字母、数字、特殊字符三项中有两项,强度是中等 
} 
else { 
$('#div2').removeClass('ruox'); 
$('#div2').addClass('ruo'); 
//$('#passstrength').html('弱!'); //如果密码为6为及以下,就算字母、数字、特殊字符三项都包括,强度也是弱的 
} 
return true; 
}); 
}) 
</script> 
</head> 
<body> 
<div id="div1" class="div1css"> 
<input type="password" name="pass" id="pass" /></div> 
<div id="div2"><span id="passstrength"></span></div> 
</body>
Javascript 相关文章推荐
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
Oct 14 Javascript
JS 拼凑字符串的简单实例
Sep 02 Javascript
AngularJS 表单验证手机号的实例(非必填)
Nov 12 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
layer.msg()去掉默认时间,实现手动关闭的方法
Sep 12 Javascript
vue实现点击按钮切换背景颜色的示例代码
Jun 23 Javascript
vue.js+element 默认提示中英文操作
Nov 11 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 Javascript
window.location.reload()方法刷新页面弹出要再次显示该网页对话框
Apr 24 #Javascript
基于JavaScript自定义构造函数的详解说明
Apr 24 #Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 #Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 #Javascript
javascript获取网页中指定节点的父节点、子节点的方法小结
Apr 24 #Javascript
jQuery文本框(input textare)事件绑定方法教程
Apr 24 #Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 #Javascript
You might like
实现树状结构的两种方法
2006/10/09 PHP
php支付宝接口用法分析
2015/01/04 PHP
Mac OS下配置PHP+MySql环境
2015/02/25 PHP
PHP面向对象之后期静态绑定功能介绍
2015/05/18 PHP
php自定义扩展名获取函数示例
2016/12/12 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
javascript 折半查找字符在数组中的位置(有序列表)
2010/12/09 Javascript
深入理解JavaScript中的传值与传引用
2013/12/09 Javascript
node.js中的fs.utimesSync方法使用说明
2014/12/15 Javascript
jQuery动画与特效详解
2015/02/01 Javascript
jQuery中通过ajax的get()函数读取页面的方法
2016/02/29 Javascript
Node.js Streams文件读写操作详解
2016/07/04 Javascript
BootStrap学习系列之Bootstrap Typeahead 组件实现百度下拉效果(续)
2016/07/07 Javascript
bootstrap css样式之表单
2017/01/19 Javascript
Vue中v-for的数据分组实例
2018/03/07 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
vue中实现高德定位功能
2019/12/03 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
Python使用sftp实现上传和下载功能(实例代码)
2017/03/14 Python
python Pandas 读取txt表格的实例
2018/04/29 Python
详解Python 装饰器执行顺序迷思
2018/08/08 Python
Python实现多级目录压缩与解压文件的方法
2018/09/01 Python
浅谈Pandas:Series和DataFrame间的算术元素
2018/12/22 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
Python while true实现爬虫定时任务
2020/06/08 Python
python和go语言的区别是什么
2020/07/20 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
YOINS官网:时尚女装网上购物
2017/03/17 全球购物
ebookers英国:隶属全球最大的在线旅游公司Expedia
2017/12/28 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
一份没有按时交货失信于客户的检讨书
2014/09/19 职场文书
2015年中个人总结范文
2015/03/10 职场文书
教师师德工作总结2015
2015/07/22 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
Ruby处理YAML和json数据
2022/04/18 Ruby