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 相关文章推荐
神奇的代码 通杀各种网站-可随意修改复制页面内容
Jul 17 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
javascript ajax 仿百度分页函数
Oct 29 Javascript
Javascript 按位左移运算符使用介绍(
Feb 04 Javascript
HTML5使用DeviceOrientation实现摇一摇功能
Jun 05 Javascript
jquery判断input值不为空的方法
Jun 05 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
AngularJS之页面跳转Route实例代码
Mar 10 Javascript
浅析JS中常用类型转换及运算符表达式
Jul 23 Javascript
在react中使用vuex的示例代码
Jul 30 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
基于better-scroll 实现歌词联动功能的代码
May 07 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
服务器web工具 php环境下
2010/12/29 PHP
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
php的webservice的wsdl的XML无法显示问题的解决方法
2014/03/11 PHP
php中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php数值计算num类简单操作示例
2020/05/15 PHP
超级兔子让浮动层消失的前因后果
2007/03/09 Javascript
javascript 自定义事件初探
2009/08/21 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
jQuery的3种请求方式$.post,$.get,$.getJSON
2014/03/28 Javascript
Bootstrap table的使用方法
2016/11/02 Javascript
JavaScript制作弹出层效果
2016/12/02 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
2019/05/18 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
mock.js模拟前后台交互
2019/07/25 Javascript
微信小程序实现按字母排列选择城市功能
2019/11/25 Javascript
[01:13:17]Secret vs NB 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
《Python之禅》中对于Python编程过程中的一些建议
2015/04/03 Python
儿童python练习实例
2018/05/27 Python
Django中如何防范CSRF跨站点请求伪造攻击的实现
2019/04/28 Python
Python二进制文件读取并转换为浮点数详解
2019/06/25 Python
python 如何去除字符串头尾的多余符号
2019/11/19 Python
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
阿里云:Aliyun.com
2017/02/15 全球购物
英国家喻户晓的折扣商场:TK Maxx
2017/05/26 全球购物
意大利时尚精品店:Nugnes 1920
2020/02/10 全球购物
澳大利亚体育和露营装备在线/实体零售商:Find Sports
2020/06/03 全球购物
Linux的主要特性
2016/09/03 面试题
为什么Runtime.exec(“ls”)没有任何输出?
2014/10/03 面试题
成语的广告词
2014/03/19 职场文书
群众路线教师自我剖析材料
2014/09/29 职场文书
幼儿园园长安全责任书
2015/05/08 职场文书
幼儿园教师读书笔记
2015/06/29 职场文书
评估“风险”创业计划的几大要点
2019/08/12 职场文书
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS