Use JavaScript to authenticate passwords with password strength hints

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.