Function Description: when a user registers or changes the password, the system checks the password based on user input and returns the result. It can effectively remind users to improve account security.
Similar effect: Change Password in live.com
Run code box
<HTML> <br/> <pead> <br/> <meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8 "/> <br/> <title> password </title> <br/> <style type =" text/CSS "> <br/> body {<br /> font-size: 12px; <br/> font-family: Arial, Helvetica, sans-serif; <br/> margin: 0; <br/>}< br/> FORM {<br/> margin: 2em; <br/>}< br/> # chkresult {margin-left: 53px; height: 15px ;} <br/> </style> <br/> </pead> <br/> <body> <br/> <form name = "form1"> <br/> <l Abel for = "PWD"> User Password </label> <br/> <input type = "password" name = "PWD" onblur = "chkpwd (this) "/> <br/> <Div id =" chkresult "> </div> <br/> <label for =" pwd2 "> password duplication </label> <br/> <input type = "password" name = "pwd2"/> <br/> </form> <br/> <SCRIPT type = "text/JavaScript"> <br/> function chkpwd (OBJ) {<br/> var T = obj. value; <br/> var id = getresult (t); <br/> // defines the corresponding message prompt <br/> var MSG = new array (4 ); <br/> MSG [0] = "the password is too short. "; <Br/> MSG [1] =" poor password strength. "; <Br/> MSG [2] =" Good password strength. "; <Br/> MSG [3] =" high password strength. "; <Br/> var sty = new array (4); <br/> sty [0] =-45; <br/> sty [1] =-30; <br/> sty [2] =-15; <br/> sty [3] = 0; <br/> var Col = new array (4 ); <br/> Col [0] = "gray"; <br/> Col [1] = "red"; <br/> Col [2] = "# ff6600 "; <br/> Col [3] = "green"; <br/> // set the display effect <br/> var bimg = "/web/uploadfiles/200711/20071107173209478 .gif "; // a display image <br/> var swidth = 300; <br/> var sheight = 15; <br/> var bobj = document. getelementbyid ("chkresult"); <br/> bobj. styl E. fontsize = "12px"; <br/> bobj. style. color = Col [ID]; <br/> bobj. style. width = swidth + "PX"; <br/> bobj. style. height = sheight + "PX"; <br/> bobj. style. lineheight = sheight + "PX"; <br/> bobj. style. background = "URL (" + bimg + ") No-repeat left" + sty [ID] + "PX"; <br/> bobj. style. textindent = "20px"; <br/> bobj. innerhtml = "detection prompt:" + MSG [ID]; <br/>}< br/> // defines the detection function, 0/1/2/3 is returned, indicating invalid/poor/normal/strong <br/> function getresult (s) {<br/> If (S. length <4) {<br/> return 0; <br/>}< br/> var ls = 0; <br/> If (S. match (/[A-Z]/ig) {<br/> ls ++; <br/>}< br/> If (S. match (/[0-9]/ig) {<br/> ls ++; <br/>}< br/> If (S. match (/(. [^ a-z0-9])/ig) {<br/> ls ++; <br/>}< br/> If (S. length <6 & LS> 0) {<br/> ls --; <br/>}< br/> return ls <br/>}< br/> </SCRIPT> <br/> </body> <br/> </ptml> <script language = "JavaScript"> <br/> var now = new date (); <br/> document. write (" "); <br/> </SCRIPT> <br/> <NoScript> <br/> <br/> </ noScript>
Usage:
Step 1: Save the image
Step 2: Modify the image address in the JS file as needed. As follows:
The following is a reference clip:
VaR bimg = "pwdlen.gif"; // a picture for display
Step 3: reference the script file on the page to be checked, as shown below:
The following is a reference clip:
<SCRIPT type = "text/JavaScript" src = "chkpwd. js"> </SCRIPT>
Step 4: In the form on the webpage, find the password input box, add the onblur event driver, and then add a DIV, as shown below:
The following is a reference clip:
<Input type = "password" name = "PWD" onblur = "chkpwd (this)"/>
<Div id = "chkresult"> intensity detection </div>
Step 5: redefine the position of # chkresult in the style sheet CSS based on your page requirements to fit the overall layout of your webpage.
Bobj. style. fontsize = "12px ";
Bobj. style. Color = Col [ID];
Bobj. style. width = swidth + "PX ";
Bobj. style. Height = sheight + "PX ";
Bobj. style. lineheight = sheight + "PX ";
Bobj. style. Background = "URL (" + bimg + ") No-repeat left" + sty [ID] + "PX ";
Bobj. style. textindent = "20px ";
Bobj. innerhtml = "detection prompt:" + MSG [ID];
}
// Define the detection function. The return value of 0/1/2/3 indicates invalid/bad/moderate/strong, respectively.
Function getresult (s ){
If (S. Length <4 ){
Return 0;
}
VaR ls = 0;
If (S. Match (/[A-Z]/ig )){
Ls ++;
}
If (S. Match (/[0-9]/ig )){
Ls ++;
}
If (S. Match (/(. [^ a-z0-9])/ig )){
Ls ++;
}
If (S. length <6 & LS> 0 ){
Ls --;
}
Return ls
}
</SCRIPT>
</Body>
</Html> <script language = "JavaScript">
VaR now = new date ();
Document. Write (" ");
</SCRIPT>
<NoScript>
</NoScript>
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
