JavaScript实现密码强度实时验证


Posted in Javascript onMarch 18, 2020

JavaScript实现密码强度实时验证,供大家参考,具体内容如下

在网络服务中,为了保证用户的私密信息足够安全,会要求用户输入具有一定安全级别的密码,这样可以更好的防止他人盗用。比如在注册一些游戏账号时,如果输入纯数字或纯英文字符低于6位,就会提示密码强度太低,请重新输入。一些密码强度验证的方法都是计算字符的类型,然后分类加权累算。权重越高,相应的强度也就越高。

具体的写法及实现方式有很多种,本文只介绍其中一种方案

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>密码强度实时验证</title>

</head>
<body>
 <h2>密码强度实时验证</h2>
 <input id="passwordStrength" data-hint='请输入密码' type="password" ><span id="showStrength"></span>

 <script type="text/javascript">

  window.onload = function () {
   function setCss(_this,cssOption){
   //判断节点类型
   if (!_this || _this.nodeType ===3 || _this.nodeType === 8 ||!_this.style) {
    return;
   }
   for(var cs in cssOption){
    _this.style[cs] = cssOption[cs];
   }
   return _this;
  } 

  function trim(chars){
   return (chars ||"").replace(/^(\s|\u00a0)+|(\s|\u00a0)+$/g,"");
  }
  function passwordStrength(passwordStrength,showStrength){
   var self = this;

   /*字符权重;
   数字1,字母2,其他字符为3
   当密码长度小于6时不符合标准
   长度>=6,强度小于10,强度弱
   长度>=6,长度>=10且<15,强度中
   长度>=6,强度>=15,强*/
   passwordStrength.onkeyup = function(){
    var _color = ["red","yellow","orange","green"],
      msgs = ["密码太短","弱","中","强"],
      _strength = 0,
      _v= trim(passwordStrength.value)
    _vL= _v.length,
      i=0;

    var charStrength = function(char){
     //计算单个字符强度
     if(char>=48 && char <=57){//数字
      return 1;
     }
     if(char>=97 && char<=122){//小写
      return 2;
     }else{
      return 3; //特殊字符
     }
    }

    if(_vL<6){//计算模式
     showStrength.innerText = msgs[0];
     setCss(showStrength,{
      "color":_color[0]
     })
    }else{
     for(;i<_vL;i++){
      //遍历字符
      _strength+=charStrength(_v.toLocaleLowerCase().charCodeAt(i));
     }
     if(_strength<10){
      //强度小于10
      showStrength.innerText = msgs[1];
      setCss(showStrength,{
       "color":_color[1]
      })
     }
     if(_strength>=10&&_strength<15){
      showStrength.innerText = msgs[2];
      setCss(showStrength,{
       "color":_color[2]
      })
     }
     if(_strength>=15){
      showStrength.innerText = msgs[3];
      setCss(showStrength,{
       "color":_color[3]
      })
     }
    }
   }
  }
  passwordStrength(
    document.getElementById("passwordStrength"),
    document.getElementById("showStrength"));

 };
 </script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js+cookies实现悬浮购物车的方法
May 25 Javascript
jQuery实用技巧必备(中)
Nov 03 Javascript
Angularjs中UI Router全攻略
Jan 29 Javascript
又一枚精彩的弹幕效果jQuery实现
Jul 25 Javascript
详解vue 配合vue-resource调用接口获取数据
Jun 22 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
javascript实现电脑和手机版样式切换
Nov 10 Javascript
Angular2进阶之如何避免Dom误区
Apr 02 Javascript
vue.js将时间戳转化为日期格式的实现代码
Jun 05 Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 Javascript
微信小程序实现文字跑马灯
May 26 Javascript
Vuex的各个模块封装的实现
Jun 05 Javascript
js如何验证密码强度
Mar 18 #Javascript
js验证密码强度解析
Mar 18 #Javascript
js实现超级玛丽小游戏
Mar 18 #Javascript
vue 封装 Adminlte3组件的实现
Mar 18 #Javascript
JavaScript仿京东秒杀倒计时
Mar 17 #Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 #Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 #Javascript
You might like
php加密解密函数authcode的用法详细解析
2013/10/28 PHP
使用PHP备份MYSQL数据的多种方法
2014/01/15 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
使用PHP反射机制来构造&quot;CREATE TABLE&quot;的sql语句
2019/03/21 PHP
javascript的键盘控制事件说明
2008/04/15 Javascript
jQuery在vs2008及js文件中的无智能提示的解决方法
2010/12/30 Javascript
Web表单提交之disabled问题js解决方法
2015/01/13 Javascript
浅谈JSON中stringify 函数、toJosn函数和parse函数
2015/01/26 Javascript
JS实现让访问者自助选择网页文字颜色的方法
2015/02/24 Javascript
用js编写的简单的计算器代码程序
2015/08/04 Javascript
深入JavaScript高级程序设计之对象、数组(栈方法,队列方法,重排序方法,迭代方法)
2015/12/01 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
jQuery插件EasyUI实现Layout框架页面中弹出窗体到最顶层效果(穿越iframe)
2016/08/05 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
js实现随机数字字母验证码
2017/06/19 Javascript
用vue构建多页面应用的示例代码
2017/09/20 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
在vue中动态修改css其中一个属性值操作
2020/12/07 Vue.js
[56:35]DOTA2上海特级锦标赛主赛事日 - 5 总决赛Liquid VS Secret第一局
2016/03/06 DOTA
[01:30]我们共输赢 完美世界城市挑战赛开启全新赛季
2019/04/19 DOTA
解读Python编程中的命名空间与作用域
2015/10/16 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
对python3 Serial 串口助手的接收读取数据方法详解
2019/06/12 Python
python 读取二进制 显示图片案例
2020/04/24 Python
python 通过文件夹导入包的操作
2020/06/01 Python
详解使用scrapy进行模拟登陆三种方式
2021/02/21 Python
详解HTML5中的manifest缓存使用
2015/09/09 HTML / CSS
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
工业自动化专业自荐信范文
2014/04/10 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
用php如何解决大文件分片上传问题
2021/07/07 PHP
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android