Validating Common Form Input - Part 5

Validating passwords

Passwords can contain any printable character. Often websites have rules for your password to be of a certain length and contain a specific combination of lower and uppercase letters, digits and special characters.

So lets define some rules for a test password.

• Length is 8 to 16 characters
• At least 1 lowercase letter must be used
• At least 1 uppercase letter must be used
• At least 1 digit must be used
• At least 1 special character must be used
• Must not contain spaces

Testing the length we do by

 1 function validate(form) {
 2   // Shortcut to save writing
 3   var pwd = form.elements.password1.value;
 4   // Check length
 5   if(8 > pwd.length || pwd.length > 16)
 6     return false;
 7   return true;
 8 }
function validate(form) {
  // Shortcut to save writing
  var pwd = form.elements.password1.value;
  // Check length
  if(8 > pwd.length || pwd.length > 16)
    return false;
  return true;
}

To test for a at least 1 lowercase letter we can write

 1 function validate(form) {
 2   // Shortcut to save writing
 3   var pwd = form.elements.password1.value;
 4   // Regular expression for password
 5   // Check for at least 1 lowercase letter
 6   var rgx = /[a-z]+/;
 7   if(!rgx.test(pwd))
 8     return false;
 9   return true;
10 }
function validate(form) {
  // Shortcut to save writing
  var pwd = form.elements.password1.value;
  // Regular expression for password
  // Check for at least 1 lowercase letter
  var rgx = /[a-z]+/;
  if(!rgx.test(pwd))
    return false;
  return true;
}

Testing for uppercase and digits is trivial. To check for a special character we can use the \W. This collection is any character which is not in the set [a-zA-Z0-9_]

 1 function validate(form) {
 2   // Shortcut to save writing
 3   var pwd = form.elements.password1.value;
 4   // Regular expression for password
 5   // Check for at least 1 special character
 6   var rgx = /[\W_]+/;
 7   if(!rgx.test(pwd))
 8     return false;
 9   return true;
10 }
function validate(form) {
  // Shortcut to save writing
  var pwd = form.elements.password1.value;
  // Regular expression for password
  // Check for at least 1 special character
  var rgx = /[\W_]+/;
  if(!rgx.test(pwd))
    return false;
  return true;
}

Note how we also include the underscrore as a special character.

Testing for the absense of spaces is done by

 1 function validate(form) {
 2   // Shortcut to save writing
 3   var pwd = form.elements.password1.value;
 4   // Regular expression for password
 5   // Check for no spaces
 6   var rgx = /\s/;
 7   if(rgx.test(pwd))
 8     return false;
 9   return true;
10 }
function validate(form) {
  // Shortcut to save writing
  var pwd = form.elements.password1.value;
  // Regular expression for password
  // Check for no spaces
  var rgx = /\s/;
  if(rgx.test(pwd))
    return false;
  return true;
}

In line 7 we have remove the ! from the if clause. This will make the validate function return false if a space is detected.

Combining these checks into a single regex is not an easy task. We can not make any assumptions about the order of characters and we are merely interested in whether they are present or not.

Regex' in JavaScript don't have an AND operator so we can not write a pattern to match 'at least 1 lower case AND at least 1 uppercase character'. (If you can think of a way to do logical 'and' operations please let me know)

So we have to make multiple checks. The final validation for a password could look like

 1 function validate(form) {
 2   // Shortcut to save writing
 3   var pwd = form.elements.password1.value;
 4   // Check length
 5   if(8 > pwd.length || pwd.length > 16)
 6     return false;
 7   // Check for at least 1 lowercase letter
 8   var rgx = /[a-z]+/;
 9   if(!rgx.test(pwd))
10     return false;
11   // Check for at least 1 uppercase letter
12   rgx = /[A-Z]+/;
13   if(!rgx.test(pwd))
14     return false;
15   // Check for at least 1 digit
16   rgx = /\d+/;
17   if(!rgx.test(pwd))
18     return false;
19   // Check for at least 1 special char
20   rgx = /[\W_]+/;
21   if(!rgx.test(pwd))
22     return false;
23   // Check for no spaces
24   rgx = /\s/;
25   if(rgx.test(pwd))
26     return false;
27   return true;
28 }
function validate(form) {
  // Shortcut to save writing
  var pwd = form.elements.password1.value;
  // Check length
  if(8 > pwd.length || pwd.length > 16)
    return false;
  // Check for at least 1 lowercase letter
  var rgx = /[a-z]+/;
  if(!rgx.test(pwd))
    return false;
  // Check for at least 1 uppercase letter
  rgx = /[A-Z]+/;
  if(!rgx.test(pwd))
    return false;
  // Check for at least 1 digit
  rgx = /\d+/;
  if(!rgx.test(pwd))
    return false;
  // Check for at least 1 special char
  rgx = /[\W_]+/;
  if(!rgx.test(pwd))
    return false;
  // Check for no spaces
  rgx = /\s/;
  if(rgx.test(pwd))
    return false;
  return true;
}

The regex' are so short that there is no real performance penalty in doing it this way. If you like you can of cause combine each if clause into a single one - I only use them separate for the sake of the example.

Once we know that our password obeys the rules we should check it agains the 'Repeat password' input field. There is no need to validate the second password entry - we just need to match it againts the first

 1 function validate(form) {
 2   // Shortcut to save writing
 3   var pwd = form.elements.password1.value;
 4   // ...
 5   // validate password 1
 6   // ...
 7   // Compare to password 2
 8   if(pwd != form.elements.password2.value)
 9     return false;
10   return true;
11 }
function validate(form) {
  // Shortcut to save writing
  var pwd = form.elements.password1.value;
  // ...
  // validate password 1
  // ...
  // Compare to password 2
  if(pwd != form.elements.password2.value)
    return false;
  return true;
}

Thats about it for passwords. Next up is URL validation.

Leave a comment