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 相关文章推荐
Array.prototype.concat不是通用方法反驳[译]
Sep 20 Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 Javascript
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
30个经典的jQuery代码开发技巧
Dec 15 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
WordPress中利用AJAX异步获取评论用户头像的方法
Jan 08 Javascript
AngularJS下对数组的对比分析
Aug 24 Javascript
微信小程序 转发功能的实现
Aug 04 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
微信小程序点击保存图片到本机功能
Dec 13 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
由php if 想到的些问题
2008/03/22 PHP
基于PHP导出Excel的小经验 完美解决乱码问题
2013/06/10 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
总结一些PHP中好用但又容易忽略的小知识
2017/06/02 PHP
Javascript在IE或Firefox下获取鼠标位置的代码
2009/12/18 Javascript
jquery设置控件位置的方法
2013/08/21 Javascript
不同Jquery版本引发的问题解决
2013/10/14 Javascript
JavaScript包装对象使用详解
2015/07/09 Javascript
AngularJS中处理多个promise的方式
2016/02/02 Javascript
jQuery实现鼠标经过购物车出现下拉框代码(推荐)
2016/07/21 Javascript
纯css下拉菜单 无需js
2016/08/15 Javascript
jQuery实现智能判断固定导航条或侧边栏的方法
2016/09/04 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
2018/03/29 Javascript
详解webpack的proxyTable无效的解决方案
2018/06/15 Javascript
原生JS实现手动轮播图效果实例代码
2018/11/22 Javascript
JavaScript实现旋转木马轮播图
2020/03/16 Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
2020/08/04 Javascript
Python subprocess模块学习总结
2014/03/13 Python
Python3基础之条件与循环控制实例解析
2014/08/13 Python
Python实现k-means算法
2018/02/23 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
win10环境下配置vscode python开发环境的教程详解
2019/10/16 Python
python如何删除文件、目录
2020/06/23 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
万年牢教学反思
2014/02/15 职场文书
献爱心倡议书
2014/04/14 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
英文道歉信
2015/01/20 职场文书
绵山导游词
2015/02/05 职场文书
法定授权委托证明书
2015/06/18 职场文书
tensorflow+k-means聚类简单实现猫狗图像分类的方法
2021/04/28 Python
VUE使用draggable实现组件拖拽
2022/04/06 Vue.js