1. 程式人生 > >bootstrapvalidator 外掛密碼修改驗證

bootstrapvalidator 外掛密碼修改驗證

這裡寫圖片描述
網上應該有很多教程,當然我在用的時候也是直接百度貼程式碼的,但是有一點不夠完美,就是‘使用者新密碼’輸入,‘使用者確認密碼’ 沒輸入的時候,‘使用者新密碼’總是會提示‘使用者新密碼與確認密碼不一致’,當然這也是沒什麼錯,但是坑爹的是測試說不行啊,說‘使用者確認密碼’ 沒輸入之前不需要提示這個資訊。好吧,只能改了。以下是修改後的程式碼:

$('#operation-password').bootstrapValidator({
      message: '該值無效',
      trigger: 'blur keyup',
      feedbackIcons: {
        valid: 'glyphicon glyphicon-ok'
, invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { /*驗證:規則*/ oldPassword: { validators: { notEmpty: { message: '使用者舊密碼不能為空' }, stringLength: { min
: 6, max: 19, message: '使用者舊密碼長度大於5小於20' }, regexp: { regexp: /^[^ ]+$/, message: '使用者舊密碼不能有空格' } } }, newPassword: { validators: { notEmpty: { message: '使用者新密碼不能為空'
}, identical: { field: 'comfirmPassword', message: '使用者新密碼與確認密碼不一致!' }, stringLength: { min: 6, max: 19, message: '使用者新密碼長度大於5小於20' }, regexp: { regexp: /^[^ ]+$/, message: '使用者新密碼不能有空格' } } }, comfirmPassword: { validators: { identical: { field: 'newPassword', message: '使用者新密碼與確認密碼不一致!' }, notEmpty: { message: '使用者確認密碼不能為空' }, stringLength: { min: 6, max: 19, message: '使用者確認密碼長度大於5小於20' }, regexp: { regexp: /^[^ ]+$/, message: '使用者確認密碼不能有空格' } } } } }) .on('error.validator.bv', function (e, data) {//這個方法是讓錯誤資訊只顯示最新的一個(有時會出現多個錯誤資訊同時顯示用這個方法解決) 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) {//‘使用者確認密碼’ 沒輸入的時候,‘使用者新密碼’不提示‘使用者新密碼與確認密碼不一致’ // $(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(); } } });

我覺的用外掛遇到問題的時候,百度找不到答案可以好好的把api文件仔細看看,很多時候答案就在api文件裡面。