Javascript code Strength Verification (compatible with IE, Firefox, Google) _ javascript skills

Like JQuery Chinese Community registration, JS password Strength Verification (compatible with IE, Firefox, Google) approximate style:

Source code:

The Code is as follows:

// ============================ HTML page ============================

JS files

The Code is as follows:

// Replace document. getElementById with $
Var $ = function (v) {return document. getElementById (v );}

/*************************************** ********************** ********************************/
Function ValidateInput (element, value ){
// Verify the password
If (element = "password "){
If (value. toString (). length <6 ){
$ ('Tidposition'). className = 'error ';
$ ('Tidposition'). innerHTML = "Incorrect password. The password length is too small. ";
Return;
}
Else {
$ ('Tidposition'). className = 'success ';
$ ('Tidposition'). innerHTML = "is entered correctly. ";
}
}
}
/* = ========= Begin ========================================= ========= */
// Password initialization Style
Function InitCss (){
$ ('Tidposition'). className = 'title ';
$ ('Tidposition'). innerHTML = "minimum length: 6. Maximum length: 16. ";
}

/* ====================================== Password strength ====== ========= Begin =========================================== ======= */

Function Evaluate (word ){
Return word. replace (/^ (? :( [A-z]) | ([A-Z]) | ([0-9]) | (.)) {5 ,}| (.) + $/g, "$1 $2 $3 $4 $5 "). length;
}

Function validatePwdStrong (value ){
Var pwd = {
Color: ['# e6eaed',' # AC0035 ',' # FFCC33 ',' # 639BCC ',' #246626 '],
Text: ['too short ', 'weak', 'General ', 'good', 'excellent ']
};
Function colorInit (){
$ ('Pwdstrong _ 1'). style. backgroundColor = pwd. color [0];
$ ('Pwdstrong _ 2'). style. backgroundColor = pwd. color [0];
$ ('Pwdstrong _ 3'). style. backgroundColor = pwd. color [0];
$ ('Pwdstrong _ 4'). style. backgroundColor = pwd. color [0];
}
If (Evaluate (value) = 1 ){
ColorInit ();
$ ('Pwdstrong _ 1'). style. backgroundColor = pwd. color [1];
$ ('Pwdstrong _ text'). innerHTML = pwd. text [1];
$ ('Pwdstrong _ text'). style. color = pwd. color [1];
}
Else if (Evaluate (value) = 2 ){
ColorInit ();
$ ('Pwdstrong _ 1'). style. backgroundColor = pwd. color [2];
$ ('Pwdstrong _ 2'). style. backgroundColor = pwd. color [2];
$ ('Pwdstrong _ text'). innerHTML = pwd. text [2];
$ ('Pwdstrong _ text'). style. color = pwd. color [2];
}
Else if (Evaluate (value) = 3 ){
ColorInit ();
$ ('Pwdstrong _ 1'). style. backgroundColor = pwd. color [3];
$ ('Pwdstrong _ 2'). style. backgroundColor = pwd. color [3];
$ ('Pwdstrong _ 3'). style. backgroundColor = pwd. color [3];
$ ('Pwdstrong _ text'). innerHTML = pwd. text [3];
$ ('Pwdstrong _ text'). style. color = pwd. color [3];
}
Else if (Evaluate (value) = 4 ){
$ ('Pwdstrong _ 1'). style. backgroundColor = pwd. color [4];
$ ('Pwdstrong _ 2'). style. backgroundColor = pwd. color [4];
$ ('Pwdstrong _ 3'). style. backgroundColor = pwd. color [4];
$ ('Pwdstrong _ 4'). style. backgroundColor = pwd. color [4];
$ ('Pwdstrong _ text'). innerHTML = pwd. text [4];
$ ('Pwdstrong _ text'). style. color = pwd. color [4];
}
}

// ========================== CSS file ==============================

The Code is as follows:

Body
{
Font: 13px;
}
/* Password verification prompt CSS -------------------------------- start --------------------------------*/
# TipPosition
{
Width: 400px;
Height: 16px;
Line-height: 18px;
Padding: 2px 30px;
}
. Tip
{
Background: # E6F2FF url (images/register_tip.png) no-repeat 10px center;
Border: 1px #0E5863 dashed;
Color: #0E5863;
}
. Error
{
Background: # FBECDF url (images/register_error.png) no-repeat 10px center;
Border: 1px Red dashed;
Color: #6D3737;
}
. Success
{
Background: # D6FCD2 url (images/register_success.png) no-repeat 10px center;
Border: 1px #2F5D36 dashed;
Color: # 3D934A;
}
/* Password strength CSS -------------------------------- start --------------------------------*/
# PwdStrong_color
{
Width: 136px;
Height: 3px;
Border: 0px;
Border-collapse: collapse;
Border-spacing: 0;
Background: # E6EAED;
Margin-top: 5px;
}
# PwdStrong_color td
{
Padding: 0px;
Width: 44px;/* If the td width is not added, Google Chrome will not display normally */
}
# PwdStrong_text
{
Font: 12px;
}