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 轻松支持函数重载 (Part 1 - 设计)
Aug 04 Javascript
Javascript 面向对象 重载
May 13 Javascript
微信小程序 for 循环详解
Oct 09 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
vue中各组件之间传递数据的方法示例
Jul 27 Javascript
详谈commonjs模块与es6模块的区别
Oct 18 Javascript
vue中,在本地缓存中读写数据的方法
Sep 21 Javascript
Node.js 使用axios读写influxDB的方法示例
Oct 26 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
JS校验与最终登陆界面功能完整示例
Jan 13 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
Oct 20 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
Yii2实现中国省市区三级联动实例
2017/02/08 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
JavaScript中如何通过arguments对象实现对象的重载
2014/05/12 Javascript
通过js来制作复选框的全选和不选效果
2014/05/22 Javascript
在JavaScript中判断整型的N种方法示例介绍
2014/06/18 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
2015/08/21 Javascript
jquery实现简单实用的弹出层效果代码
2015/10/15 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
Bootstrap carousel轮转图的使用实例详解
2016/05/17 Javascript
浅谈JS函数定义方式的区别
2016/10/30 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
基于Vue.js 2.0实现百度搜索框效果
2020/12/28 Javascript
vue.js中父组件调用子组件的内部方法示例
2017/10/22 Javascript
vue-cli 引入、配置axios的方法
2018/05/08 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
python动态加载变量示例分享
2014/02/17 Python
Python自定义进程池实例分析【生产者、消费者模型问题】
2016/09/19 Python
django orm 通过related_name反向查询的方法
2018/12/15 Python
Python 使用threading+Queue实现线程池示例
2019/12/21 Python
python实现爱奇艺登陆密码RSA加密的方法示例详解
2020/05/27 Python
python 多进程和协程配合使用写入数据
2020/10/30 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
基于HTML5 WebGL的3D机房的示例
2018/03/16 HTML / CSS
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
大学生职业生涯规划范文
2014/01/08 职场文书
个人四风问题对照检查材料思想汇报
2014/10/06 职场文书
法律进社区活动总结
2015/05/07 职场文书
2015年干部教育培训工作总结
2015/05/15 职场文书
百年孤独读书笔记
2015/06/29 职场文书
80后创业总结的9条职场用人思想,记得收藏
2019/08/13 职场文书
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电
JavaWeb实现显示mysql数据库数据
2022/03/19 Java/Android