js实现密码强度检验


Posted in Javascript onJanuary 15, 2017

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

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 16 Javascript
JavaScript DSL 流畅接口(使用链式调用)实例
Mar 15 Javascript
javascript数组排序汇总
Jul 07 Javascript
结合代码图文讲解JavaScript中的作用域与作用域链
Jul 05 Javascript
微信小程序 教程之引用
Oct 18 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
JavaScript数据结构之优先队列与循环队列实例详解
Oct 27 Javascript
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
创建nuxt.js项目流程图解
Mar 13 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
JavaScript实现图像模糊化的方法实例
Jan 15 #Javascript
vue实现简单实时汇率计算功能
Jan 15 #Javascript
bootstrap——bootstrapTable实现隐藏列的示例
Jan 14 #Javascript
JS轮播图中缓动函数的封装
Nov 25 #Javascript
JavaScript字符串对象
Jan 14 #Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 #Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 #Javascript
You might like
PHP实现连接设备、通讯和发送命令的方法
2015/10/13 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
yii2.0整合阿里云oss上传单个文件的示例
2017/09/19 PHP
iframe窗口高度自适应的又一个巧妙实现思路
2014/04/04 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
浅谈jquery事件处理
2015/04/24 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
jQuery extend()详解及简单实例
2017/05/06 jQuery
VsCode插件整理(小结)
2017/09/14 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
vue的状态管理模式vuex
2017/11/30 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
Vue中用props给data赋初始值遇到的问题解决
2018/11/27 Javascript
Node.js 实现简单的无侵入式缓存框架的方法
2019/07/21 Javascript
详解Vue3.0 + TypeScript + Vite初体验
2021/02/22 Vue.js
python实现BackPropagation算法
2017/12/14 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
Python如何获取Win7,Win10系统缩放大小
2020/01/10 Python
python中Mako库实例用法
2020/12/31 Python
浅析CSS3 中的 transition,transform,translate之间区别和作用
2020/03/26 HTML / CSS
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
出纳岗位职责范本
2013/12/01 职场文书
森林防火宣传标语
2014/06/27 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
个人年终总结怎么写
2015/03/09 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
可怜妈妈观后感
2015/06/09 职场文书
初中政教处工作总结
2015/08/12 职场文书
护士旷工检讨书
2015/08/15 职场文书
《月球之谜》教学反思
2016/02/20 职场文书
基于Redis实现分布式锁的方法(lua脚本版)
2021/05/12 Redis
Python进行区间取值案例讲解
2021/08/02 Python
Hive HQL支持2种查询语句风格
2022/06/25 数据库