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 监听textarea中按键事件
Oct 08 Javascript
js css后面所带参数含义介绍
Aug 18 Javascript
express的中间件bodyParser详解
Dec 04 Javascript
简述JavaScript中正则表达式的使用方法
Jun 15 Javascript
JS获取checkbox的个数简单实例
Aug 19 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
手机端转换rem适应
Apr 01 Javascript
JS实现发送短信验证后按钮倒计时功能(防止刷新倒计时失效)
Jul 07 Javascript
清空元素html(&quot;&quot;) innerHTML=&quot;&quot; 与 empty()的区别和应用(推荐)
Aug 14 Javascript
使用 vue 实现灭霸打响指英雄消失的效果附demo
May 06 Javascript
vue仿ios列表左划删除
Sep 26 Javascript
javascript设计模式 ? 简单工厂模式原理与应用实例分析
Apr 09 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
PHP4.04简明安装
2006/10/09 PHP
PHP的substr_replace将指定两位置之间的字符替换为*号
2011/05/04 PHP
PHP Parse Error: syntax error, unexpected $end 错误的解决办法
2012/06/05 PHP
深入理解PHP JSON数组与对象
2016/07/19 PHP
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
AngularJs解决跨域问题案例详解(简单方法)
2016/05/19 Javascript
JS/jQuery判断DOM节点是否存在的简单方法
2016/11/24 Javascript
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
vue2实现可复用的轮播图carousel组件详解
2017/11/27 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
Vue-cropper 图片裁剪的基本原理及思路讲解
2018/04/17 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
2018/08/31 Javascript
微信小程序系列之自定义顶部导航功能
2019/05/21 Javascript
微信小程序关键字变色实现代码实例
2019/12/13 Javascript
详解vue-router的Import异步加载模块问题的解决方案
2020/05/13 Javascript
vue 虚拟DOM的原理
2020/10/03 Javascript
Python实现单词拼写检查
2015/04/25 Python
python中的闭包用法实例详解
2015/05/05 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
python3基于OpenCV实现证件照背景替换
2018/07/18 Python
python linecache 处理固定格式文本数据的方法
2019/01/08 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
Python3标准库之dbm UNIX键-值数据库问题
2020/03/24 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
乡镇信息公开实施方案
2014/03/23 职场文书
公司授权委托书范文
2014/09/21 职场文书
2014年学习部工作总结
2014/11/12 职场文书
世界环境日活动总结
2015/02/11 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
团组织推荐意见
2015/06/05 职场文书
导游词之无锡东林书院
2019/12/11 职场文书
Nginx 502 Bad Gateway错误原因及解决方案
2021/03/31 Servers
python基础之错误和异常处理
2021/10/24 Python