I have a function which verifies the Password field and suggests the user to enter a strong password. I also have a label named Password Strength, referring to the strength of a password (very weak, weak, medium, etc).

Code:

<tr>
<%= label "Password",:mandatory=>true %>
<td>

<input id="user_password" type="password" size="30" name="user[password]"  onkeyup="chkPasswordStrength(this.value,document.getElementById('strendth'),document.getElementById('error'))">
                 
</td>

<td id="strendth" class="strength5"><b>Password Strength</td>
    
</tr>
<tr><td></td>

My JavaScript:

function chkPasswordStrength(txtpass,strenghtMsg,errorMsg)
   {
     var desc = new Array();
     desc[0] = "Very Weak";
     desc[1] = "Weak";
     desc[2] = "Better";
     desc[3] = "Medium";
     desc[4] = "Strong";
     desc[5] = "Strongest";
   
     errorMsg.innerHTML = ''
     var score   = 0;

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

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

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

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

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

     strenghtMsg.innerHTML = desc[score];
     strenghtMsg.className = "strength" + score;
     
     if (txtpass.length < 6)
     {
     errorMsg.innerHTML = "Password Should be Minimum 6 Characters"
     errorMsg.className = "errorclass"
     }
     
     
   }

And I have a CSS as well to change the style of the Password Strength label according to user input.

My CSS:

<style type="text/css">
             .strength0
            {
                width:200px;
                background:#B20E37;
                text-align: center;
                font-weight: bold;
            }
 
            .strength1
            {
                width:200px;
                background:#D32847;
                text-align: center;
                font-weight: bold;
            }
 
            .strength2
            {
                width:200px;
                background:#ff5f5f;
                text-align: center;
                font-weight: bold;
            }
 
            .strength3
            {
                width:200px;
                background:#83D680;
                 text-align: center;
                font-weight: bold;
            }
 
            .strength4
            {
                background:#4dcd00;
                width:200px;
                 text-align: center;
                font-weight: bold;
            }
 
            .strength5
            {
                background:#399800;
                width:200px;
                text-align: center;
                font-weight: bold;
            }
            
          .errorclass
          {
            font-weight:bold;
            font-size: 10px;
            color: #4F080B;
            font-family: Arial, 
          }
</style>
 

I'm just wondering is there a better way to re-write this code.