Copy codeThe Code is as follows:
<Head>
<Title> </title>
<Script src = "jquery-1.9.1.js" type = "text/javascript"> </script>
<Style type = "text/css">
. Qiang {background: url (/images/pas4.JPG) no-repeat; width: 150px; height: 40px; float: left ;}
. Zhong {background: url (/images/pas3.JPG) no-repeat; width: 150px; height: 40px; float: left ;}
. Ruo {background: url (/images/pas2.JPG) no-repeat; width: 150px; height: 40px; float: left ;}
. Ruox {background: url (/images/pas1.JPG) no-repeat; width: 150px; height: 40px; float: left ;}
. Div1css {float: left; width: 200px ;}
</Style>
<Script type = "text/javascript">
$ (Function (){
$ ('# Pass'). keyup (function (){
Var strongRegex = new RegExp ("^ (? =. {8 ,})(? =. * [A-Z]) (? =. * [A-z]) (? =. * [0-9]) (? =. * \ W). * $ "," g ");
Var mediumRegex = new RegExp ("^ (? =. {7 ,})(((? =. * [A-Z]) (? =. * [A-z]) | ((? =. * [A-Z]) (? =. * [0-9]) | ((? =. * [A-z]) (? =. * [0-9]). * $ "," g ");
Var enou1_gex = new RegExp ("(? =. {6,}). * "," g ");
If (false = enouw.gex. test ($ (this). val ())){
$ ('# Div2'). addClass ('ruox ');
// Certificate ('{passstrength'{.html (when the password is smaller than six digits '); // when the password is less than six digits, the password strength picture is gray
}
Else if (strongRegex. test ($ (this). val ())){
$ ('# Div2'). removeClass ('zhong ');
$ ('# Div2'). addClass ('qiang ');
// Certificate ('{passstrength'{.html ('strong! '); // The password must be eight or more characters long and contain letters, numbers, and special characters.
}
Else if (mediumRegex. test ($ (this). val ())){
$ ('# Div2'). removeClass ('ruo ');
$ ('# Div2'). addClass ('zhong ');
// Condition ('{passstrength'{.html! '); // The password must be seven or more characters long and contain letters, numbers, and special characters.
}
Else {
$ ('# Div2'). removeClass ('ruox ');
$ ('# Div2'). addClass ('ruo ');
// Certificate ('{passstrength'{.html ('weak! '); // If the password is 6 or lower, it is weak even if the password contains letters, numbers, and special characters.
}
Return true;
});
})
</Script>
</Head>
<Body>
<Div id = "div1" class = "div1css">
<Input type = "password" name = "pass" id = "pass"/> </div>
<Div id = "div2"> <span id = "passstrength"> </span> </div>
</Body>