bootstrapValidator 中文API

• 2019 年 11 月 21 日
• 筆記

版權聲明：本文為部落客原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接和本聲明。

本文鏈接：https://blog.csdn.net/wangtongxue123456/article/details/77098054

用法

使用插件初始化表單後$(form).bootstrapValidator(options)，有兩種方法調用插件方法：

// Get plugin instance  var bootstrapValidator = $(form).data('bootstrapValidator');    // and then call method  bootstrapValidator.methodName(parameters)

要麼：

$(form).bootstrapValidator(methodName, parameters);

第一種方法主要返回BootstrapValidator實例，同時第二種方法總是返回表示表單的jQuery對象。

所以，可以鏈接方法如下：

// The first way  $(form)      .data('bootstrapValidator')      .updateStatus('birthday', 'NOT_VALIDATED')      .validateField('birthday');    // The second one  $(form)      .bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')      .bootstrapValidator('validateField', 'birthday');

API

以下是插件提供的公共方法列表。

方法使用與以下相同的格式：

methodName()

methodName(requiredParameter*, optionalParameter, ...): Type of return value – 方法的目的

激活addField

addField(field*, options): BootstrapValidator – 添加一個新的欄位。

• 從欄位的HTML屬性解析的選項
• 調用插件時設置的當前選項

如果要添加新欄位後要執行其他任務，則觸發added.field.bv事件：

$(document).ready(function() {      $(form)          .bootstrapValidator(options)          .on('added.field.bv', function(e, data) {              // $(e.target)  --> The form instance              // $(e.target).data('bootstrapValidator')              //              --> The BootstrapValidator instance                // data.field   --> The field name              // data.element --> The new field element              // data.options --> The new field options                // Do something ...          });  });

例

• 添加動態欄位

defaultSubmit

defaultSubmit(): BootstrapValidator – 使用默認提交提交表單。

在提交表單時也不會執行任何驗證。當您要在自定義提交處理程式中提交表單時，可能會使用它。

破壞

destroy() – 破壞插件。

它將刪除所有錯誤消息，回饋圖標以及關閉插件創建的事件。

disableSubmitButtons

disableSubmitButtons(disabled): BootstrapValidator – 禁用或啟用提交按鈕

例

• 始終啟用提交按鈕

enableFieldValidators

enableFieldValidators(field*, enabled*, validator): BootstrapValidator – 啟用，禁用驗證器給定欄位

例

• 啟用，禁用驗證器

getDynamicOption

getDynamicOption(field*, option*): String – 返回可以動態設置的選項值。

例如，zipCode驗證器具有country可以動態更改select元素的選項。

getFieldElements

getFieldElements(field): jQuery[] – 按照給定的名稱檢索欄位元素。 返回表示該欄位的jQuery元素的數組，或者null如果找不到這些欄位。

getInvalidFields

getInvalidFields(): jQuery[] – 返回無效欄位的列表。

的getMessages

getMessages(field, validator): String[] – 獲取錯誤消息。

例

• 顯示自定義區域中的消息

getOptions

getOptions(field, validator, option): String|Object – 獲取欄位選項。

getSubmitButton

getSubmitButton(): jQuery – 返回顯示點擊的提交按鈕的jQuery元素。null如果沒有點擊提交按鈕返回。

已驗證

isValid(): Boolean– true如果所有表單域都有效，則返回。否則返回false。

調用這個之後，確保已經調用了validate方法。

isValidContainer

isValidContainer(container*): Boolean– true如果容器中的所有欄位都有效，則返回。否則返回false。

在使用嚮導（例如選項卡），崩潰時，這很有用。

isValidField

isValidField(field*): Boolean – 檢查該欄位是否有效。true如果所有的欄位驗證器都通過，則返回。否則返回false。

removeField

removeField(field*): BootstrapValidator – 刪除給定欄位

通過觸發removed.field.bv事件，您可以在刪除給定欄位後執行其他任務：

$(document).ready(function() {      $(form)          .bootstrapValidator(options)          .on('removed.field.bv', function(e, data) {              // $(e.target)  --> The form instance              // $(e.target).data('bootstrapValidator')              //              --> The BootstrapValidator instance                // data.field   --> The field name              // data.element --> The new field element                // Do something ...          });  });

例

• 添加動態欄位

resetField

resetField(field*, resetValue): BootstrapValidator – 重置給定欄位。它隱藏錯誤消息和回饋圖標。

重置表格

resetForm(resetFormData): BootstrapValidator– 重置表格。它隱藏所有錯誤元素和回饋圖標。所有的欄位都被標記為未被驗證。

$(form).bootstrapValidator(options);  $(form).data('bootstrapValidator').resetForm();

revalidateField

revalidateField(field*): BootstrapValidator – 重新驗證給定欄位。

當您需要重新驗證其值由其他插件更新的欄位時使用它。

默認情況下，一旦該欄位已經被驗證並被標記為有效的插件，該插件就不會重新驗證該欄位。當與其他插件一起使用時，欄位值被更改，因此需要重新驗證。

幕後，方法相當於：

$(form).data('bootstrapValidator')      .updateStatus(field, 'NOT_VALIDATED')      .validateField(field);    // Or  $(form).bootstrapValidator('updateStatus', field, 'NOT_VALIDATED')         .bootstrapValidator('validateField', field);

updateMessage

updateMessage(field*, validator*, message*): BootstrapValidator – 更新錯誤消息。

updateOption

updateOption(field*, validator*, option*, value*): BootstrapValidator – 更新特定驗證器的選項。

更新狀態

updateStatus(field*, status*, validator): BootstrapValidator – 更新給定欄位的驗證器結果

驗證

validate(): BootstrapValidator – 手動驗證表單。當您想通過單擊按鈕或鏈接而不是提交按鈕來驗證表單時，這很有用。

$(form).bootstrapValidator(options).bootstrapValidator('validate');    // or  $(form).bootstrapValidator(options);  $(form).data('bootstrapValidator').validate();

validateField

validateField(field*): BootstrapValidator – 驗證給定欄位。