bootstrap表单验证 FormValidation API

官网http://formvalidation.io/api/

用法

使用插件初始化表单后$(form).formValidation(options)，有两种方法调用插件方法：

// Get plugin instance
var formValidation = $(form).data('formValidation');

// and then call method
formValidation.methodName(parameters)

要么：

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

第一种方法主要返回FormValidation实例，同时第二种方法总是返回表示表单的jQuery对象。

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

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

// The second one
$(form)
.formValidation('updateStatus', 'birthday', 'NOT_VALIDATED')
.formValidation('validateField', 'birthday');

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

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

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

addField

addField(field*, options): FormValidation - 添加一个新的字段。

参数 类型 描述

field String| jQuery 字段名称或字段元素

options : Object 字段选项。如果没有定义，这些选项将通过以下方式合并：

- 从字段的HTML属性解析的选项

- 调用插件时设置的当前选项

如果要添加新字段后要执行其他任务，则触发added.field.fv事件：

$(document).ready(function() {
$(form)
.formValidation(options)
.on('added.field.fv', function(e, data) {
// $(e.target)  --> The form instance
// $(e.target).data('formValidation')
//              --> The FormValidation instance

// data.field   --> The field name
// data.element --> The new field element
// data.options --> The new field options

// Do something ...
});
});

例子：（有空再加链接）

添加动态字段

$("#result").change(function(){
$('#defaultForm').formValidation('removeField', $("#comment"))//删除验证给定字段
if($(this).val()==0){
//通过
showPayWay()
//添加验证给定字段
$('#defaultForm').formValidation('addField', 'comment', formObj.sameAs(true))//选填
}else{
//不通过
hidePayWay()

$('#defaultForm').formValidation('addField', 'comment', formObj.sameAs(false))//必填

}
//重新验证给定字段。
$("#defaultForm").formValidation('revalidateField', "comment");
});

defaultSubmit

defaultSubmit(): FormValidation - 使用默认提交提交表单。

在提交表单时也不会执行任何验证。当您要在自定义提交处理程序中提交表单时，可能会使用它。

destroy

destroy() - 破坏插件。

它将删除所有错误消息，反馈图标以及关闭插件创建的事件。

disableSubmitButtons

disableSubmitButtons(disabled): FormValidation - 禁用或启用提交按钮

参数 类型 描述

disabled 布尔 可以是true或false

例子：（有空再加链接）

enableFieldValidators

enableFieldValidators 始终启用提交按钮

enableFieldValidators(field*, enabled*, validator): FormValidation - 启用，禁用验证器给定字段

参数 类型 描述

field String 字段名称

enabled 布尔 如果true，启用字段验证器。如果false，禁用字段验证器

validator String 验证器名称。如果未设置，所有字段验证器将被启用或禁用

例子：（有空再加链接）

条件验证

启用，禁用验证器

在同一个字段上切换验证器

在母版页中切换验证器

getDynamicOption

getDynamicOption(field*, option*): String - 返回可以动态设置的选项值。

例如，zipCode验证器具有country可以动态更改select元素的选项。

参数 类型 描述

field String| jQuery的 字段名称或元素

option String 该动态选项

getFieldElements

getFieldElements(field): jQuery[] - 按照给定的名称检索字段元素。

返回表示该字段的jQuery元素的数组，或者null如果找不到这些字段。

参数 类型 描述

field String 字段名称

getInvalidFields

getInvalidFields(): jQuery[] - 返回无效字段的列表。

例子：（有空再加链接）

激活包含无效字段的选项卡

的

getMessages

getMessages(field, validator): String[] - 获取错误消息。

参数 类型 描述

field String| jQuery的 字段名称或字段元素

如果未定义字段，则该方法将返回所有字段的所有错误消息

validator 串 验证器的名称

如果未定义验证器，则该方法返回所有验证器的错误消息。

例子：（有空再加链接）

显示自定义区域中的消息

getOptions

getOptions(field, validator, option): String|Object - 获取字段选项。

参数 类型 描述

field String| jQuery的 字段名称或字段元素 如果未定义字段，则该方法返回表单选项。

validator String 验证器的名称 如果未定义验证器，则该方法返回所有字段选项。

option String 选项名称 如果未定义，则该方法返回给定验证器的选项

getSubmitButton

getSubmitButton(): jQuery - 返回显示点击的提交按钮的jQuery元素。null如果没有点击提交按钮返回。

例子：（有空再加链接）

使用多个按钮

isValid

isValid(): Boolean - 检查表格的有效性。它可以采取三个值之一：

true 如果所有字段都有效

false 如果有一个无效字段

null 如果至少有一个字段尚未被验证或被验证

确保在调用此函数之前已经调用了validate（）方法。

var fv=$form.data('formValidation');
fv.validate();
if(fv.isValid()){
....
}

例子：（有空再加链接）

isValidContainer

isValidContainer(container*): Boolean - 它可以采用三个值之一：

true 如果属于该容器的所有字段都有效

false 如果属于容器的所有字段已经被验证，并且至少有一个无效字段

null 如果容器至少包含一个尚未验证的字段

使用validateContainer（container）方法，这些方法在使用向导（例如选项卡，可折叠面板）时非常有用。

参数 类型 描述

container String| jQuery的 容器选择器或容器元件

例子：（有空再加链接）

向导示例

isValidField

isValidField(field*): Boolean - 检查该字段是否有效。它可以采取三个值之一：

true 如果该字段通过所有验证器

false 如果该字段没有通过任何验证器

null 如果至少有一个验证器尚未验证或验证

参数 类型 描述

field String| jQuery的 字段名称或字段元素

例子：（有空再加链接）

验证相互依赖的字段

removeField

removeField(field*): FormValidation - 删除给定字段

参数 类型 描述

field String| jQuery的 字段名称或字段元素

通过触发removed.field.fv事件，可以在删除给定字段后执行其他任务：

$(document).ready(function() {
$(form)
.formValidation(options)
.on('removed.field.fv', function(e, data) {
// $(e.target)  --> The form instance
// $(e.target).data('formValidation')
//              --> The FormValidation instance

// data.field   --> The field name
// data.element --> The new field element

// Do something ...
});
});

例子：（有空再加链接）

添加动态字段

resetField

resetField(field*, resetValue): FormValidation - 重置给定字段。它隐藏错误消息和反馈图标。

参数 类型 描述

field String| jQuery的 字段名称或字段元素

resetValue 布尔 如果true，该方法将字段值重置为空或删除检查/选择的属性（用于收音机和复选框）。

例子：（有空再加链接）

单击图标时清除字段

resetForm

resetForm(resetFormData): FormValidation- 重置表格。它隐藏所有错误元素和反馈图标。所有的字段都被标记为未被验证。

参数 类型 描述

resetFormData 布尔 如果true，该方法重置具有验证器规则的字段。

(form).formValidation(options);(form).data(‘formValidation’).resetForm();

revalidateField

revalidateField(field*): FormValidation - 重新验证给定字段。

当您需要重新验证其值由其他插件更新的字段时使用它。

默认情况下，一旦该字段已经被验证并被标记为有效的插件，该插件就不会重新验证该字段。当与其他插件一起使用时，字段值被更改，因此需要重新验证。

方法相当于：

$(form).data('formValidation')
.updateStatus(field, 'NOT_VALIDATED')
.validateField(field);

// Or
$(form).formValidation('updateStatus', field, 'NOT_VALIDATED')
.formValidation('validateField', field);
//or
$(form).formValidation('revalidateField', field);
// $("#defaultForm").formValidation('revalidateField', "comment");
//$("[name=comment]")

参数 类型 描述

field String| jQuery的 字段名称或字段元素

例子：（有空再加链接）

以下示例描述如何重新验证使用Boostrap Datetime Picker的字段：

例子：（有空再加链接）

字段值以编程方式更改

玩其他插件

条款和条件协议验证

验证相互依赖的字段

验证多个输入为一个

updateMessage

updateMessage(field*, validator*, message*): FormValidation - 更新错误消息。

参数 类型 描述

field String| jQuery的 字段名称或字段元素

validator String 验证器名称

message String 错误消息

例子：（有空再加链接）

禁用日期

显示从服务器返回的自定义消息

更新验证器选项

验证国际电话号码

updateOption

updateOption(field*, validator*, option*, value*): FormValidation - 更新特定验证器的选项。

参数 类型 描述

field String| jQuery的 字段名称或字段元素

validator String 验证器名称

option String 选项名称

value String 选项值

例子：（有空再加链接）

更新验证器选项

updateStatus

更新状态

updateStatus(field*, status*, validator): FormValidation - 更新给定字段的验证器结果

参数 类型 描述

field String| jQuery的 字段名称或字段元素

status String 可以是NOT_VALIDATED，VALIDATING，INVALID或者VALID

validator String 验证器名称。如果null，该方法更新所有验证器的有效性结果

例子：（有空再加链接）

要求领域是独一无二的

比较时间

禁用日期

显示从服务器返回的自定义消息

验证信用卡到期日

验证国际电话号码

验证百分比值

fields['basicLength']={
verbose: false,
validators: {
notEmpty: {
message: '这是必填字段'
},
digits: {
message: '值不是整数或数字'
},
callback: {
message: '基本时长必须大于免费时长',
callback: function(value, validator, $field) {
var $thisId=$field.attr("id")
var id= parseInt($thisId.substr($thisId.length-1,1))
var freeLength = $("#freeLength"+id).val()//validator.getFieldElements('basicLength').val();
if (freeLength === '') {
return true;
}
if(parseInt(freeLength)<value){
validator.updateStatus('freeLength', validator.STATUS_VALID, 'callback');
return true;
}
return false;

}
}
}
}
fields['freeLength']={
verbose: false,
validators: {
notEmpty: {
message: '这是必填字段'
},
digits: {
message: '值不是整数或数字'
},
callback: {
message: '免费时长必须小于基本时长',
callback: function(value, validator, $field) {
var $thisId=$field.attr("id")
var id= parseInt($thisId.substr($thisId.length-1,1))
var basicLength = $("#basicLength"+id).val()//validator.getFieldElements('basicLength').val();
console.log(basicLength,"id",id,$thisId,"value==",value,parseInt(basicLength)>value)
if (basicLength === '') {
return true;
}
if(parseInt(basicLength)>value){
validator.updateStatus('basicLength', validator.STATUS_VALID, 'callback');
return true;
}
return false;

}
}
}
}

validate

validate(): FormValidation - 手动验证表单。当您想通过单击按钮或链接而不是提交按钮来验证表单时，这很有用。

$(form).formValidation(options).formValidation('validate');

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

var fv  =$('#dForm').data('formValidation');
fv.validate();

validateContainer

validateContainer(container*): FormValidation - 验证给定容器。

使用isValidContainer（容器）方法，这些方法在使用向导（例如选项卡，可折叠面板）时非常有用。

参数 类型 描述

container String| jQuery的 容器选择器或元件

validateField

validateField(field*): FormValidation - 验证指定字段。

参数 类型 描述

field String| jQuery的 字段名称或字段元素