原生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 相关文章推荐
js实现上传图片之上传前预览图片
Mar 25 Javascript
firefox浏览器不支持innerText的解决方法
Aug 07 Javascript
JS 通过系统时间限定动态添加 select option的实例代码
Jun 09 Javascript
Extjs 点击复选框在表格中增加相关信息行
Jul 12 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
如何处理JSON中的特殊字符
Nov 30 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
Jan 20 Javascript
JavaScript 总结几个提高性能知识点(推荐)
Feb 20 Javascript
vux uploader 图片上传组件的安装使用方法
May 15 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
bootstrap与pagehelper实现分页效果
Dec 29 Javascript
浅谈js中的bind
Mar 18 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
PHP编程与应用
2006/10/09 PHP
关于PHP5 Session生命周期介绍
2010/03/02 PHP
去掉destoon资讯内容页keywords关键字自带的文章标题的方法
2014/08/21 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
JS小框架 fly javascript framework
2009/11/26 Javascript
JavaScript关于select的相关操作说明
2010/01/13 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
brook javascript框架介绍
2011/10/10 Javascript
jQuery实现加入购物车飞入动画效果
2015/03/14 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
2015/08/26 Javascript
jQuery中的on与bind绑定事件区别实例详解
2017/02/28 Javascript
jQuery插件MovingBoxes实现左右滑动中间放大图片效果
2017/02/28 Javascript
详解webpack+vue-cli项目打包技巧
2017/06/17 Javascript
video.js 实现视频只能后退不能快进的思路详解
2018/08/09 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
js生成1到100的随机数最简单的实现方法
2020/02/07 Javascript
解决vue 给window添加和移除resize事件遇到的坑
2020/07/21 Javascript
python字典多条件排序方法实例
2014/06/30 Python
python处理文本文件实现生成指定格式文件的方法
2014/07/31 Python
Python创建日历实例
2014/08/21 Python
进一步探究Python中的正则表达式
2015/04/28 Python
Python3实现带附件的定时发送邮件功能
2020/12/22 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Python实现根据日期获取当天凌晨时间戳的方法示例
2019/04/09 Python
python and or用法详解
2019/06/26 Python
解决django服务器重启端口被占用的问题
2019/07/26 Python
使用pyinstaller逆向.pyc文件
2019/12/20 Python
Python处理PDF与CDF实例
2020/02/26 Python
python中wheel的用法整理
2020/06/15 Python
python3让print输出不换行的方法
2020/08/24 Python
Python web框架(django,flask)实现mysql数据库读写分离的示例
2020/11/18 Python
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
Habitat家居英国官方网站:沙发、家具、照明、厨房和户外
2019/12/12 全球购物
长城导游词300字
2015/01/30 职场文书
2015年环保局工作总结
2015/05/22 职场文书
Django一小时写出账号密码管理系统
2021/04/29 Python