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代码编写的14条技巧
Jan 09 Javascript
使用jQuery中的when实现多个AJAX请求对应单个回调的例子分享
Apr 23 Javascript
JavaScript实现找质数代码分享
Mar 24 Javascript
javascript实现画不相交的圆
Apr 07 Javascript
jquery对复选框(checkbox)的操作汇总
Jan 13 Javascript
JS控制文本域只读或可写属性的方法
Jun 24 Javascript
js仿新浪微博消息发布功能
Feb 17 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
Bootstrap Table 删除和批量删除
Sep 22 Javascript
微信小程序签到功能
Oct 31 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
layui表格 列自动适应大小失效的解决方法
Sep 06 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 保留字列表
2012/10/04 PHP
php把数据表导出为Excel表的最简单、最快的方法(不用插件)
2014/05/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(一)
2014/06/23 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
Maps Javascript
2007/01/22 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
自己写了一个展开和收起的多更能型的js效果
2013/03/05 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
IScroll5实现下拉刷新上拉加载的功能实例
2017/08/11 Javascript
详解Vue + Vuex 如何使用 vm.$nextTick
2017/11/20 Javascript
vue ssr 指南详读
2018/06/29 Javascript
Vue-router的使用和出现空白页,路由对象属性详解
2018/09/03 Javascript
使用react context 实现vue插槽slot功能
2019/07/18 Javascript
微信小程序实现锚点功能
2019/11/20 Javascript
vue Treeselect 树形下拉框:获取选中节点的ids和lables操作
2020/08/15 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
简明 Python 基础学习教程
2007/02/08 Python
详解Django通用视图中的函数包装
2015/07/21 Python
开源Web应用框架Django图文教程
2017/03/09 Python
Python实现可设置持续运行时间、线程数及时间间隔的多线程异步post请求功能
2018/01/11 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
Interrail法国:乘火车探索欧洲,最受欢迎的欧洲铁路通票
2019/08/27 全球购物
eBay美国官网:eBay.com
2020/10/24 全球购物
类、抽象类、接口的差异
2016/06/13 面试题
童装店创业计划书
2014/01/09 职场文书
合作意向协议书范本
2014/03/31 职场文书
委托书如何写
2014/08/30 职场文书
父亲节寄语大全
2015/02/27 职场文书
银行自荐信范文
2015/03/25 职场文书
婚宴新娘致辞
2015/07/28 职场文书
2019通用版新员工入职培训方案!
2019/07/11 职场文书