Password modification verification of bootstrap validator plug-in

Keywords: less


There should be many tutorials on the Internet. Of course, when I use them, I also paste the code directly on Baidu. But one thing is not perfect, that is, input "user new password" and "user confirm password" When it is not input, the "user's new password" will always prompt "the user's new password is not consistent with the confirmed password". Of course, there is nothing wrong with this, but Keng Da's test says that it can't be done. He doesn't need to prompt this information before he says "user's confirmed password". Well, it can only be changed. Here is the modified code:

$('#operation-password').bootstrapValidator({
      message: 'The value is invalid',
      trigger: 'blur keyup',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok',
        invalid: 'glyphicon glyphicon-remove',
        validating: 'glyphicon glyphicon-refresh'
      },
      fields: {
        /*Validation: Rules*/
        oldPassword: {
          validators: {
            notEmpty: {
              message: 'Old user password cannot be empty'
            },
            stringLength: {
              min: 6,
              max: 19,
              message: 'The length of user's old password is greater than 5 and less than 20'
            },
            regexp: {
              regexp: /^[^ ]+$/,
              message: 'Old password of user cannot have space'
            }
          }
        },
        newPassword: {
          validators: {
            notEmpty: {
              message: 'User new password cannot be empty'
            },
            identical: {
              field: 'comfirmPassword',
              message: 'The new password of the user is inconsistent with the confirmed password!'
            },
            stringLength: {
              min: 6,
              max: 19,
              message: 'The length of the user's new password is greater than 5 and less than 20'
            },
            regexp: {
              regexp: /^[^ ]+$/,
              message: 'User new password cannot have space'
            }

          }
        },
        comfirmPassword: {
          validators: {
            identical: {
              field: 'newPassword',
              message: 'The new password of the user is inconsistent with the confirmed password!'
            },
            notEmpty: {
              message: 'User confirmation password cannot be empty'
            },
            stringLength: {
              min: 6,
              max: 19,
              message: 'User confirms that the password length is greater than 5 and less than 20'
            },

            regexp: {
              regexp: /^[^ ]+$/,
              message: 'User confirmation password cannot have space'
            }
          }
        }
      }
    })
        .on('error.validator.bv', function (e, data) {//This method is to make the error message display only the latest one (sometimes multiple error messages will appear at the same time, use this method to solve the problem)
          data.element
              .data('bv.messages')
              // Hide all the messages
              .find('.help-block[data-bv-for="' + data.field + '"]').hide()
          // Show only message associated with current validator
              .filter('[data-bv-validator="' + data.validator + '"]').show();
        })
        .on('error.field.bv', function (e, data) {//When "user confirm password" is not entered, "user new password" does not prompt "user new password is inconsistent with confirm password"
          // $(e.target)  --> The field element
          // data.bv      --> The BootstrapValidator instance
          // data.field   --> The field name
          // data.element --> The field element
          if (data.field == 'newPassword') {
            var len1 = data.element.val().length;
            var len2 = $('#comfirmPassword').val().length;
            var k = data.element.val().indexOf(" ");
            if (len1 > 5 && len2 < 6 && k < 0) {
              var $parent = data.element.parents('.form-group');
              $parent.removeClass('has-error');
              $parent.find('.form-control-feedback[data-bv-icon-for="' + data.field + '"]').hide();
              data.element.siblings('[data-bv-validator="identical"]').hide();
            }
          }
        });

I think when I encounter problems with plug-ins, Baidu can't find the answer to take a good look at the api documents, many times the answer is in the api documents.

Posted by tcl4p on Tue, 05 May 2020 02:10:07 -0700