js检验密码强度(低中高)附图


Posted in Javascript onJune 05, 2014

最近一直在做通行证项目,里面的注册模块中输入密码需要显示密码强度(低中高)。今天就把做的效果给大家分享下,代码没有网上搜索的那么复杂,能够满足一般的需求。

html 代码如下:

<!DOCTYPE HTML> 
<html lang="en"> 
<head> 
<meta charset="utf-8"/> 
<title>密码强度</title> 
<style type="text/css"> 
#passStrength{height:6px;width:120px;border:1px solid #ccc;padding:2px;} 
.strengthLv1{background:red;height:6px;width:40px;} 
.strengthLv2{background:orange;height:6px;width:80px;} 
.strengthLv3{background:green;height:6px;width:120px;} 
</style> 
</head> 
<body> 
<input type="password" name="pass" id="pass" maxlength="16"/> 
<div class="pass-wrap"> 
<em>密码强度:</em> 
<div id="passStrength"></div> 
</div> 
</body> 
</html> 
<script type="text/javascript" src="js/passwordStrength.js"></script> 
<script type="text/javascript"> 
new PasswordStrength('pass','passStrength'); 
</script>

js 代码如下:
function PasswordStrength(passwordID,strengthID){ 
this.init(strengthID); 
var _this = this; 
document.getElementById(passwordID).onkeyup = function(){ 
_this.checkStrength(this.value); 
} 
}; 
PasswordStrength.prototype.init = function(strengthID){ 
var id = document.getElementById(strengthID); 
var div = document.createElement('div'); 
var strong = document.createElement('strong'); 
this.oStrength = id.appendChild(div); 
this.oStrengthTxt = id.parentNode.appendChild(strong); 
}; 
PasswordStrength.prototype.checkStrength = function (val){ 
var aLvTxt = ['','低','中','高']; 
var lv = 0; 
if(val.match(/[a-z]/g)){lv++;} 
if(val.match(/[0-9]/g)){lv++;} 
if(val.match(/(.[^a-z0-9])/g)){lv++;} 
if(val.length < 6){lv=0;} 
if(lv > 3){lv=3;} 
this.oStrength.className = 'strengthLv' + lv; 
this.oStrengthTxt.innerHTML = aLvTxt[lv]; 
};

效果图:
js检验密码强度(低中高)附图 
使用说明:

1、对象的第一个参数是密码输入框的 id,第二个参数是密码强度长条的 id。

2、checkStrength 方法中可以自定义密码强度的规则。

3、密码强度显示低中高分别对应 3 个 css 样式(strengthLv1、strengthLv2、strengthLv3)。

Javascript 相关文章推荐
JavaScript 对任意元素,自定义右键菜单的实现方法
May 08 Javascript
dwz 如何去掉ajaxloading具体代码
May 22 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
Javascript数组与字典用法分析
Dec 13 Javascript
简介JavaScript中的sub()方法的使用
Jun 08 Javascript
使用javascript提交form表单方法汇总
Jun 25 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
jquery插件autocomplete用法示例
Jul 01 Javascript
form+iframe解决跨域上传文件的方法
Nov 18 Javascript
jQuery中map函数的两种方式
Apr 07 jQuery
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
mpvue实现左侧导航与右侧内容的联动
Oct 21 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
Jun 05 #Javascript
js如何判断用户是否是用微信浏览器
Jun 05 #Javascript
如何获取网站icon有哪些可行的方法
Jun 05 #Javascript
IE6中链接A的href为javascript协议时不在当前页面跳转
Jun 05 #Javascript
网页右下角弹出窗体实现代码
Jun 05 #Javascript
获取中文字符串的实际长度代码
Jun 05 #Javascript
jQuery文件上传插件Uploadify使用指南
Jun 05 #Javascript
You might like
IIS下配置Php+Mysql+zend的图文教程
2006/12/08 PHP
请离开include_once和require_once
2013/07/18 PHP
php中最简单的字符串匹配算法
2014/12/16 PHP
Nginx下配置codeigniter框架方法
2015/04/07 PHP
PHP内存使用情况如何获取
2015/10/10 PHP
thinkphp微信开发(消息加密解密)
2015/12/02 PHP
PHP 获取指定地区的天气实例代码
2017/02/08 PHP
PHP环形链表实现方法示例
2017/09/15 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
PHP实现文件上传与下载
2020/08/28 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
javascript getElementsByName()的用法说明
2009/07/31 Javascript
jquery动态增加text元素以及删除文本内容实例代码
2013/07/01 Javascript
sogou地图API用法实例教程
2014/09/11 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
AngularJS基础学习笔记之控制器
2015/05/10 Javascript
javascript实现根据时间段显示问候语的方法
2015/06/18 Javascript
解决WordPress使用CDN后博文无法评论的错误
2015/12/15 Javascript
js操作浏览器的参数方法
2017/01/21 Javascript
node使用UEditor富文本编辑器的方法实例
2017/07/11 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
angularjs的单选框+ng-repeat的实现方法
2018/09/12 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
python实现爬虫下载漫画示例
2014/02/16 Python
Python的for和break循环结构中使用else语句的技巧
2016/05/24 Python
Python字符串格式化输出代码实例
2019/11/22 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
CSS3 Media Queries(响应式布局可以让你定制不同的分辨率和设备)
2013/06/06 HTML / CSS
结构和类有什么异同
2012/07/16 面试题
保护环境建议书100字
2014/05/13 职场文书
信访稳定工作汇报
2014/10/27 职场文书
现场施工员岗位职责
2015/04/11 职场文书
2016年三严三实党课学习心得体会
2016/01/06 职场文书
压缩Redis里的字符串大对象操作
2021/06/23 Redis