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 相关文章推荐
jQuery 动画弹出窗体支持多种展现方式
Apr 29 Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 Javascript
使用jquery动态加载js文件的方法
Dec 24 Javascript
学习JavaScript鼠标响应事件
Dec 25 Javascript
jQuery toggle 代替方法
Mar 22 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
Vue computed计算属性的使用方法
Jul 14 Javascript
vue router使用query和params传参的使用和区别
Nov 13 Javascript
JS开发自己的类库实例分析
Aug 28 Javascript
微信小程序scroll-view点击项自动居中效果的实现
Mar 25 Javascript
uniapp实现可滑动选项卡
Oct 21 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
PHP5与MySQL数据库操作常用代码 收集
2010/03/21 PHP
解析posix与perl标准的正则表达式区别
2013/06/17 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
php实现基于PDO的预处理示例
2017/03/28 PHP
php魔法函数与魔法常量使用介绍
2017/07/23 PHP
浅谈PHPANALYSIS提取关键字
2019/03/08 PHP
javascript 操作select下拉列表框的一点小经验
2010/03/20 Javascript
Javascript基础教程之关键字和保留字汇总
2015/01/18 Javascript
简述AngularJS的控制器的使用
2015/06/16 Javascript
解决jquery实现的radio重新选中的问题
2015/07/03 Javascript
jQuery常用知识点总结以及平时封装常用函数
2016/02/23 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
原生js实现验证码功能
2017/03/16 Javascript
javascript内存分配原理实例分析
2017/04/10 Javascript
12个非常有用的JavaScript技巧
2017/05/17 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
2018/05/02 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
Async/Await替代Promise的6个理由
2019/06/15 Javascript
Python Property属性的2种用法
2015/06/21 Python
利用pandas进行大文件计数处理的方法
2018/07/25 Python
Python数据可视化之画图
2019/01/15 Python
python操作小程序云数据库实现简单的增删改查功能
2019/06/06 Python
阿拉伯世界最大的电子商务网站:Souq沙特阿拉伯
2016/10/28 全球购物
伦敦著名的运动鞋综合商店:Footpatrol
2019/03/25 全球购物
个人委托书格式
2014/04/04 职场文书
2014年党员加强作风建设思想汇报
2014/09/15 职场文书
药品开票员岗位职责
2015/04/15 职场文书
寻衅滋事罪辩护词
2015/05/21 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书
MySQL系列之九 mysql查询缓存及索引
2021/07/02 MySQL
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
使用Oracle命令进行数据库备份与还原
2021/12/06 Oracle
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL