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 相关文章推荐
使用AmplifyJS组件配合JavaScript进行编程的指南
Jul 28 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
微信小程序 基础知识css样式media标签
Feb 15 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
js实现图片轮播效果学习笔记
Jul 26 Javascript
jQuery选择器之属性筛选选择器用法详解
Sep 19 jQuery
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
Vue实现一个图片懒加载插件
Mar 11 Javascript
npm全局环境变量配置详解
Dec 15 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 高手之路(二)
2006/10/09 PHP
destoon二次开发常用数据库操作
2014/06/21 PHP
ThinkPHP框架表单验证操作方法
2017/07/19 PHP
Juqery Html(),append()等方法的Bug解决方法
2010/12/13 Javascript
jquery 年会抽奖程序
2011/12/22 Javascript
基于jQuery的遍历同id元素 并响应事件的代码
2012/06/14 Javascript
js实现ArrayList功能附实例代码
2014/10/29 Javascript
JS实现网页标题随机显示名人名言的方法
2015/11/03 Javascript
jQuery javascript获得网页的高度与宽度的实现代码
2016/04/26 Javascript
浅析BootStrap栅格系统
2016/06/07 Javascript
jQuery实现的瀑布流加载效果示例
2016/09/13 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
微信小程序 转发功能的实现
2017/08/04 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
小程序云开发部署攻略(图文教程)
2018/10/30 Javascript
详解如何更好的使用module vuex
2019/03/27 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
python实现查询苹果手机维修进度
2015/03/16 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Bottle框架中的装饰器类和描述符应用详解
2017/10/28 Python
Python求两个圆的交点坐标或三个圆的交点坐标方法
2018/11/07 Python
详解Python字典的操作
2019/03/04 Python
python监控nginx端口和进程状态
2019/09/06 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
成功经营餐厅的创业计划书范文
2013/12/26 职场文书
金融专业大学生自我评价
2014/01/09 职场文书
计划生育工作汇报
2014/10/28 职场文书
通知书大全
2015/04/27 职场文书
九九重阳节致辞
2015/07/31 职场文书
2016教师节感恩话语
2015/12/09 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
浅析Redis Sentinel 与 Redis Cluster
2021/06/24 Redis
ssh服务器拒绝了密码 请再试一次已解决(亲测有效)
2022/08/14 Servers