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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
Javascript写入txt和读取txt文件示例
Feb 12 Javascript
js实现的标题栏新消息闪烁提示效果
Jun 06 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
Vue生命周期示例详解
Apr 12 Javascript
Angular.JS中的this指向详解
May 17 Javascript
JS实现多张图片预览同步上传功能
Jun 23 Javascript
javascript 高级语法之继承的基本使用方法示例
Nov 11 Javascript
基于vue--key值的特殊用处详解
Jul 31 Javascript
vue动态设置路由权限的主要思路
Jan 13 Vue.js
vue3使用vuedraggable实现拖拽功能
Apr 06 Vue.js
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
德劲1102收音机的打理维修案例
2021/03/02 无线电
可定制的PHP缩略图生成程式(需要GD库支持)
2007/03/06 PHP
PHP中常用的转义函数
2014/02/28 PHP
PHP快速按行读取CSV大文件的封装类分享(也适用于其它超大文本文件)
2014/04/10 PHP
PHP的全局错误处理详解
2016/04/25 PHP
PHPExcel笔记, mpdf导出
2016/05/03 PHP
PHP实现的简单AES加密解密算法实例
2017/05/29 PHP
PHP基于session.upload_progress 实现文件上传进度显示功能详解
2019/08/09 PHP
Laravel自定义 封装便捷返回Json数据格式的引用方法
2019/09/29 PHP
浅谈laravel orm 中的一对多关系 hasMany
2019/10/21 PHP
滚动经典最新话题[prototype框架]下编写
2006/10/03 Javascript
封装好的省市地区联动控件附下载
2007/08/13 Javascript
JavaScript弹簧振子超简洁版 完全符合能量守恒,胡克定理
2009/10/25 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
新增加的内容是如何将div的scrollbar自动移动最下面
2014/01/02 Javascript
关于javascript模块加载技术的一些思考
2014/11/28 Javascript
基于HTML+CSS,jQuery编写的简易计算器后续(添加了键盘监听)
2016/01/05 Javascript
jQuery.form.js插件不能解决连接超时(timeout)的原因分析及解决方法
2016/10/14 Javascript
echarts3 使用总结(绘制各种图表,地图)
2017/01/05 Javascript
JavaScript正则表达式函数总结(常用)
2018/02/22 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
Vue $mount实战之实现消息弹窗组件
2019/04/22 Javascript
Python中使用logging模块打印log日志详解
2015/04/05 Python
python中利用await关键字如何等待Future对象完成详解
2017/09/07 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
Python之字典对象的几种创建方法
2020/09/30 Python
介绍一下EJB的体系结构
2012/08/01 面试题
自荐信格式的六要素
2013/09/21 职场文书
优秀经理事迹材料
2014/02/01 职场文书
设备动力科岗位职责范本
2014/02/23 职场文书
中学生学雷锋演讲稿
2014/04/26 职场文书
产品推广策划方案
2014/05/10 职场文书
战略性融资合作协议书范本
2014/10/17 职场文书
教师党的群众路线教育实践活动个人整改措施
2014/11/04 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript