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 相关文章推荐
去除链接虚线全面分析总结
Aug 15 Javascript
推荐一些非常不错的javascript学习资源站点
Aug 29 Javascript
jQuery 自动增长的文本输入框实现代码
Apr 02 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
vue中axios的封装问题(简易版拦截,get,post)
Jun 15 Javascript
简述JS浏览器的三种弹窗
Jul 15 Javascript
npm配置国内镜像资源+淘宝镜像的方法
Sep 07 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
微信小程序结合mock.js实现后台模拟及调试
Mar 28 Javascript
vue表单数据交互提交演示教程
Nov 13 Javascript
uni-app实现点赞评论功能
Nov 25 Javascript
记一次vue跨域的解决
Oct 21 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
Terran建筑一览
2020/03/14 星际争霸
比较时间段一与时间段二是否有交集的php函数
2011/05/31 PHP
PHP 常用的header头部定义汇总
2015/06/19 PHP
laravel框架实现去掉URL中index.php的方法
2019/10/12 PHP
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
js在数组中删除重复的元素自保留一个(两种实现思路)
2014/08/22 Javascript
JavaScript实现的石头剪刀布游戏源码分享
2014/08/22 Javascript
jQuery中;function($,undefined) 前面的分号的用处
2014/12/17 Javascript
javascript关于运动的各种问题经典总结
2015/04/27 Javascript
javascript动态设置样式style实例分析
2015/05/13 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
jQuery插件ajaxfileupload.js实现上传文件
2020/10/23 Javascript
Angular中使用ui router实现系统权限控制及开发遇到问题
2016/09/23 Javascript
Bootstrap 模态框(Modal)带参数传值实例
2017/08/20 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
vue-cli启动本地服务局域网不能访问的原因分析
2018/01/22 Javascript
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
2018/12/13 Javascript
vue data引入本地图片的两种方式小结
2019/11/13 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
跟老齐学Python之总结参数的传递
2014/10/10 Python
详解Python中的条件判断语句
2015/05/14 Python
在Python中使用next()方法操作文件的教程
2015/05/24 Python
使用pandas读取文件的实现
2019/07/31 Python
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
在Java开发中如何选择使用哪种集合类
2016/08/09 面试题
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
安全责任书范本
2014/04/15 职场文书
论文评语大全
2014/04/29 职场文书
校车安全责任书
2014/08/25 职场文书
设备收款委托书范本
2014/10/02 职场文书
出售房屋协议书范本
2014/10/06 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
后进生评语大全
2015/01/04 职场文书
邀请函的格式
2015/01/30 职场文书
求职信格式范文
2015/03/19 职场文书