js密码强度实时检测代码


Posted in Javascript onMarch 02, 2016

密码强度的判断, 在注册网站用户的时候, 是一个必须要做的事情, 不同的网站, 实现的方式是不一样的.
密码的判断, 其实也就是一个表单验证的其中一项. 那我们来实现这么一个简单的操作.

首先做一个简单的密码输入框和一个显示密码强度的进度条. 整个整体由vali_pass盒子涵盖. 这个盒子包含了标题, 密码框. 再个就是强度进度条.

<div class="vali_pass">
 <h3>简单的密码强度检测</h3>
 <input type="password" name="pass">
 <div class="vali_pass_progress">
  <span class="vali_pass_inner_progress"></span>
 </div>
</div>

这样我们再来用CSS来美化一下

.vali_pass {
 width: 350px;
 margin: 0 auto;
 padding: 10px;
 border: #eee 1px solid;
 text-align: center;
}
.vali_pass input {
 width: 96%;
 display: block;
 margin: 0;
 padding: 5px;
 font-size: 14px;
 line-height: 20px;
}
.vali_pass_progress {
 margin-top: 10px;
 background-color: #efefef;
 height: 10px;
 border-radius: 5px;
}
.vali_pass_inner_progress {
 display: block;
 height: 100%;
 background-color: transparent;
 border-radius: 5px;
 width: 100%;
}

这时候我们需要考虑的是, 这个进度条可能存在几种状态, 前度低的时候显示什么状态, 中程度的时候显示什么状态, 高程度的时候,显示什么状态.
OK, 我们这里用的时候进度条内部盒子的宽度,背景色的控制. 设置为三个样式

.error {
 background-color: #ff3300;
}
.middle {
 background-color: gold;
}
.strong {
 background-color: green;
}

这样HTML结构,CSS美化也就完成. 下面我们来做JS的监听.

首先少不了的是给密码输入框, 加入文本输入监听

ele_pass.onkeyup = function () {...}

对密码的判断, 就得在这个事件内做处理. 不过在处理之前, 我们得初始化一些数据. 比如进行密码判断的正则表达式.

var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);

我这里使用了三个正则来依次判断密码的匹配度. 数据初始化完成后, 处理onkeyup事件. 首先是获取这个输入框的值, 然后其长度. 长度我们这里控制至少6个字符. sec作为安全度的一个增加值. 每次匹配正则里的表达式, 就sec++, 说明密码的安全度.然后换算成密码的100之内数值. 这个值可以方便用在控制内部进度条的宽度.

ele_pass.onkeyup = function () {
 var val = this.value;
 var len = val.length;
 var sec = 0;
 if (len >= 6) { // 至少六个字符
  for (var i = 0; i < regxs.length; i++) {
   if (val.match(regxs[i])) {
    sec++;
   }
  }
 }
 var result = (sec / regxs.length) * 100;
 ele_progress.style.width = result + "%";
}

进度条宽度控制好后, 我们暂时是看不出进度条的效果的, 看前面的CSS代码. 这个默认的背景是透明的. 那下面我们还得控制不同安全值, 他的背景颜色的控制.下面的代码就是用来控制其背景色的.

if(result > 0 && result <= 50){
 ele_progress.setAttribute("class",begin_classname + " error");
}else if (result > 50 && result < 100) {
 ele_progress.setAttribute("class",begin_classname + " middle");
} else if (result == 100) {
 ele_progress.setAttribute("class",begin_classname + " strong");
}

最后的JS代码:

var ele_pass = document.getElementsByTagName("input")[0];
var ele_progress = document.getElementsByClassName("vali_pass_inner_progress")[0];
var begin_classname = ele_progress.className;
var regxs = [];
regxs.push(/[^a-zA-Z0-9_]/g);
regxs.push(/[a-zA-Z]/g);
regxs.push(/[0-9]/g);

ele_pass.onkeyup = function () {
 var val = this.value;
 var len = val.length;
 var sec = 0;
 if (len >= 6) { // 至少六个字符
  for (var i = 0; i < regxs.length; i++) {
   if (val.match(regxs[i])) {
    sec++;
   }
  }
 }
 var result = (sec / regxs.length) * 100;
 ele_progress.style.width = result + "%";
 if(result > 0 && result <= 50){
  ele_progress.setAttribute("class",begin_classname + " error");
 }else if (result > 50 && result < 100) {
  ele_progress.setAttribute("class",begin_classname + " middle");
 } else if (result == 100) {
  ele_progress.setAttribute("class",begin_classname + " strong");
 }

}

那我们的效果也来操作一下看看:

js密码强度实时检测代码

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
js 编写规范
Mar 03 Javascript
jQuery实现页面滚动时层智能浮动定位实例探讨
Mar 29 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
Feb 27 Javascript
JavaScript导出Excel实例详解
Nov 25 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
Bootstrap下拉菜单更改为悬停(hover)触发的方法
May 24 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
微信小程序异步API为Promise简化异步编程的操作方法
Aug 14 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
node全局变量__dirname与__filename的区别
Jan 14 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 Javascript
js+css实现回到顶部按钮(back to top)
Mar 02 #Javascript
Node.js中JavaScript操作MySQL的常用方法整理
Mar 01 #Javascript
通过node-mysql搭建Windows+Node.js+MySQL环境的教程
Mar 01 #Javascript
jquery自定义右键菜单、全选、不连续选择
Mar 01 #Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 #Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 #Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 #Javascript
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
WINDOWS服务器安装多套PHP的另类解决方案
2006/10/09 PHP
PHP 5.3.0 安装分析心得
2009/08/07 PHP
PHP 开源AJAX框架14种
2009/08/24 PHP
简单PHP会话(session)说明介绍
2016/08/21 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
php之header的不同用法总结(实例讲解)
2017/11/28 PHP
jQuery用unbind方法去掉hover事件及其他方法介绍
2013/03/18 Javascript
js中实现多态采用和继承类似的方法
2014/08/22 Javascript
jquery中post方法用法实例
2014/10/21 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
JS简单实现仿百度控制台输出信息效果
2016/09/04 Javascript
浅谈原生JS中的延迟脚本和异步脚本
2017/07/12 Javascript
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
2017/09/20 jQuery
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
[44:09]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第二局
2016/02/25 DOTA
Python的净值数据接口调用示例分享
2016/03/15 Python
详解Python 2.6 升级至 Python 2.7 的实践心得
2017/04/27 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
Python计算时间间隔(精确到微妙)的代码实例
2019/02/26 Python
django中的图片验证码功能
2019/09/18 Python
Python帮你识破双11的套路
2019/11/11 Python
python中如何打包用户自定义模块
2020/09/23 Python
css3一个简易的 LED 数字时钟实现方法
2020/01/15 HTML / CSS
Lululemon加拿大官网:加拿大知名体育服装零售商
2019/04/12 全球购物
优秀员工年终发言演讲稿
2014/01/01 职场文书
情侣吵架检讨书
2014/02/05 职场文书
经营目标管理责任书
2014/07/25 职场文书
python的netCDF4批量处理NC格式文件的操作方法
2022/03/21 Python
Python用tkinter实现自定义记事本的方法详解
2022/03/31 Python
Python使用华为API为图像设置多个锚点标签
2022/04/12 Python
ant design vue的form表单取值方法
2022/06/01 Vue.js