bootstrapvalidator 外掛密碼修改驗證
阿新 • • 發佈:2019-01-04
網上應該有很多教程,當然我在用的時候也是直接百度貼程式碼的,但是有一點不夠完美,就是‘使用者新密碼’輸入,‘使用者確認密碼’ 沒輸入的時候,‘使用者新密碼’總是會提示‘使用者新密碼與確認密碼不一致’,當然這也是沒什麼錯,但是坑爹的是測試說不行啊,說‘使用者確認密碼’ 沒輸入之前不需要提示這個資訊。好吧,只能改了。以下是修改後的程式碼:
$('#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文件裡面。