密码强度有4个状态，分别如下图。

无密码状态

密码低级状态

密码中级状态

密码高级状态

实现的代码主要如下：

HTML代码

CSS代码

.pwd{width:50px;height:20px;line-height:14px;padding-top:2px;}

.pwd_f{color:#BBBBBB;}

.pwd_c{background-color:#F3F3F3;border-top:1px solid #D0D0D0;border-bottom:1px solid #D0D0D0;border-left:1px solid #D0D0D0;}

.pwd_Weak_c{background-color:#FF4545;border-top:1px solid #BB2B2B;border-bottom:1px solid #BB2B2B;border-left:1px solid #BB2B2B;}

.pwd_Medium_c{background-color:#FFD35E;border-top:1px solid #E9AE10;border-bottom:1px solid #E9AE10;border-left:1px solid #E9AE10;}

.pwd_Strong_c{background-color:#3ABB1C;border-top:1px solid #267A12;border-bottom:1px solid #267A12;border-left:1px solid #267A12;}

.pwd_c_r{border-right:1px solid #D0D0D0;}

.pwd_Weak_c_r{border-right:1px solid #BB2B2B;}

.pwd_Medium_c_r{border-right:1px solid #E9AE10;}

.pwd_Strong_c_r{border-right:1px solid #267A12;}

JS代码

function CheckIntensity(pwd) {

var Mcolor, Wcolor, Scolor, Color_Html;

var m = 0;

//匹配数字

if (/\d+/.test(pwd)) {

debugger;

m++;

};

//匹配字母

if (/[A-Za-z]+/.test(pwd)) {

m++;

};

//匹配除数字字母外的特殊符号

if (/[^0-9a-zA-Z]+/.test(pwd)) {

m++;

};

if (pwd.length <= 6) { m = 1; }

if (pwd.length <= 0) { m = 0; }

switch (m) {

case 1:

Wcolor = "pwd pwd_Weak_c";

Mcolor = "pwd pwd_c";

Scolor = "pwd pwd_c pwd_c_r";

Color_Html = "弱";

break;

case 2:

Wcolor = "pwd pwd_Medium_c";

Mcolor = "pwd pwd_Medium_c";

Scolor = "pwd pwd_c pwd_c_r";

Color_Html = "中";

break;

case 3:

Wcolor = "pwd pwd_Strong_c";

Mcolor = "pwd pwd_Strong_c";

Scolor = "pwd pwd_Strong_c pwd_Strong_c_r";

Color_Html = "强";

break;

default:

Wcolor = "pwd pwd_c";

Mcolor = "pwd pwd_c pwd_f";

Scolor = "pwd pwd_c pwd_c_r";

Color_Html = "无";

break;

}

document.getElementById('pwd_Weak').className = Wcolor;

document.getElementById('pwd_Medium').className = Mcolor;

document.getElementById('pwd_Strong').className = Scolor;

document.getElementById('pwd_Medium').innerHTML = Color_Html;

}

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