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 相关文章推荐
非jQuery实现照片散落桌子上,单击放大的LightBox效果
Nov 28 Javascript
Javascript基础教程之数据类型 (字符串 String)
Jan 18 Javascript
Javascript动画的实现原理浅析
Mar 02 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
js运动事件函数详解
Oct 21 Javascript
基于vue.js实现侧边菜单栏
Mar 20 Javascript
vue.js加载新的内容(实例代码)
Jun 01 Javascript
基于rem的移动端响应式适配方案(详解)
Jul 07 Javascript
vue给组件传递不同的值方法
Sep 29 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
Vue表单绑定的实例代码(单选按钮,选择框(单选时,多选时,用 v-for 渲染的动态选项)
May 13 Javascript
Javascript执行流程细节原理解析
May 14 Javascript
详解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
2006/10/09 PHP
PHP 采集程序中常用的函数
2009/12/09 PHP
thinkphp数据查询和遍历数组实例
2014/11/28 PHP
php进行md5加密简单实例方法
2019/09/19 PHP
jQuery 表格插件整理
2010/04/27 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
javascript实现按回车键切换焦点
2015/02/09 Javascript
基于jQuery实现仿淘宝套餐选择插件
2015/03/04 Javascript
jQuery插件Skippr实现焦点图幻灯片特效
2015/04/12 Javascript
js获取本机操作系统类型的两种方法
2015/12/19 Javascript
基于Bootstrap里面的Button dropdown打造自定义select
2016/05/30 Javascript
JS动态给对象添加事件的简单方法
2016/07/19 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
2016/12/08 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
搭建vue开发环境
2018/07/19 Javascript
javascript数组常见操作方法实例总结【连接、添加、删除、去重、排序等】
2019/06/13 Javascript
微信小程序绑定手机号获取验证码功能
2019/10/22 Javascript
Vue中jsx不完全应用指南小结
2019/11/01 Javascript
Ant-design-vue Table组件customRow属性的使用说明
2020/10/28 Javascript
详解 Python中LEGB和闭包及装饰器
2017/08/03 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
python3获取两个日期之间所有日期,以及比较大小的实例
2018/04/08 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Pandas中Series和DataFrame的索引实现
2019/06/27 Python
Android Q之气泡弹窗的实现示例
2020/06/23 Python
Python configparser模块应用过程解析
2020/08/14 Python
详解CSS3中字体平滑处理和抗锯齿渲染
2017/03/29 HTML / CSS
C#基础面试题
2016/10/17 面试题
大学生创业项目方案
2014/03/08 职场文书
公益广告语集锦
2014/03/13 职场文书
年终总结会主持词
2014/03/25 职场文书
家长对孩子的评语
2014/04/18 职场文书
天下第一关导游词
2015/02/06 职场文书
Java Optional<Foo>转换成List<Bar>的实例方法
2021/06/20 Java/Android
java实现面板之间切换功能
2022/06/10 Java/Android