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 相关文章推荐
javascript 同时在IE和FireFox获取KeyCode的代码
Feb 07 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
js中replace的用法总结
Dec 27 Javascript
使用JS取得焦点(focus)元素代码
Mar 22 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
js判断鼠标左、中、右键哪个被点击的方法
Jan 27 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
谈谈PHP中相对路径的问题与绝对路径的使用
Aug 16 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
Nov 13 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
详解vue3.0 diff算法的使用(超详细)
Jul 01 Javascript
解决Vue-Router升级导致的Uncaught (in promise)问题
Aug 07 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
Protoss热键控制
2020/03/14 星际争霸
Zend framework处理一个http请求的流程分析
2010/02/08 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
JavaScript使用prototype定义对象类型(转)[
2006/12/22 Javascript
Apply an AutoFormat to an Excel Spreadsheet
2007/06/12 Javascript
Prototype 学习 工具函数学习($A方法)
2009/07/12 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
jQGrid动态填充select下拉框的选项值(动态填充)
2016/11/28 Javascript
基于JQuery及AJAX实现名人名言随机生成器
2017/02/10 Javascript
js移动端事件基础及常用事件库详解
2017/08/15 Javascript
微信小程序实现即时通信聊天功能的实例代码
2018/08/17 Javascript
vue3.0 CLI - 2.3 - 组件 home.vue 中学习指令和绑定
2018/09/14 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
vue插槽slot的理解和使用方法
2019/04/03 Javascript
js实现图片上传即时显示效果
2019/09/30 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
详解JavaScript中的Object.is()与&quot;===&quot;运算符总结
2020/06/17 Javascript
解决Can't find variable: SockJS vue项目的问题
2020/09/22 Javascript
vant时间控件使用方法详解
2020/12/24 Javascript
windows下python模拟鼠标点击和键盘输示例
2014/02/28 Python
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
Python中类的初始化特殊方法
2017/12/01 Python
一百多行python代码实现抢票助手
2018/09/25 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
python3.6数独问题的解决
2019/01/21 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Django设置Postgresql的操作
2020/05/14 Python
解决python中0x80072ee2错误的方法
2020/07/19 Python
升职自荐信范文
2013/10/05 职场文书
联欢晚会主持词
2014/03/25 职场文书
土木工程求职信
2014/05/29 职场文书
高效课堂教学反思
2016/02/24 职场文书