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 相关文章推荐
document 和 document.all 分别什么时候用
Jun 22 Javascript
Javascript模板技术
Apr 27 Javascript
使用基于jquery的gamequery插件做JS乒乓球游戏
Jul 31 Javascript
页面调用单个swf文件,嵌套出多个方法。
Nov 21 Javascript
js实现文字在按钮上滚动的方法
Aug 20 Javascript
JS实现仿QQ面板的手风琴效果折叠菜单代码
Sep 11 Javascript
给before和after伪元素设置js效果的方法
Dec 04 Javascript
使用OpenLayers3 添加地图鼠标右键菜单
Dec 29 Javascript
JavaScript 不支持 indexof 该如何解决
Mar 30 Javascript
js调用屏幕宽度的简单方法
Nov 14 Javascript
vue动画效果实现方法示例
Mar 18 Javascript
详解Vue底部导航栏组件
May 02 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
PHP与MySQL开发中页面出现乱码的一种解决方法
2007/07/29 PHP
PHP 引用是个坏习惯
2010/03/12 PHP
php二分查找二种实现示例
2014/03/12 PHP
PHP创建word文档的方法(平台无关)
2016/03/29 PHP
jqGrid日期格式的判断示例代码(开始日期与结束日期)
2013/11/08 Javascript
JavaScript中的small()方法使用详解
2015/06/08 Javascript
JavaScript程序开发之JS代码放置的位置
2016/01/15 Javascript
3种vue组件的书写形式
2017/11/29 Javascript
node.js多个异步过程中判断执行是否完成的解决方案
2017/12/10 Javascript
nodejs中实现用户注册路由功能
2019/05/20 NodeJs
Vue中通过Vue.extend动态创建实例的方法
2019/08/13 Javascript
JavaScript进阶(三)闭包原理与用法详解
2020/05/09 Javascript
vue+高德地图实现地图搜索及点击定位操作
2020/09/09 Javascript
vue中实现点击变成全屏的多种方法
2020/09/27 Javascript
[01:21:58]守擂赛DOTA2第一周决赛
2020/04/22 DOTA
[51:50]完美世界DOTA2联赛 Magma vs GXR 第一场 11.07
2020/11/10 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
python类继承用法实例分析
2014/10/10 Python
Python实现读取Properties配置文件的方法
2018/03/29 Python
python list转矩阵的实例讲解
2018/08/04 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
python语言基本语句用法总结
2019/06/11 Python
python修改字典键(key)的方法
2019/08/05 Python
浅析PEP570新语法: 只接受位置参数
2019/10/15 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
酒店前厅员工辞职信
2014/01/08 职场文书
酒店秘书求职信范文
2014/02/17 职场文书
2014年党员自我评议(5篇)
2014/09/12 职场文书
2015年元旦联欢晚会活动总结
2014/11/28 职场文书
先进党支部申报材料
2014/12/24 职场文书
幼儿园父亲节活动总结
2015/02/12 职场文书
婚庆主持词大全
2015/06/30 职场文书
安全伴我行主题班会
2015/08/13 职场文书
幼儿园教师教学反思
2016/03/02 职场文书
Html5通过数据流方式播放视频的实现
2021/04/27 HTML / CSS