js验证密码强度 js验证密码强度解析

时间:2021-04-21 weixin_44644573 人气:0

这篇文章我们来说一个验证密码强度的例子，大家在进入一个网站的时候，往往都会先注册一个账号，然后输入密码，在输密码的时候，系统会根据我们输入的密码组成的复杂程度来给你的密码显示一个密码强度，一般就是强中弱三种，我们先来说一下密码验证的原理，原理明白了，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";
  }

 }

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

加载全部内容