visual_password_check.js

$("#new_user #user_password").passwordCheck();

jQuery.fn.passwordCheck = function() {
  var pass = $(this[0]) // It's your element
  var noofchar=/^.*(?=.{6,}).*$/;
  var checkspace=/\s/;
  var best=/^.*(?=.{6,})(?=.*[A-Z])(?=.*[\d])(?=.*[\W]).*$/;
  var strong=/^[a-zA-Z\d\W_]*(?=[a-zA-Z\d\W_]{6,})(((?=[a-zA-Z\d\W_]*[A-Z])(?=[a-zA-Z\d\W_]*[\d]))|((?=[a-zA-Z\d\W_]*[A-Z])(?=[a-zA-Z\d\W_]*[\W_]))|((?=[a-zA-Z\d\W_]*[\d])(?=[a-zA-Z\d\W_]*[\W_])))[a-zA-Z\d\W_]*$/;
  var weak=/^[a-zA-Z\d\W_]*(?=[a-zA-Z\d\W_]{6,})(?=[a-zA-Z\d\W_]*[A-Z]|[a-zA-Z\d\W_]*[\d]|[a-zA-Z\d\W_]*[\W_])[a-zA-Z\d\W_]*$/;
  var bad=/^((^[a-z]{6,}$)|(^[A-Z]{6,}$)|(^[\d]{6,}$)|(^[\W_]{6,}$))$/;

  pass.after('<div class="strength-message" style="margin-top: 5px; font-weight: bold;"></div>');
  pass.after('<div class="strength-visual" style="margin-top: 5px; margin-right: 2px; float: left; width: 5em; height: 1.2em;"></div>');
  pass.after('<br />');


  pass.keyup(function() {
    password = pass.val();
    if (true == checkspace.test(password)) {
      $('.strength-message').html("Spaces are not allowed");
      $('.strength-visual').css('background-color', "red");
    } else if (false == noofchar.test(password)) {
      $('.strength-message').html("Must be 6 char");
      $('.strength-visual').css('background-color', "red");
    } else if(best.test(password)) {
      $('.strength-message').html("Best");
      $('.strength-visual').css('background-color', "green");
    } else if(strong.test(password)) {
      $('.strength-message').html("Strong");
      $('.strength-visual').css('background-color', "yellow");
    } else if(weak.test(password) == true && bad.test(password) == false) {
      $('.strength-message').html("Weak");
      $('.strength-visual').css('background-color', "orange");
    } else if(bad.test(password)) {
      $('.strength-message').html("Bad");
      $('.strength-visual').css('background-color', "red");
    }
  });

};