原生js实现密码强度验证功能


Posted in Javascript onMarch 18, 2020

我们在填写表单的时候,特别是输入密码的时候,经常看到实时显示密码强度的效果,那么这种效果如何通过我们的原生js实现呢?

思路:

1.密码通常是由数字,大写字母,小写字母以及特殊字符组成
2.密码全部是纯数字或者纯大写字母,或者纯小写字母,我们认为是密码强度较低
3.密码由两种混合,我们认为密码强度是中等的
4.密码由三种或者四种混合,我们认为这样的密码组合强度很强
5.通过判断输入的密码每个字符,如果是数字返回1;如果是大写字母,返回2;如果是小写字母,返回4;如果是特殊字符,则返回8(至于为什么选择返返回这些数字请看第六条);
6.初始化一个体现密码强度的变量为0,在二进制下表示也就是0000,将他与我们的返回值进行二进制相或运算
7.比如初始值0000
与数字的返回值1(0001)相或运算,等于0001;
与一个小写字母和大写字母组成的密码相或就是0110;
与大写字母,小写字母,数字组成的密码相或就是0111;
与大写字母,小写字母,数字,特殊字符的密码相或就是1111;
8.将相或结果赋值给这个初始值,通过判断这个值在二进制下有多少个1,就能判断对应密码强度(用0001与这个值做相并计算,同时做无符号右移运算,即可获得1的个数)

以上就是我们的思路,那么我们就可以开始书写我们的代码

①创建一个函数,判断输入值的每一个字符由什么组成的

function charMode(char){
 switch (true) {
  case (char>=48&&char<=57):
   return 1;
   break;
  case (char>=65&&char<=90):
   return 2;
   break;
   case (char>=97&&char<=122):
   return 4;
   break;

  default:
   return 8;
   break;
 } 
}

这里也可以用if else 来做判断,只是没有switch看起来这么爽,同时这里注意,switch()括号里传入的不是输入值,而是一个true;因为case后面返回的是一个布尔值,判断的是布尔值之间是否相等(switch做全等比较,不进行类型转换)

②创建一个函数,用于判断整个输入串的密码强度类型

function checkPsw(password){
 strengh=0;//定义一个全局变量用于检测密码强度
  for(var i=0;i<password.length;i++){   strengh|=charMode(password.charCodeAt(i));
 }
}

这里 |= 的意思是做相或运算,并赋值

③创建一个函数,计算密码强度

function charStrengh(strengh){
 var reference=0;
 for(var i=0;i<4;i++){
  if(strengh&1){
   reference++;
  }
  strengh>>>=1;//无符号右移一位继续匹配
 }
 return reference;
}

这里&1意思是与1(0001)做且运算,>>>=的意思是做无符号右移,比如0101无符号右移就是0010;再做一次无符号右移就是0001;

最后我们通过判断reference的数字就可以知道密码强度了,
再参考上一节的博客日志,实时验证输入内容,通过样式设置就可以达到密码强度实时验证效果了

总结:

在这里我们是通过判断键码来实现判断到底是数字还是大写字母还是小写字母,其实我们还可以使用强大的正则表达式来实现;
常用键码:
数字48-57
大写字母65-90
小写字母97-122

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

Javascript 相关文章推荐
JQuery的read函数与js的onload不同方式实现
Mar 18 Javascript
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
Jul 13 Javascript
Bootstarp风格的toggle效果分享
Feb 23 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
jQuery实现的模拟弹出窗口功能示例
Nov 24 Javascript
ES6新特性五:Set与Map的数据结构实例分析
Apr 21 Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 Javascript
vue几个常用跨域处理方式介绍
Feb 07 Javascript
vue中echarts3.0自适应的方法
Feb 26 Javascript
VUE实现可随意拖动的弹窗组件
Sep 25 Javascript
详解用Webpack与Babel配置ES6开发环境
Mar 12 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
JavaScript实现密码强度实时验证
Mar 18 #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
You might like
mysqli_set_charset和SET NAMES使用抉择及优劣分析
2013/01/13 PHP
php实现分页工具类分享
2014/01/09 PHP
PHP+FFMPEG实现将视频自动转码成H264标准Mp4文件
2014/09/24 PHP
Yii框架获取当前controlle和action对应id的方法
2014/12/03 PHP
php+mysql实现无限分类实例详解
2015/01/15 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
PHP根据树的前序遍历和中序遍历构造树并输出后序遍历的方法
2017/11/10 PHP
jquery 利用show和hidden实现级联菜单示例代码
2013/08/09 Javascript
Javascript 按位左移运算符使用介绍(
2014/02/04 Javascript
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
JavaScript每天必学之事件
2016/09/18 Javascript
详解NodeJs支付宝移动支付签名及验签
2017/01/06 NodeJs
jQuery实现倒计时重新发送短信验证码功能示例
2017/01/12 Javascript
jQuery的ajax中使用FormData实现页面无刷新上传功能
2017/01/16 Javascript
微信小程序自定义对话框弹出和隐藏动画
2018/07/19 Javascript
vue在路由中验证token是否存在的简单实现
2019/11/11 Javascript
序列化模块json代码实例详解
2020/03/03 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
PyQt5每天必学之日历控件QCalendarWidget
2018/04/19 Python
keras Lambda自定义层实现数据的切片方式,Lambda传参数
2020/06/11 Python
用css3制作纸张效果(外翻卷角)
2013/02/01 HTML / CSS
非洲NO.1网上商店:Jumia肯尼亚
2016/08/18 全球购物
匡威英国官网:Converse英国
2018/12/02 全球购物
Ancheer官方户外和运动商店:销售电动自行车
2019/08/07 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
开办饭店创业计划书
2013/12/28 职场文书
护理专业自荐书
2014/06/04 职场文书
2014年秋季开学典礼致辞
2014/08/02 职场文书
殡葬服务心得体会
2014/09/11 职场文书
个人总结与自我评价2015
2015/03/11 职场文书
2015年组织部工作总结
2015/04/03 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
pytorch实现线性回归以及多元回归
2021/04/11 Python
Python基础之元类详解
2021/04/29 Python
如何用 Python 子进程关闭 Excel 自动化中的弹窗
2021/05/07 Python