Small Example of verifying the strength of passwords in js

Page code:

Copy codeThe Code is as follows:
<Table>
<Tr> <td> <input type = "text" id = "txtPwd"/> </td> </tr>
<Tr> <td>
<Table id = "pwdLever">
<Tr>
<Td> weak </td>
<Td> moderate </td>
<Td> strong </td>
</Tr>
</Table>
</Td> </tr>
</Table>

Style:

Copy codeThe Code is as follows:
<Style type = "text/css">
# PwdLever td
{
Background-color: Gray;
Width: 45px;
Text-align: center;
}
</Style>

Js Code:

Copy codeThe Code is as follows:
<Script type = "text/javascript">
Window. onload = function (){
Var textInput = document. getElementById ("txtPwd ");
// Register a key release event in the password input box
TextInput. onkeyup = function (){
Var pwdValue = this. value;
Var num = pwdChange (pwdValue );
Var tds = document. getElementById ("pwdLever"). getElementsByTagName ("td ");
// Change the password color
If (num = 0 | num = 1 ){
Tds [0]. style. backgroundColor = "red ";
Tds [1]. style. backgroundColor = "gray ";
Tds [2]. style. backgroundColor = "gray ";
}
Else if (num = 2 ){
Tds [0]. style. backgroundColor = "red ";
Tds [1]. style. backgroundColor = "red ";
Tds [2]. style. backgroundColor = "gray ";
}
Else if (num = 3 ){
Tds [0]. style. backgroundColor = "red ";
Tds [1]. style. backgroundColor = "red ";
Tds [2]. style. backgroundColor = "red ";
}
Else {
Tds [0]. style. backgroundColor = "gray ";
Tds [1]. style. backgroundColor = "gray ";
Tds [2]. style. backgroundColor = "gray ";
}
}
}
Function pwdChange (v ){
Var num = 0;
Var reg =/\ d/; // if there is a number
If (reg. test (v )){
Num ++;
}
Reg =/[a-zA-Z]/; // if there are letters
If (reg. test (v )){
Num ++;
}
Reg =/[^ 0-9a-zA-Z]/; // if there are special characters
If (reg. test (v )){
Num ++;
}
If (v. length <6) {// if the password is less than 6
Num --;
}
Return num;
}
</Script>