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 passwords
  • password-ok – for acceptable passwords
  • password-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 id of the element that will show the strength of the password