js验证密码强度解析


Posted in Javascript onMarch 18, 2020

这篇文章我们来说一个验证密码强度的例子,大家在进入一个网站的时候,往往都会先注册一个账号,然后输入密码,在输密码的时候,系统会根据我们输入的密码组成的复杂程度来给你的密码显示一个密码强度,一般就是强中弱三种,我们先来说一下密码验证的原理,原理明白了,js代码就好写了,今天的代码会用到正则表达式。

首先说一下密码强度的三种等级是如何划分的?

弱:一般就是纯数字或纯小写字母或者纯大写字母组成的,这种密码较简单,所以安全等级为弱。
中:由上述情况中的任意两种组成的密码强度为中。
强:上述三种情况都有。

再来说一下表示强中弱的三个div随着密码的输入来显示对应的强度,首先我们先写一个class名为active的样式,颜色随便写一下,然后判断完输入的密码强度等级之后,把对应的强度的div的class名改为active就可以了。

写代码吧:

html:

<div id = 'div1'>
 <input type="text" id = 'password' placeholder="密码"/>
 <div id = 'intension'>
 <div>弱</div>
 <div>中</div>
 <div>强</div>
 </div>
</div>

css:

<style>
 #div1{width: 350px; height: 200px; background-color: orange; border: 1px solid black; margin: 100px auto; text-align: center; padding-top: 50px}
 #intension div{background-color: gray; width: 80px; height: 20px; text-align: center; line-height: 20px; margin: 5px; float: left; }
 #intension{width: 270px; margin-left: 40px}
 #password{width: 300px; height: 30px; font-size: 18px;}
 #intension .active{background-color: pink}
</style>

js代码:

万年不变的获取id:

var oPassword = document.getElementById("password");
var oDiv = document.getElementById("intension");
var nodes = oDiv.getElementsByTagName("div");

然后用正则表达式来判断密码强度

oPassword.onkeyup = function(){
var oValue = oPassword.value;

  for(var i = 0; i < nodes.length; i++){
  nodes[i].className = '';
  } 

  if(/\d/.test(oValue) && /[a-z]/.test(oValue) && /[A-Z]/.test(oValue)){
  nodes[2].className = "active";
  }else if(/^\d+$/.test(oValue) || /^[A-Z]+$/.test(oValue) || /^[a-z]+$/.test(oValue)){
  nodes[0].className = "active";
  }else{
  nodes[1].className = "active";
  }

 }

这样我们的验证密码强度就完成了!

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

Javascript 相关文章推荐
firefo xml 读写实现js代码
Jun 11 Javascript
javascript操作符&quot;!~&quot;详解
Feb 10 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
使用Javascript实现选择下拉菜单互移并排序
Feb 23 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
原生js实现吸顶效果
Mar 13 Javascript
Bootstrap datepicker日期选择器插件使用详解
Jul 26 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
深入浅析vue全局环境变量和模式
Apr 28 Javascript
如何在面试中手写出javascript节流和防抖函数
Oct 22 Javascript
js实现超级玛丽小游戏
Mar 18 #Javascript
vue 封装 Adminlte3组件的实现
Mar 18 #Javascript
JavaScript仿京东秒杀倒计时
Mar 17 #Javascript
JavaScript写个贪吃蛇小游戏(超详细)
Mar 17 #Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 #Javascript
js实现简单点赞操作
Mar 17 #Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 #Javascript
You might like
获得Google PR值的PHP代码
2007/01/28 PHP
不错的PHP学习之php4与php5之间会穿梭一点点感悟
2007/05/03 PHP
PHP数组交集的优化代码分析
2011/03/06 PHP
基于win2003虚拟机中apache服务器的访问
2017/08/01 PHP
实例分析javascript中的call()和apply()方法
2014/11/28 Javascript
jquery仿百度百科底部浮动导航特效
2015/08/08 Javascript
JavaScript 对象字面量讲解
2016/06/06 Javascript
javascript操作cookie
2017/01/17 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
限时抢购-倒计时的完整实例(分享)
2017/09/17 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
Redux实现组合计数器的示例代码
2018/07/04 Javascript
Vue开发实现吸顶效果的示例代码
2018/08/21 Javascript
socket io与vue-cli的结合使用的示例代码
2018/11/01 Javascript
微信小程序遍历Echarts图表实现多个饼图
2019/04/25 Javascript
微信小程序云开发之使用云数据库
2019/05/17 Javascript
vue中keep-alive内置组件缓存的实例代码
2020/04/16 Javascript
详解Vue Cli浏览器兼容性实践
2020/06/08 Javascript
Vertx基于EventBus发送接受自定义对象
2020/11/16 Javascript
[01:10:48]完美世界DOTA2联赛PWL S2 GXR vs PXG 第一场 11.18
2020/11/18 DOTA
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
对pandas中时间窗函数rolling的使用详解
2018/11/28 Python
python中partial()基础用法说明
2018/12/30 Python
python使用BeautifulSoup与正则表达式爬取时光网不同地区top100电影并对比
2019/04/15 Python
浅谈keras中Dropout在预测过程中是否仍要起作用
2020/07/09 Python
python 调用Google翻译接口的方法
2020/12/09 Python
浅析HTML5:'data-'属性的作用
2018/01/23 HTML / CSS
自动化系在校本科生求职信
2013/10/23 职场文书
生物专业个人自荐信范文
2013/11/29 职场文书
物流创业计划书
2014/02/01 职场文书
人事经理岗位职责范本
2014/08/04 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
建议书格式
2015/02/04 职场文书
解析python中的jsonpath 提取器
2022/01/18 Python