如何在bootstrap中验证密码字段？ [英] How to validate password field in bootstrap?

问题描述

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

I am working in asp.net with bootstrap. I want to validate password field. My code display info box when the user click on password field.

<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

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字段？我已经有以下脚本验证其他字段

The above code just display the info box and change each li depend on user entry. But, still accept any password that does not meet the criteria. How can I validate the #password field? I already have the below script that validate other fields

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

推荐答案

最少八个字符，至少一个字母和一个数字：

Minimum eight characters, at least one letter and one number:

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

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

Minimum eight characters, at least one letter, one number and one special character:

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

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

Minimum eight characters, at least one uppercase letter, one lowercase letter and one number:

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

最少8个字符，至少一个大写字母，一个小写字母，一个数字和一个特殊字符：

Minimum eight characters, at least one uppercase letter, one lowercase letter, one number and one special character:

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

最小值8和最多10个字符，在l东一个大写字母，一个小写字母，一个数字和一个特殊字符：

Minimum eight and maximum 10 characters, at least one uppercase letter, one lowercase letter, one number and one special character:

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

这篇关于如何在bootstrap中验证密码字段？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！