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 相关文章推荐
js function定义函数使用心得
Apr 15 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
利用javascript判断文件是否存在
Dec 31 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
javascript实现瀑布流加载图片原理
Feb 02 Javascript
JS获取屏幕高度的简单实现代码
May 24 Javascript
微信小程序报错:this.setData is not a function的解决办法
Sep 27 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
浅谈JS和jQuery的区别
Mar 27 jQuery
layui递归实现动态左侧菜单
Jul 26 Javascript
nuxt静态部署打包相对路径操作
Nov 06 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 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
IP攻击升级,程序改进以对付新的攻击
2010/11/23 PHP
深入理解ob_flush和flush的区别(ob_flush()与flush()使用方法)
2013/02/06 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
PHP判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
php技巧小结【推荐】
2017/01/19 PHP
PHPMailer ThinkPHP实现自动发送邮件功能
2018/06/10 PHP
php微信开发之谷歌测距
2018/06/14 PHP
Ctrl+Enter提交内容信息
2006/06/26 Javascript
硬盘浏览程序,保存成网页格式便可使用
2006/12/03 Javascript
Prototype Template对象 学习
2009/07/19 Javascript
解析dom中的children对象数组元素firstChild,lastChild的使用
2013/07/10 Javascript
客户端js判断文件类型和文件大小即限制上传大小
2013/11/20 Javascript
js中window.open()的所有参数详细解析
2014/01/09 Javascript
jQueryMobile之Helloworld与页面切换的方法
2015/02/04 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
javascript结合Flexbox简单实现滑动拼图游戏
2016/02/18 Javascript
基于jQuery的Web上传插件Uploadify使用示例
2016/05/19 Javascript
vue.js全局API之nextTick全面解析
2017/07/07 Javascript
vue 组件中slot插口的具体用法
2018/04/03 Javascript
详解express + mock让前后台并行开发
2018/06/06 Javascript
js中Array对象的常用遍历方法详解
2019/01/17 Javascript
微信小程序后端无法保持session的原因及解决办法问题
2020/03/20 Javascript
深入理解Python分布式爬虫原理
2017/11/23 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
Python使用configparser库读取配置文件
2020/02/22 Python
python 串行执行和并行执行实例
2020/04/30 Python
Django项目在pycharm新建的步骤方法
2021/03/02 Python
HTML5 Canvas 实现K线图的示例代码
2019/12/23 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
求两个数的乘积和商数,该作用由宏定义来实现
2013/03/13 面试题
校长就职演讲稿
2014/01/06 职场文书
办理护照介绍信
2014/01/16 职场文书
公司请假条范文
2014/04/11 职场文书
事业单位考核材料
2014/05/21 职场文书
会计学自荐信
2014/06/03 职场文书
幼儿园学前班幼儿评语
2014/12/29 职场文书