如何在bootstrap中验证密码字段?

时间:2017-05-11 06:25:21

标签: javascript jquery asp.net twitter-bootstrap passwords

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

<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>

1 个答案:

答案 0 :(得分:0)

最少八个字符,至少一个字母和一个数字:

"^(?=.*[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,}$"

最少八个字符,至少一个大写字母,一个小写字母,一个数字和一个特殊字符:

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

最少8个字符和最多10个字符,至少一个大写字母,一个小写字母,一个数字和一个特殊字符:

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