jQuery密码验证强度仪栏

Question

我正在开发一个需要更加可视化的应用程序-这是添加可视化条以反映密码强度状态的最佳方法。

我是否应该创建一个分数，该分数在键盘上的各种验证（css动画/颜色更改）上会增加，减少？

http://jsfiddle.net/by429n9a/53/

  $('input[type=password]').keyup(function() {
    // keyup code here
    // set password variable
    var pswd = $(this).val();
    //validate the length
    if (pswd.length < 8) {
      $('#length').removeClass('valid').addClass('invalid');
    } else {
      $('#length').removeClass('invalid').addClass('valid');
    }

    //validate lowercase
    if (pswd.match(/[a-z]/)) {
      $('#lowercase').removeClass('invalid').addClass('valid');
    } else {
      $('#lowercase').removeClass('valid').addClass('invalid');
    }

    //validate capital letter
    if (pswd.match(/[A-Z]/)) {
      $('#capital').removeClass('invalid').addClass('valid');
    } else {
      $('#capital').removeClass('valid').addClass('invalid');
    }

    //validate number
    if (pswd.match(/\d/)) {
      $('#number').removeClass('invalid').addClass('valid');
    } else {
      $('#number').removeClass('valid').addClass('invalid');
    }


  }).focus(function() {
    //$('#pswd_info').show();
  }).blur(function() {
    //$('#pswd_info').hide();
  });

});