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 相关文章推荐
优化javascript的执行速度
Jan 23 Javascript
Javascript延迟执行实现方法(setTimeout)
Dec 30 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
用jquery统计子菜单的条数示例代码
Oct 18 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
Jan 09 Javascript
vue2组件实现懒加载浅析
Mar 29 Javascript
jQuery zTree树插件动态加载实例代码
May 11 jQuery
js 事件的传播机制(实例讲解)
Jul 20 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
js如何找出字符串中的最长回文串
Jun 04 Javascript
操作按钮悬浮固定在微信小程序底部的实现代码
Aug 02 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 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+Html+缓存
2006/12/20 PHP
9个经典的PHP代码片段分享
2014/12/18 PHP
PHP实现的memcache环形队列类实例
2015/07/28 PHP
PHP 接入支付宝即时到账功能
2016/09/18 PHP
php 使用curl模拟ip和来源进行访问的实现方法
2017/05/02 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
网站上面有这种切换效果
2006/06/26 Javascript
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
javascript 点击整页变灰的效果(可做退出效果)。
2008/01/09 Javascript
基于JQUERY的两个ListBox子项互相调整的实现代码
2011/05/07 Javascript
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
2011/11/30 Javascript
用JQUERY增删元素的代码
2012/02/14 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
js获取域名的方法
2015/01/27 Javascript
Bootstrap 3.x打印预览背景色与文字显示异常的解决
2016/11/06 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
2017/08/04 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
jQuery实现轮播图效果
2019/11/26 jQuery
JS实现网页烟花动画效果
2020/03/10 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
Python with的用法
2014/08/22 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
Python闭包和装饰器用法实例详解
2019/05/22 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Python爬虫爬取Bilibili弹幕过程解析
2019/10/10 Python
Python3如何判断三角形的类型
2020/04/12 Python
使用Python pip怎么升级pip
2020/08/11 Python
Python实现列表索引批量删除的5种方法
2020/11/16 Python
CSS3中animation实现流光按钮效果
2020/12/21 HTML / CSS
C语言面试题
2013/05/19 面试题
小班重阳节活动方案
2014/02/08 职场文书
中班幼儿评语大全
2014/04/30 职场文书
个人借条范本
2015/05/25 职场文书
Python学习之包与模块详解
2022/03/19 Python