密码强度提示

< html >
< head >
< style >
body
{}{
    /**//*ie needs this*/
    margin:0px;
    padding:0px;
    /**//*set global font settings*/
    font-size:10px;
    font-family:Tahoma,Verdana,Arial;
}
a:hover
{}{
    color:#fff;
}

#user_registration
{}{
    border:1px solid #cccccc;
    margin:auto auto;
    margin-top:100px;
    width:400px;
}


#user_registration label
{}{
        display: block;  /**//* block float the labels to left column, set a width */
    float: left; 
    width: 70px;
    margin: 0px 10px 0px 5px; 
    text-align: right; 
    line-height:1em;
    font-weight:bold;
}

#user_registration input
{}{
    width:250px;
}

#user_registration p
{}{
    clear:both;
}

#submit
{}{
    border:1px solid #cccccc;
    width:100px !important;
    margin:10px;
}

h1
{}{
    text-align:center;
}

#passwordStrength
{}{
    height:10px;
    display:block;
    float:left;
}

.strength0
{}{
    width:250px;
    background:#cccccc;
}

.strength1
{}{
    width:50px;
    background:#ff0000;
}

.strength2
{}{
    width:100px;    
    background:#ff5f5f;
}

.strength3
{}{
    width:150px;
    background:#56e500;
}

.strength4
{}{
    background:#4dcd00;
    width:200px;
}

.strength5
{}{
    background:#399800;
    width:250px;
}


</ style >
</ style >

< script >
function passwordStrength(password)
{
    var desc = new Array();
    desc[0] = "Very Weak";
    desc[1] = "Weak";
    desc[2] = "Better";
    desc[3] = "Medium";
    desc[4] = "Strong";
    desc[5] = "Strongest";

    var score   = 0;

    //if password bigger than 6 give 1 point
    if (password.length > 6) score++;

    //if password has both lower and uppercase characters give 1 point    
    if ( ( password.match(/[a-z]/) ) && ( password.match(/[A-Z]/) ) ) score++;

    //if password has at least one number give 1 point
    if (password.match(/\d+/)) score++;

    //if password has at least one special caracther give 1 point
    if ( password.match(/.[!,@,#,$,%,^,&,*,?,_,~,-,(,)]/) )    score++;

    //if password bigger than 12 give another 1 point
    if (password.length > 12) score++;

     document.getElementById("passwordDescription").innerHTML = desc[score];
     document.getElementById("passwordStrength").className = "strength" + score;
}
</ script >
</ head >
< body >

< form  method ="post"  action =""  id ="user_registration"  name ="user_registration" >
         < p >< h1 > Password strength metter </ h1 ></ p >
         < p >     
             < label  for ="pass" > Password </ label >< input  type ="password"  name ="pass"  id ="pass"  onkeyup ="passwordStrength(this.value)" />
             
         </ p >
         < p >     
         < label  for ="pass2" > Confirm Password </ label >< input  type ="password"  name ="pass2"  id ="pass2" />
         </ p >
         < p >
             < label  for ="passwordStrength" > Password strength </ label >
             < div  id ="passwordDescription" > Password not entered </ div >
             < div  id ="passwordStrength"  class ="strength0" ></ div >
         </ p >
         < p >     
         < input  type ="submit"  name ="submit"  id ="submit"  value ="Register" >
         </ p >
</ form >     

</ body >
</ html >

转载于:https://www.cnblogs.com/craig/archive/2008/05/23/1205845.html