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

<

html

>

  

<

head

>

    

<

meta

http-equiv

=

"Content-Type"

content

=

"text/html; charset=UTF-8"

/>

    

<

script

type

=

"text/javascript"

src

=

"jquery-1.12.1.js"

></

script

>

    

<

style

type

=

"text/css"

>

      

.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;

        

      

}

      

.bot_text span {

        

width: 52px;

        

text-align: center;

        

display: inline-block;

        

line-height: 18px;

      

}

    

</

style

>

  

</

head

>

  

<

body

>

    

<

br

/>

    

<

div

>

      

<

p

id

=

"PromptMessage"

style

=

"margin-left: 200px;"

>

          

新密码请至少使用字母、数字、符号两种<

br

/>类型组合的密码，长度为6~20位。</

p

>

      

<

input

type

=

"text"

id

=

"txtPassword"

style

=

"float: left;"

/

placeholder

=

"请输入密码"

>

      

<

div

style

=

"margin-left: 30px;font-size: 12px;float: left;"

>

        

<

div

class

=

"mainPrompt"

align

=

"center"

bgcolor

=

"#f5f5f5"

>

          

<

div

class

=

"listPrompt"

id

=

"strength_L"

style

=

"border-radius: 8px 0px 0px 8px;"

>

          

</

div

>

          

<

div

class

=

"listPrompt"

id

=

"strength_M"

>

          

</

div

>

          

<

div

class

=

"listPrompt"

id

=

"strength_H"

style

=

"margin-right: 0px;border-radius: 0 8px 8px 0;"

>

          

</

div

>

        

</

div

>

        

<

div

class

=

"bot_text"

>

          

<

span

id

=

"lowStrength"

>低</

span

> <

span

id

=

"midStrength"

>

            

中</

span

> <

span

id

=

"highStrength"

>高</

span

>

        

</

div

>

      

</

div

>

    

<

div

>

    

<

script

type

=

"text/javascript"

>

      

function JudgyPwdLevel(pwdStr) {

        

var hasNumber = 0;

        

var hasLetter = 0;

        

var hasSymbol = 0

        

if (pwdStr.length >= 6) {

          

for (var i = 0; i <

pwdStr.length

; i++) {

            

var

item

=

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());

      

});

 

    

</

script

>

  

</

body

>

</

html

>