Home > Developer > JavaScript
At present, many registration pages can display the password strength, telling users to use a complex password.
There are many javascript programs that implement similar functions. The basic principles are as follows: use JavaScript to trigger the keyup event of the text form input element. The keyup event is based on the length and number of types of the input characters (such as numbers, lower-case letters, upper-case letters, and special characters) dynamically modify the style and text of the prompt element.
The following example shows that the passwordStrength plug-in is based on jQuery.
This plug-in uses an image containing 10 States to display the password strength. Based on the password input, the vertical offset of the image is dynamically set to switch between different States.
The plug-in is applied to the asp.net application as follows:
1. After decompressing the compressed package, place the password_strength.css file to the topic folder (if the website sets the page style through the topic). Otherwise, place the file in the css folder.
The style of this file is defined as follows:
. Is0 {background: url (../images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px ;}
. Is10 {background-position: 0-7px ;}
. Is20 {background-position: 0-14px ;}
. Is30 {background-position: 0-21px ;}
. Is40 {background-position: 0-28px ;}
. Is50 {background-position: 0-35px ;}
. Is60 {background-position: 0-42px ;}
. Is70 {background-position: 0-49px ;}
. Is80 {background-position: 0-56px ;}
. Is90 {background-position: 0-63px ;}
. Is100 {background-position: 0-70px ;}
2. If the topic is used, create an imagesfolder under the topic folder, and then place the progressimg1.png file in the folder. In this case, modify the image address of the first line style iso class to: url (images/progressImg1.png.
3. Create a page, such as the registration page. Enter the following code:
<Td align = "left">
<Asp: TextBox runat = "server" ID = "txtPwd" TextMode = "Password"> </asp: TextBox>
<span id = "spanPwd" class = "alertTip"> </span>
<Div id = "passwordStrengthDiv" class = "is0"/>
<P class = "regTooltip"> (required) the password must be 6-18 characters in length and can only contain characters (a-z), numbers (0-9), and underscores (_) composition </p>
</Td>
Note that the red part of the above Code uses the default value for the id, because in the js plug-in, the element of this ID will be searched by default (the following red code), and The status picture will be displayed here. It can also be modified, but the js and page must be consistent.
$. Fn. passwordStrength. defaults = {
Classes: Array ('is10', 'is20', 'is30', 'is40', 'is50', 'is60', 'is70', 'is80', 'is90 ', 'is100 '),
TargetDiv: '# passwordStrengthDiv ',
Cache :{}
}
4. Introduce the jQuery library and plug-in on the page and write the following code:
<Head runat = "server">
<Title> </title>
<Script src = "/js/jquery-1.7.2.min.js" type = "text/javascript"> </script>
<Script src = "js/jquery. passwordStrength. js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Function (){
$ ("Input [id $ = txtNewPwd]"). passwordStrength ();
});
</Script>
</Head>
Note that the password box is a server control.
Is the demo effect:
Extension: In the method above, the image is displayed by default when the page is initially loaded. You can also modify the status image and display it only after the password is entered.
Modification method:
First, change the style file:
. Is0 {background: url (images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px ;}
. Is10 {background: url (images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px; background-position: 0-7px ;}
. Is20 {background: url (images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px; background-position: 0-14px ;}
. Is30 {background: url (images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px; background-position: 0-21px ;}
. Is40 {background: url (images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px; background-position: 0-28px ;}
. Is50 {background: url (images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px; background-position: 0-35px ;}
. Is60 {background: url (images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px; background-position: 0-42px ;}
. Is70 {background: url (images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px; background-position: 0-49px ;}
. Is80 {background: url (images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px; background-position: 0-56px ;}
. Is90 {background: url (images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px; background-position: 0-63px ;}
. Is100 {background: url (images/progressImg1.png) no-repeat 0 0; width: 138px; height: 7px; background-position: 0-70px ;}
Then, remove the class in the displayed div:
<Div id = "passwordStrengthDiv"> </div>
Other codes remain unchanged.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
