javascript - 如何验证 Bootstrap 中的密码字段？

Question

我正在使用 bootstrap 在 asp.net 中工作。我想验证密码字段。当用户单击密码字段时，我的代码显示信息框。

<div id="pswd_info">
  <h4>Password requirements:</h4>
     <ul>
       <li id="letter" class="invalid fa-warning"> At least <strong>one letter</strong></li>
       <li id="capital" class="invalid"> At least <strong>one capital letter</strong></li>
       <li id="number" class="invalid"> At least <strong>one number</strong></li>
       <li id="special" class="invalid"> At least <strong>one special character</strong></li>
       <li id="length" class="invalid"> Be at least <strong>8 characters</strong></li>
     </ul>
   </div>

javascript

 <!-- password info box-->
    <script>
        $(document).ready(function () {

            $('#password').keyup(function () {

                // 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 letter
                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');
                }

                //validate special character
                if (pswd.match(/[!@#$ %^&*]/)){
                    $('#special').removeClass('invalid').addClass('valid');
                } else {
                    $('#special').removeClass('valid').addClass('invalid');
                }

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

        });
    </script>

上面的代码只是显示信息框并根据用户输入更改每个 li。但是，仍然接受任何不符合标准的密码。如何验证#password 字段？我已经有下面的脚本来验证其他字段

JavaScript

 <script>
      // initialize the validator function
      validator.message.date = 'not a real date';
      // validate a field on "blur" event, a 'select' on 'change' event & a '.reuired' classed multifield on 'keyup':
      $('form')
        .on('blur', 'input[required], input.optional, select.required', validator.checkField)
        .on('change', 'select.required', validator.checkField)
        .on('keypress', 'input[required][pattern]', validator.keypress);
      $('.multi.required').on('keyup blur', 'input', function() {
        validator.checkField.apply($(this).siblings().last()[0]);
      });
      $('form').submit(function(e) {
        e.preventDefault();
        var submit = true;
        // evaluate the form using generic validaing
        if (!validator.checkAll($(this))) {
          submit = false;
        }
        if (submit)
          this.submit();
        return false;
      });
    </script>

Answer 1

至少八个字符，至少一个字母和一个数字:

"^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{8,}$"

至少八个字符，至少一个字母、一个数字和一个特殊字符:

"^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{8,}$"

至少八个字符，至少一个大写字母，一个小写字母和一个数字:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$"

至少八个字符，至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,}"

最少 8 个、最多 10 个字符，至少 1 个大写字母、1 个小写字母、1 个数字和 1 个特殊字符:

"^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])[A-Za-z\d$@$!%*?&]{8,10}"