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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
js对象的比较
Feb 26 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
JavaScript实现格式化字符串函数String.format
Dec 16 Javascript
基于jQuery实现的单行公告活动轮播效果
Aug 23 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
Vue.js原理分析之nextTick实现详解
Sep 07 Javascript
vue中封装axios并实现api接口的统一管理
Dec 25 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
肝肠寸断了解下!盘点史上最伤心的十大动漫
2020/03/04 日漫
用PHP的ob_start();控制您的浏览器cache!
2007/02/14 PHP
php 代码优化的42条建议 推荐
2009/09/25 PHP
通过php修改xml文档内容的方法
2015/01/23 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
js身份证验证超强脚本
2008/10/26 Javascript
为指定元素增加样式的js代码
2009/12/09 Javascript
javascript 子窗体父窗体相互传值方法
2010/05/31 Javascript
关于Javascript模块化和命名空间管理的问题说明
2010/12/06 Javascript
《JavaScript高级程序设计》阅读笔记(三) ECMAScript中的引用类型
2012/02/27 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
node.js中的fs.lchmodSync方法使用说明
2014/12/16 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
jquery无法为动态生成的元素添加点击事件的解决方法(推荐)
2016/12/26 Javascript
js中创建对象的几种方式
2017/02/05 Javascript
基于JavaScript实现微信抢红包功能
2017/07/20 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
JS实现面向对象继承的5种方式分析
2018/07/21 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
[05:15]DOTA2英雄梦之声_第16期_灰烬之灵
2014/06/21 DOTA
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
浅谈python中set使用
2016/06/30 Python
Python使用正则表达式抓取网页图片的方法示例
2017/04/21 Python
python的多重继承的理解
2017/08/06 Python
Python实现一个简单的验证码程序
2017/11/03 Python
神经网络python源码分享
2017/12/15 Python
python使用pygame框架实现推箱子游戏
2018/11/20 Python
Python 按字典dict的键排序,并取出相应的键值放于list中的实例
2019/02/12 Python
python Gunicorn服务器使用方法详解
2019/07/22 Python
python3+openCV 获取图片中文本区域的最小外接矩形实例
2020/06/02 Python
海信商城:海信电视、科龙空调、容声冰箱官方专卖
2017/02/07 全球购物
美国家居装饰店:Z Gallerie
2020/12/28 全球购物
党委书记岗位职责
2013/11/24 职场文书
西游降魔篇观后感
2015/06/15 职场文书
护士医德医风心得体会
2016/01/25 职场文书