DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> BootStrap 動態添加驗證項和取消驗證項的實現方法
BootStrap 動態添加驗證項和取消驗證項的實現方法
編輯:關於JavaScript     

bootstrap 中的bootstrapValidator可以對前端的數據進行驗證,但是有的時候我們需要動態的添加驗證,這樣需要我們動態的對bootstrapValidator的內容做修改。

  傳統的bootstrapValidator驗證是

$('#MaintainEntryForm').bootstrapValidator({
message: '輸入值無效!',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
Specifications: {
validators: {
notEmpty: { message: '請輸入規格!' }
}
},
ProductNameEN: {
validators: {
notEmpty: { message: '請輸入英文名稱!' }
}
},
ApplyUnit: {
validators: {
notEmpty: { message: '請輸入申報單位!' },
stringLength: {
min: 1,
max: 3,
message: '申報單位最多輸入3位!'
}
}
},
SuttleWeight: {
validators: {
notEmpty: { message: '請輸入淨重!' },
//regexp: { regexp: /^\d{0,8}\.{0,1}(\d{1,3})?$/, message: '淨重只能輸入大於等於0的整數或者3位小數!' },
callback: {
message: '淨重只能輸入大於0的整數或者3位小數!',
callback: function (value, validator, $field) {
var reg = /^\d{0,8}\.{0,1}(\d{1,3})?$/;
return parseFloat(value) > 0 && reg.test(value);
}
}
}
}
}
}).on("success.form.bv", function (e) {
if (EntryInfo.SaveType == 1) {
EntryInfo.SaveEntryInfo();
}
else if (EntryInfo.SaveType == 2) {
EntryInfo.SaveAndSubmitAudit();
}
});

  這樣的驗證在頁面有交互的需求的時候不能夠滿足條件,所以我們需要動態的對驗證條件進行修改,這裡的做法是先把所有可能用到的條件先全部添加進去,在指定條件下去除篩選條件。

  去除方式

$('#MaintainEntryForm').data('bootstrapValidator').validateField('ApplyUnit');

  這樣 名稱為ApplyUnit的驗證凡是就不會起作用了

對於已經提示報錯信息的要去除驗證信息的可以使用以下方式

$('#MaintainEntryForm').data('bootstrapValidator')
.updateStatus('ApplyQty', 'NOT_VALIDATED', null)
.validateField('ApplyQty');

  這樣頁面對應的ApplyQty 字段後面驗證信息就會消失 不用重置整個bootstrapValidator 就可以了

以上所述是小編給大家介紹的BootStrap 動態添加驗證項和取消驗證項的實現方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對網站的支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved