189 8069 5689

js验证密码强度解析

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

专注于为中小企业提供网站设计制作、做网站服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业泾县免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了成百上千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

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

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

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

写代码吧：

html：


 
 

 
弱

 
中

 
强

css：

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";
  }

 }

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

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


分享名称：js验证密码强度解析
文章起源：http://cdxtjz.cn/article/ghjdoe.html

其他资讯