PasswordChecker documentation
PasswordChecker checks the strength of a password entered in an input type="text" element. The strength of the password is shown in a notification element, which has a CSS class applied to it depending on the password strength.
The CSS classes applied to the notification element are:
password-weak– for weak or empty passwordspassword-ok– for acceptable passwordspassword-strong– for strong passwords
PasswordChecker uses regular expressions to check the strength of the password. Here are the expressions used to check the passwords:
- Weak passwords
- Weak passwords are less than 6 characters, or ones that match either of these expressions:
([a-zA-Z]{6,10}or[0-9]{6,10}. In short; weak passwords contain less than 6 characters, or contain between 6 and 10 upper- and lower-case characters mixed, or contain between 6 and 10 numbers. - Acceptable passwords
- Acceptable passwords are more than 6 characters, and match any one of these expressions:
[a-zA-Z]{10,},[0-9]{10,},.*(?=.{6,})(?=.*\d)(?=.*[a-z]).*,.*(?=.{6,})(?=.*[^0-9a-zA-Z])(?=.*[a-z]).*or.*(?=.{6,})(?=.*[^0-9a-zA-Z])(?=.*\d).*. In short: acceptable passwords contain more than 10 characters, or contain more than 6 numbers, upper-and lower-case characters mixed. - Strong passwords
- Strong passwords are greater than 6 characters, and match the following expression:
.*(?=.{6,})(?=.*\d)(?=.*[a-z])(?=.*[^0-9a-zA-Z]).*. In short: strong passwords contain upper- and lower-case letters, numbers, and at least one symbol (dollar sign, exclamation mark etc).
Example
<form action="#" method="post">
<p><input id="pass" class="passwordchecker notifyEl-passnotify" name="pass" type="password" /></p>
<p id="passnotify"></p>
</form>
Settings
Valid elements
Any input type="text" or input type="password" elements
Classname
passwordchecker
Attributes
None
CSS parameters (what’s this?)
notifyEl(required)- Must be set as the
idof the element that will show the strength of the password