主页 / 网络编程 /

js验证密码强度解析

网络编程 2021-07-04 15:02www.168986.cn编程入门
这篇文章主要为大家详细介绍了js验证密码强度，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

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

 }

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。

上一篇：js如何验证密码强度 下一篇：js实现超级玛丽小游戏

编程语言

Copyright © 2016-2025 www.168986.cn 狼蚁网络 版权所有 Power by