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 import css实例代码
Jul 18 Javascript
JavaScript 替换Html标签实现代码
Oct 14 Javascript
cookie中的path与domain属性详解
Dec 18 Javascript
gridview生成时如何去掉style属性中的border-collapse
Sep 30 Javascript
基于jquery ui的alert,confirm方案(支持换肤)
Apr 03 Javascript
在JavaScript中对HTML进行反转义详解
May 18 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
Dec 05 Javascript
redux中间件之redux-thunk的具体使用
Apr 17 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
原生JS与JQ获取元素的区别详解
Feb 13 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验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
JavaScript 常用函数库详解
2009/10/21 Javascript
javasciprt下jquery函数$.post执行无响应的解决方法
2014/03/13 Javascript
javascript显式类型转换实例分析
2015/04/25 Javascript
jQuery旋转木马式幻灯片轮播特效
2015/12/04 Javascript
vue移动端裁剪图片结合插件Cropper的使用实例代码
2017/07/10 Javascript
JavaScript实现购物车基本功能
2017/07/21 Javascript
深入浅析angular和vue还有jquery的区别
2018/08/13 jQuery
JavaScript判断浏览器运行环境的详细方法
2019/06/30 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
2019/09/18 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
JS实现简易日历效果
2021/01/25 Javascript
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
PYTHON压平嵌套列表的简单实现
2016/06/08 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
Philosophy美国官网:美国美容品牌
2016/08/15 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
Invicta手表官方商店:百年制表历史的瑞士腕表品牌
2019/09/26 全球购物
精伦电子Java笔试题
2013/01/16 面试题
如果让你测试一台高速激光打印机,你都会进行哪些测试
2012/12/04 面试题
求职简历中个人的自我评价
2013/12/01 职场文书
仓管员岗位责任制
2014/02/19 职场文书
母亲节感恩寄语
2014/02/21 职场文书
环保倡议书100字
2014/05/15 职场文书
领导班子个人对照检查材料(群众路线)
2014/09/26 职场文书
组织生活会表态发言材料
2014/10/17 职场文书
电子商务实训报告总结
2014/11/05 职场文书
银行自荐信范文
2015/03/25 职场文书
辩护意见书
2015/06/04 职场文书
2016年大学生暑假爱心支教活动策划书
2015/11/26 职场文书
中学生打架《检讨书》范文
2019/08/12 职场文书
2019下半年英语教师的教学工作计划(3篇)
2019/09/25 职场文书
Mysql Online DDL的使用详解
2021/05/20 MySQL
PyQt5实现多张图片显示并滚动
2021/06/11 Python
漫画「请问您今天要来点兔子吗?」最新杂志彩页公开
2022/03/24 日漫
SQL Server使用导出向导功能
2022/04/08 SQL Server