JS实现的四级密码强度检测功能示例


Posted in Javascript onMay 11, 2017

本文实例讲述了JS实现的四级密码强度检测功能。分享给大家供大家参考,具体如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
 <title> 密码强度检测 </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <style type="text/css">
 input{float: left; font-size: 14px; width: 250px; height: 25px; border: 1px solid #ccc; padding-left: 10px;}
 #tips{float: left; font-size: 12px; width: 400px; height: 25px; margin: 4px 0 0 20px;}
 #tips span{float: left; width: 40px; height: 20px; color: #fff; overflow:hidden; margin-right: 10px; background: #D7D9DD; line-height:20px; text-align: center; }
 #tips .s1{background: #F45A68;}/*红色*/
 #tips .s2{background: #fc0;}/*橙色*/
 #tips .s3{background: #cc0;}/*黄色*/
 #tips .s4{background: #14B12F;}/*绿色*/
 </style>
 </head>
 <body>
 <input type="text" id="password" value="" maxlength="16" />
 <div id="tips">
 <span>弱</span>
 <span>中</span>
 <span>强</span>
 <span>很强</span>
 </div>
</body>
 <script type="text/javascript">
 var password = document.getElementById("password"); //获取文本框的对象
 //var value = password.value; //获取用户在文本框里面填写的值
 //获取所有的span标签 返回值是一个数组
 var spanDoms = document.getElementsByTagName("span");
 password.onkeyup = function(){
  //获取用户输入的密码,然后判断其强度 返回0 或者 1 2 3 4
  var index = checkPassWord(this.value);
  for(var i = 0; i <spanDoms.length; i++){
   spanDoms[i].className = "";//清空span标签所有的class样式
   if(index){//0 代表false 其余代表true
    spanDoms[index-1].className = "s" + index ;
   }
  }
 }
 //校验密码强度
 function checkPassWord(value){
  // 0: 表示第一个级别 1:表示第二个级别 2:表示第三个级别
  // 3: 表示第四个级别 4:表示第五个级别
  var modes = 0;
  if(value.length < 6){//最初级别
   return modes;
  }
  if(/\d/.test(value)){//如果用户输入的密码 包含了数字
   modes++;
  }
  if(/[a-z]/.test(value)){//如果用户输入的密码 包含了小写的a到z
   modes++;
  }
  if(/[A-Z]/.test(value)){//如果用户输入的密码 包含了大写的A到Z
   modes++;
  }
  if(/\W/.test(value)){//如果是非数字 字母 下划线
   modes++;
  }
  switch(modes){
   case 1 :
    return 1;
    break;
   case 2 :
    return 2;
    break;
   case 3 :
    return 3;
    break;
   case 4 :
    return 4;
    break;
  }
 }
 </script>
</html>

说明: 这里实现的功能主要是,输入密码的时候,一边输一边检测,有四个安全级别,当输入的密码符合某个级别的规则时,该级别的标志条就会高亮变色。

下面是测试的情况,(这里为了能看到效果,所以把type=“password”故意改成type=“text”),至于检测中级别的规则,读者可以自己根据需要自行修改,主要是js正则表达式的修改。另外,当把最后一个图片的输入内容,逐步地删除,直到只剩第一个图片的输入内容,这一过程中,效果就是下面的 从下到上变化了

JS实现的四级密码强度检测功能示例

JS实现的四级密码强度检测功能示例

JS实现的四级密码强度检测功能示例

JS实现的四级密码强度检测功能示例

Javascript 相关文章推荐
[原创]IE view-source 无法查看看源码 JavaScript看网页源码
Jul 19 Javascript
jquery设置控件位置的方法
Aug 21 Javascript
通过jquery 获取URL参数并进行转码
Aug 18 Javascript
JS实现的另类手风琴效果网页内容切换代码
Sep 08 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
React Native悬浮按钮组件的示例代码
Apr 05 Javascript
微信小程序商品详情页的底部弹出框效果
Nov 16 Javascript
jQuery实现的简单歌词滚动功能示例
Jan 07 jQuery
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 Javascript
layui字体图标 loading图标静止不旋转的解决方法
Sep 23 Javascript
微信小程序实现聊天室
Aug 21 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
详解Vue中状态管理Vuex
May 11 #Javascript
JS简单生成随机数(随机密码)的方法
May 11 #Javascript
ionic实现下拉刷新载入数据功能
May 11 #Javascript
vue2的todolist入门小项目的详细解析
May 11 #Javascript
ionic实现底部分享功能
May 11 #Javascript
学习使用Bootstrap栅格系统
May 11 #Javascript
jQuery实现的简单在线计算器功能
May 11 #jQuery
You might like
PHP的博客ping服务代码
2012/02/04 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
ThinkPHP开发--使用七牛云储存
2017/09/14 PHP
一个不错的用JavaScript实现的UBB编码函数
2007/03/09 Javascript
flash javascript之间的通讯方法小结
2008/12/20 Javascript
Node.js中的事件驱动编程详解
2014/08/16 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
JavaScript组成、引入、输出、运算符基础知识讲解
2016/12/08 Javascript
jQueryeasyui 中如何使用datetimebox 取两个日期间相隔的天数
2017/06/13 jQuery
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
基于IView中on-change属性的使用详解
2018/03/15 Javascript
你应该了解的JavaScript Array.map()五种用途小结
2018/11/14 Javascript
angular中两种表单的区别(响应式和模板驱动表单)
2018/12/06 Javascript
微信小程序API—获取定位的详解
2019/04/30 Javascript
node.js express框架简介与实现
2019/07/23 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
解决vue加scoped后就无法修改vant的UI组件的样式问题
2020/09/07 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python基础中所出现的异常报错总结
2016/11/19 Python
python3实现ftp服务功能(客户端)
2017/03/24 Python
PyCharm设置注释字体颜色以及是否倾斜的操作
2020/09/16 Python
Html5游戏开发之乒乓Ping Pong游戏示例(二)
2013/01/21 HTML / CSS
美国最大的宠物药店:1-800-PetMeds
2016/10/02 全球购物
纽约JewelryAffairs珠宝店:精细金银时尚首饰
2017/02/05 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
毕业生自我推荐
2013/11/04 职场文书
前台领班岗位职责
2013/12/04 职场文书
无犯罪记录证明范本
2014/09/15 职场文书
食堂管理制度范本
2015/08/04 职场文书
2016秋季小学开学寄语
2015/12/03 职场文书
读《瓦尔登湖》有感:每个人都需要一个瓦尔登湖
2019/10/17 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
代码解析React中setState同步和异步问题
2021/06/03 Javascript