In the registration function of many websites, passwords are verified and strength hints are available. This effect is achieved below.
Password Strength Description:
Password strength: weak--pure numbers, pure letters, pure symbols
Password strength: Medium--number, letter, symbol any combination of two
Password strength: Strong--numbers, letters, symbols all have to have
Implementation ideas:
In the input box prompt area to write two div layer, a display prompt text, a display password strength hint.
To add a onkeyup validation event to a text box:
1. When there is no input, the display "password can be composed of letters, numbers, special symbols, length of 6-18 characters";
2. The cursor is focused on the text box, before the password length does not have 6 digits, display "password not less than 6" prompt text;
3. When the character in the text box reaches 6 bits, the layer showing the hint text is hidden and the layer showing the strength of the password appears.
4. Through regular expression control password strength hint of three span of the explicit, for the above three cases, only need to the first, the third to verify can, relatively speaking, these two expressions are better. Both of these validations are left with any combination of two, eliminating the need to write an expression for the second type of validation.
The key code is as follows:
JS Code:
varREG1 =/(^\d{6,}$) | (^[a-za-z]{6,}$) | (^[^a-za-z0-9]{6,}$)/;//One of the numbers, letters, or symbols. varReg7 =/\d*\d* ((\d+[a-za-z]+[^0-9a-za-z]+) | ( \d+[^0-9a-za-z]+[a-za-z]+) | ([a-za-z]+\d+[^0-9a-za-z]+) | ([a-za-z]+[^0-9a-za-z]+\d+) | ([^0-9a-za-z]+[a-za-z]+\d+) | ([^0-9a-za-z]+\d+[a-za-z]+)) \d*\d*/;//any combination of alphanumeric characters functioncheck_pwd () {varPWD = document.getelementbyidx_x_x_x_x_x ("Txtpwd"). Value; if(Pwd.length < 6) { $("#pwdPrompt Div:eq (1)"). HTML ("Password length cannot be less than 6 bits"); return false; } Else { $("#pwdPrompt Div:eq (1)"). CSS ("display", "none")); $("#pwdPrompt div:eq (0)"). CSS ("Display", "block"); if(Reg1.test (pwd)) {$ ("#pwdLength span:eq (0)"). CSS ("Display", "block"); $("#pwdLength Span:eq (1)"). CSS ("display", "none")); $("#pwdLength Span:eq (2)"). CSS ("display", "none")); return true; } Else if(!reg7.test (PWD)) { $("#pwdLength span:eq (0)"). CSS ("Display", "block"); $("#pwdLength Span:eq (1)"). CSS ("Display", "block"); $("#pwdLength Span:eq (2)"). CSS ("display", "none")); return true; } Else { $("#pwdLength span:eq (0)"). CSS ("Display", "block"); $("#pwdLength Span:eq (1)"). CSS ("Display", "block"); $("#pwdLength Span:eq (2)"). CSS ("Display", "block"); return true; } return true; } }
HTML code:
<styletype= "Text/css">#pwdLength span{Display:None;float: Left;Height:14px;width:51px;font-size:12px;text-align:Center;Line-height:14px;Color: White;Border-right:1px solid White;}</style><inputID= "Txtpwd"onkeyup= "return Check_pwd ()"type= "Password" /><BR/><DivID= "Pwdprompt"> <DivID= "Pwdlength"> <spanstyle= "Background-color: #999;">Weak</span> <spanstyle= "Background-color: #666;">In</span> <spanstyle= "Background-color: #333;">Strong</span> </Div> <Divstyle= "width:340px;">Passwords can consist of letters, numbers, and special symbols with a length of 6-18 characters</Div></Div>
Use JavaScript to authenticate passwords with password strength hints