Test password strength and password strength
<Html>
<! -- Passion is at the end. Please check the red at the end.
This is an example of calculating the password strength.
There are many such examples on the Internet
However, they are not very good.
This is a complete effect I have written and can be used in a universal manner,
New: You can instantiate a [focus ],
It is mainly written with object-oriented language.
The password strength verification rules are as follows:
-->
<Meta charset = "UTF-8">
<Title> calculate the password Strength </title>
<Head> <Style>
Span {
Display: inline-block;
Line-height: 20px;
Text-align: center;
Width: 20px;
Height: 20px;
Border-radius: 50%;
Background: # ccc;
Font-size: 12px;
Color: # fff;
}
. Current {
Background: green;
Color: #000;
}
</Style>
<Script src = "jquery. js"> </script>
<Body>
<Input type = "text" id = "test" class = "input1">
<Input type = "submit" value = "submit" id = "submit"/>
<Div class = "vaild">
<Span> weak </span>
<Span> medium </span>
<Span> strong </span>
</Div>
<Input type = "text" id = "test" class = "input2">
<Input type = "submit" value = "submit" id = "submit"/>
<Div class = "vaild2">
<Span> weak </span>
<Span> medium </span>
<Span> strong </span>
</Div>
<Script>
// Constructor
Function Vaild (){
This. input = $ (". input1 "),
This. show = $ (". vaild span "),
This. name = "current ",
This. vailded = function ()
{
Var _ this = this;
This. input. on ("keyup", function ()
{
// Var div =$ ("# fen ");
// Var tips = $ ("# tips ");
Var f = 0; // empty every time
Var vals = $ (this). val ();
// Array
Var num;
Var en;
Var fh;
Var jl;
// Score
Var lenF;
Var numF;
Var enF;
Var fhF;
Var jlF;
// Determine the length
If (vals. length> 0 & vals. length <= 4 ){
LenF = 5;
}
Else if (vals. length> 4 & vals. length <= 7 ){
LenF = 10;
}
Else if (vals. length> = 8 ){
LenF = 25;
}
// Determine the number
Num = vals. match (/\ d/g )? Vals. match (/\ d/g): 0;
If (num = 0 ){
NumF = 0;
}
Else if (num. length = 1 ){
NumF = 10;
}
Else if (num. length> = 2 ){
NumF = 20;
}
// Determine the letter Length
En = vals. match (/[A-Za-z _]/g )? Vals. match (/[A-Za-z _]/g): 0;
If (en = 0 ){
EnF = 0;
}
Else if (en. length = 1 ){
EnF = 10;
}
Else if (en. length> = 2 ){
EnF = 20;
}
// Match the symbol
Fh = vals. match (/\ W/g )? Vals. match (/\ W/g): 0;
If (fh = 0 ){
FhF = 0;
}
Else if (fh. length = 1 ){
FhF = 10;
}
Else if (fh. length> = 2 ){
FhF = 25;
}
// Reward
If (/\ d +/g. test (vals) &/[a-z _] +/g. test (vals )){
JlF = 2;
}
If (/\ d +/g. test (vals) &/[a-z _] +/g. test (vals) & \ W +/g. test (vals )){
JlF = 3;
}
If (/\ d +/g. test (vals) &/[A-Z] +/g. test (vals) &/[a-z _] +/g &/\ W +/g. test (vals )){
JlF = 5;
}
If (jlF = undefined | jlF = "NaN" | jlF = "undefined ")
{
JlF = 0;
}
Var count = Number (lenF) + Number (numF) + Number (enF) + Number (fhF) + Number (jlF );
// Switch between "weak", "medium", and "strong"
If (count> = 0 & count <60 ){
_ This. show. eq (0). addClass (_ this. name). siblings (). removeClass (_ this. name );
}
Else if (count <90 & count> = 60 ){
_ This. show. eq (2). removeClass (_ this. name). siblings (). addClass (_ this. name );
}
Else if (count> 90 ){
_ This. show. addClass (_ this. name );
}
Else {
_ This. show. removeClass (_ this. name );
}
// Display the score
// Div.html ("score:" + count)
// Test the corresponding scores
Console. log ("length score:" + lenF)
Console. log ("digit score:" + numF)
Console. log ("letter score:" + enF)
Console. log ("symbol score:" + fhF)
Console. log ("Reward score:" + jlF)
})
}
};
/// Instantiate the constructor
Var dd = new Vaild ();
Dd. vailded ();
// Enable the second one
Var bb = new Vaild ();
Bb. input = $ (". input2 ");
Bb. show = $ (". vaild2 span ");
Bb. vailded ();
</Script>
</Body>
</Html>
Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.
