详解jQuery密码强度验证控件的使用

时间：2022-06-25 17:23:39 编辑：袖梨来源：一聚教程网

本文实例为大家分享了jQuery密码强度验证控件，供大家参考，具体内容如下

代码如下

复制代码

javascript"src="jquery-1.12.1.js">

.mainPrompt {

border: #999 solid 1px;

border-radius: 13px;

overflow: hidden;

padding: 1px 2px;

display: inline-block;

height: 20px;

}

.listPrompt {

float: left;

height: 20px;

width: 56px;

margin-right: 2px;

background-color: #eeeeee;

}

.bot_text span {

width: 52px;

text-align: center;

display: inline-block;

line-height: 18px;

}

新密码请至少使用字母、数字、符号两种
类型组合的密码，长度为6~20位。

低

中高

function JudgyPwdLevel(pwdStr) {

var hasNumber = 0;

var hasLetter = 0;

var hasSymbol = 0

if (pwdStr.length >= 6) {

for (var i = 0; i

varitem=pwdStr[i];

if (item >= '0' && item <= '9') { hasNumber = 1; }

else if ((item >= 'a' && item <= "z") || (item >= 'A' && item < "Z")) { hasLetter = 1; }

else { hasSymbol = 1; }

}

return hasLetter + hasNumber + hasSymbol;

}

//显示颜色

function pwStrength(pwd) {

O_color = "#eeeeee";

L_color = "#FF0000";

M_color = "#FF9900";

H_color = "#33CC00";

if (pwd == null || pwd == '') {

Lcolor = Mcolor = Hcolor = O_color;

}

else {

S_level = JudgyPwdLevel(pwd);

switch (S_level) {

case 0:

Lcolor = Mcolor = Hcolor = O_color;

case 1:

Lcolor = L_color;

Mcolor = Hcolor = O_color;

break;

case 2:

Lcolor = L_color;

Mcolor = M_color;

Hcolor = O_color;

break;

default:

Lcolor = L_color;

Mcolor = M_color;

Hcolor = H_color;

}

document.getElementById("strength_L").style.background = Lcolor;

document.getElementById("strength_M").style.background = Mcolor;

document.getElementById("strength_H").style.background = Hcolor;

return;

}

$("#txtPassword").keyup(function(e){

pwStrength($(e.target).val());

});

推荐专题

最新下载

热门教程

详解jQuery密码强度验证控件的使用

相关文章

热门栏目

php教程

asp.net教程

手机开发

css教程

网页制作

办公数码

jsp教程