jquery - jQuery密码验证强度计栏

Question

我正在开发一个需要更直观的应用程序 - 添加一个反映密码强度状态的可视栏的最佳方法是什么。

我是否应该创建一个分数来增加、减少 keyup 中的各种验证 - 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();
  });

});

标签： jquery