bootstrap表单验证 FormValidation API

来源:互联网 发布:windows 7 光盘映像 编辑:程序博客网 时间:2024/06/06 03:44

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

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

// Get plugin instancevar formValidation = $(form).data('formValidation');// and then call methodformValidation.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的 字段名称或字段元素

原创粉丝点击