Question

我正在尝试将密码要求放在twitter bootstrap popover中。内容随用户键入密码而更改。问题是，当它专注于密码字段时，内容会正确更改，但当它失去焦点并重新获得焦点时，内容会自行重置，而我希望它在失去焦点之前就像它一样。以下是我的js代码：

  $(document).ready(function() {
 $('#pass').popover({ 

        placement:'bottom',

        html : true,
        content: function() {
          return $('#pswd_info').html();
        }
      });
$('#pass').keyup(function() {





    var pswd = $(this).val();
    if ( pswd.length < 8 ) {
        $('#length').removeClass('valid').addClass('invalid');
    } else {
        $('#length').removeClass('invalid').addClass('valid');
    }  
    if ( pswd.match(/[A-z]/) ) {
        $('#letter').removeClass('invalid').addClass('valid');
    } else {
        $('#letter').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');
    }


})});

不确定如何实现这一目标。非常感谢。

Answer 1

看看这个例子..

http://bootply.com/87158

这使用jQuery .keyup()进行实时密码验证，并在Bootstrap popover中显示消息。

twitter bootstrap popover中的密码要求

1 个答案: