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 相关文章推荐
基于JQuery的数字改变的动画效果--可用来做计数器
Aug 11 Javascript
使用Jquery Aajx访问WCF服务(GET、POST、PUT、DELETE)
Mar 16 Javascript
javascript中的parseInt和parseFloat区别
Jul 12 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
Jun 15 Javascript
jQuery中hide()方法用法实例
Dec 24 Javascript
JavaScript学习笔记之Cookie对象
Jan 22 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
AngularJS入门教程之AngularJS指令
Apr 18 Javascript
Javascript基础_嵌入图像的简单实现
Jun 14 Javascript
利用vue + element实现表格分页和前端搜索的方法
Dec 25 Javascript
vue-lazyload图片延迟加载插件的实例讲解
Feb 09 Javascript
基于node.js实现爬虫的讲解
Feb 18 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
php的array_multisort()使用方法介绍
2012/05/16 PHP
php 批量替换程序的具体实现代码
2013/10/04 PHP
php实现的Cookies操作类实例
2014/09/24 PHP
thinkphp循环结构用法实例
2014/11/24 PHP
PHP使用pdo实现事务处理操作示例
2018/09/05 PHP
css+js实现部分区域高亮可编辑遮罩层
2014/03/04 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
2014/09/09 Javascript
jquery选择器简述
2015/08/31 Javascript
jQuery实现的登录浮动框效果代码
2015/09/26 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
JavaScript获取URL中参数querystring的方法详解
2016/10/11 Javascript
使用BootStrap实现悬浮窗口的效果
2016/12/13 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
2017/05/09 Javascript
JavaScript设计模式之构造器模式(生成器模式)定义与用法实例分析
2018/07/26 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
2018/11/15 Javascript
详解VUE前端按钮权限控制
2019/04/26 Javascript
如何在微信小程序中实现Mixins方案
2019/06/20 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
Vue点击切换Class变化,实现Active当前样式操作
2020/07/17 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
python的id()函数解密过程
2012/12/25 Python
完美解决Python 2.7不能正常使用pip install的问题
2018/06/12 Python
Python判断两个文件是否相同与两个文本进行相同项筛选的方法
2019/03/01 Python
Python List列表对象内置方法实例详解
2019/10/22 Python
Python 实现Numpy中找出array中最大值所对应的行和列
2019/11/26 Python
Python文件读写w+和r+区别解析
2020/03/26 Python
django下创建多个app并设置urls方法
2020/08/02 Python
python 如何快速复制序列
2020/09/07 Python
Html5适配iphoneX刘海屏的简单实现
2019/04/09 HTML / CSS
WiFi云数码相框:Nixplay
2018/07/05 全球购物
护士的岗位职责
2013/12/04 职场文书
婚假请假条格式及范文
2014/04/10 职场文书
工程项目经理任命书
2014/06/05 职场文书
党的群众路线对照检查材料思想汇报(学校)
2014/10/04 职场文书
高中生期中考试失利检讨书
2014/10/23 职场文书
大学毕业谢师宴致辞
2015/07/27 职场文书