jquery Authentication Password Strength plugin (support show hidden)

Many registration pages now display password strength, telling users to use a highly complex password. The principle is to use JS trigger text form input elements of the KeyUp event, according to the length of the input characters and the number of types (such as numbers, lowercase letters, uppercase letters, special characters, etc.) dynamically modify the hint element style and text.

The following strength Plug-ins are based on jquery.

1. Introduction of documents

<link href= "Css/style.css" type= "Text/css" rel= "stylesheet"/>
<script type= "Text/javascript" src= "Js/jquery.min.js" ></script>
<script type= "Text/javascript" src= "Js/strength.js" ></script>

2. Add Validation js

$ (document). Ready (function ($) {
$ (' #password '). Strength ({
Strengthclass: ' Strength ',
Strengthmeterclass: ' Strength_meter ',
Strengthbuttonclass: ' Button_strength ',
Strengthbuttontext: ' Show password ',
Strengthbuttontexttoggle: ' Hide password '
});

});

3.form structure

<form id= "Verify" >
<label> Enter a test password </label>
<input type= "password" id= "password" "Name=" ">
</form>