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 相关文章推荐
js 动态文字滚动的例子
Jan 17 Javascript
利用JavaScript检测CPU使用率自己写的
Mar 22 Javascript
Javascript中With语句用法实例
May 14 Javascript
js简单实现标签云效果实例
Aug 06 Javascript
js实现创建删除html元素小结
Sep 30 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
Sep 05 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
Angularjs+bootstrap+table多选(全选)支持单击行选中实现编辑、删除功能
Mar 27 Javascript
Vuejs仿网易云音乐实现听歌及搜索功能
Mar 30 Javascript
JavaScript条件判断_动力节点Java学院整理
Jun 26 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
Dec 17 Javascript
一秒学会微信小程序制作table表格
Feb 14 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/05/19 PHP
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
jquery ui对话框实例代码
2013/05/10 Javascript
JS复制内容到剪切板的实例代码(兼容IE与火狐)
2013/11/19 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
2014/03/25 Javascript
浅谈Javascript变量作用域问题
2014/12/16 Javascript
深入理解js数组的sort排序
2016/05/28 Javascript
Jquery为DIV添加click事件的简单实例
2016/06/02 Javascript
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
JS实现表单验证功能(验证手机号是否存在,验证码倒计时)
2016/10/11 Javascript
canvas实现图像布局填充功能
2017/02/06 Javascript
动态加载、移除js/css文件的示例代码
2018/03/20 Javascript
深入浅出理解JavaScript闭包的功能与用法
2018/08/01 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
[01:38]DOTA2第二届亚洲邀请赛中国区预选赛出线战队晋级之路
2017/01/17 DOTA
python urllib爬取百度云连接的实例代码
2017/06/19 Python
用Eclipse写python程序
2018/02/10 Python
pandas 对每一列数据进行标准化的方法
2018/06/09 Python
python设置值及NaN值处理方法
2018/07/03 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
python try 异常处理(史上最全)
2019/03/07 Python
Python如何处理大数据?3个技巧效率提升攻略(推荐)
2019/04/15 Python
详细介绍pandas的DataFrame的append方法使用
2019/07/31 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
英国最大的奢侈珠宝和手表网站:C W Sellors
2017/02/10 全球购物
美国销售第一的智能手机和平板电脑保护壳:OtterBox
2017/12/21 全球购物
大学生关于奋斗的演讲稿
2014/01/09 职场文书
学校清洁工岗位职责
2015/04/15 职场文书
2016年毕业实习心得体会范文
2015/10/09 职场文书
2016春季校长开学典礼致辞
2015/11/26 职场文书
《刷子李》教学反思
2016/02/20 职场文书
idea搭建可运行Servlet的Web项目
2021/06/26 Java/Android
Spring mvc是如何实现与数据库的前后端的连接操作的?
2021/06/30 Java/Android
CSS font-variation 可变字体的魅力(实例详解)
2022/03/03 HTML / CSS
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js