bootstrap表单验证 FormValidation API

最新推荐文章于 2024-05-24 16:04:57 发布

久如云漂泊

最新推荐文章于 2024-05-24 16:04:57 发布

阅读量3.3k

点赞数 2

本文链接：https://blog.csdn.net/u012123026/article/details/72356851

版权

html5 同时被 3 个专栏收录

44 篇文章 2 订阅

订阅专栏

bootstrap

10 篇文章 0 订阅

订阅专栏

jquery

9 篇文章 0 订阅

订阅专栏

官网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的字段名称或字段元素

久如云漂泊

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
bootstrap表单验证 FormValidation API

官网http://formvalidation.io/api/用法使用插件初始化表单后$(form).formValidation(options)，有两种方法调用插件方法：// Get plugin instancevar formValidation = $(form).data('formValidation');// and then call methodformValidatio
复制链接

扫一扫