2018-01-17 10:25:43 sinat_34123577 阅读数 1371

问题描述:一个登陆页面,添加BootstrapValidator表单验证之后,输入格式验证正确,但点击登陆后没有提交表单,登陆按钮变为不可选,再次编辑任意一个输入框之后才能成功提交。

原来的登陆按钮是这么写的:

<button type="submit" name="submit" class="btn btn-default btn-block btn-success">登录</button>
解决方法:

name属性值不能为submit,改一下就好了。(具体原因我也不是很清楚,欢迎小伙伴来交流一下~)修改之后:

<button type="submit" name="Submit" class="btn btn-default btn-block btn-success">登录</button>



2017-05-17 09:50:07 u012123026 阅读数 1149

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

2019-04-08 11:48:26 niunai112 阅读数 447

现在的项目在用thymeleaf模板,所以不可避免的需要调一下前端的代码。

在项目中出现了一个问题,就是明明没有在bootstrapValidator中定义的字段却进行了验证判断。
问题原因是在html的标签中加了required,导致在验证的时候自动增加了对这个字段的验证。

解决方案一:
去掉required属性

解决方案二:

$("#form").bootstrapValidator('removeField','name');

请把form和name替换成你项目中的属性

2018-01-21 01:47:45 weixin_38312031 阅读数 475

适配bootstrap的表单验证插件bootstrap-Validator

@[命令行|Git|代码管理]


最近在做软件工程的时候,做到表单验证,就找了jQuery的Validator库,虽然也还算好用,但是样式真的太丑了,还有一个莫名其妙的炫酷bug,找来找去,才发现原来bootstrap就有适配的Validator库

链接库

从github下载链接bootstrap Validator下载
与之前的bootstrap-editor等插件相同,第一要做的就是把库链接进html文件

<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet"/>
<script src="bootstrap/js/jquery-1.11.2.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<link href="bootstrapvalidator/dist/css/bootstrapValidator.min.css" rel="stylesheet">
<script src="bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script>
<script src="bootstrapvalidator/dist/js/language/zh_CN.js"></script>

先把bootstrap自带的css,js链接进去,再链接Validator的css和js,最后记得加上中文包

HTML文件

自己按照bootstrap的要求写一个表单

<div class="row">
     <div class="col-lg-offset-4 col-lg-4 col-md-6 col-md-offset-3 col-sm-6 col-sm-offset-3 col-xs-10 col-xs-offset-1">
      <form role="form" style="margin:5%;" id="registform">
             <div class="form-group">
                 <label for="Username">学号</label>
                 <input  type="text" name="Username" class="form-control" id="Username" maxlength="10" placeholder="学号">
             </div> 
             <div class="form-group">
                 <label for="Email">邮箱</label>
                 <input  type="Email"  name="Email" class="form-control" id="Email"
                 maxlength="50" placeholder="邮箱">
             </div>
             <div class="form-group">
                 <label for="Password">密码</label>
                 <input  type="password"  name="Password" class="form-control" id="Password" maxlength="16" placeholder="请输入密码">
             </div>
             <div class="form-group">
                 <label for="ConPassword">验证密码</label>
                 <input  type="password"  name="ConPassword" class="form-control" id="ConPassword" maxlength="16" placeholder="请再次输入密码">
             </div>
             <div align="center">
             <label class="radio-inline">
                 <input type="radio" name="option" id="option1" value="option1" checked>我是助教
             </label>
             <label class="radio-inline">
                 <input type="radio" name="option" id="option2"  value="option2"> 我是学生
             </label>
             </div>
             <br>
             <button type="submit" class="btn btn-default center-block" style="width:200px;">注&nbsp;册</button>
         </form>    
      </div>
      </div>

如上,效果在大屏幕下大概就这样,当然中间有一些比如SIGN UP和注册不是代码中表单的内容
这里写图片描述

添加表单验证代码

    <script type="text/javascript">
    $(document).ready(function(){
        $("#registform").bootstrapValidator({
            message:"未验证",
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields:{
               Username:{
                   message:"学号还未验证",
                   validators:{
                       notEmpty:{
                           message:"学号不可为空"
                       },
                       stringLength:{
                           min:10,
                           max:10,
                           message:"学号长度为10"
                       }
                   }
               },
               Email:{
                   validators:{
                       notEmpty:{
                           message:"邮箱不可为空"
                       },
                       emailAddress:{
                           message:"邮箱名有误"
                       },
                       stringLength:{
                           max:50,
                           message:"邮箱长度不可超过50"
                       }
                   }
               },
               Password:{
                   message:"密码还未验证",
                   validators:{
                       notEmpty:"密码不能为空",
                       stringLength:{
                           min:6,
                           max:16,
                           message:"密码长度在6到16之间"
                       }
                   }
               },
               ConPassword:{
                   message:"密码重复还未验证",
                   validators:{
                       notEmpty:{
                           message:"密码验证不可为空"
                       },
                       stringLength:{
                           min:6,
                           max:16,
                           message:"密码长度在6到16之间"
                       },
                       identical:{
                           field:"Password",
                           message:"两次密码不同,请重新输入"
                       }
                   }
               }
            }
        });     
    }); 
    </script>

对于用过JQuery-Validator插件的同学一定觉得非常清楚明白了,message就是输出的提示符

由上面的代码可以看出在validators属性对应一个Json对象,里面可以包含多个验证的类型:
- notEmpty:非空验证;
- stringLength:字符串长度验证;
- regexp:正则表达式验证;
- emailAddress:邮箱地址验证(都不用我们去写邮箱的正则了~~)
除此之外,在文档里面我们看到它总共有46个验证类型,我们抽几个常见的出来看看:
- base64:64位编码验证;
- between:验证输入值必须在某一个范围值以内,比如大于10小于100;
- creditCard:身份证验证;
- date:日期验证;
- ip:IP地址验证;
- numeric:数值验证;
- phone:电话号码验证;
- uri:url验证;
Alt text

此时效果如上图所示

2018-07-02 10:38:00 qq_39565822 阅读数 123
;

基于Bootstrap的强大jQuery表单验证插件

当前位置:主页 > jQuery库 > 表单 > 基于Bootstrap的强大jQuery表单验证插件
基于Bootstrap的强大jQuery表单验证插件
 分享:
 标签: bootstrap 表单验证

插件介绍

formvalidation是一款功能非常强大的基于Bootstrap的jQuery表单验证插件。该jQuery表单验证插件内置了16种表单验证器,你也可以通过Bootstrap Validator's APIs写自己的表单验证器。

浏览器兼容性

浏览器兼容性
 时间:2015-05-10 阅读:49133
简要教程

formvalidation是一款功能非常强大的基于Bootstrap的jQuery表单验证插件。该jQuery表单验证插件内置了16种表单验证器,你也可以通过Bootstrap Validator's APIs写自己的表单验证器。该表单验证插件的可用验证器有:

  • between:检测输入的值是否在两个指定的值之间。
  • callback:通过回调函数返回验证信息。
  • creditCard:验证信用卡格式。
  • different:如果输入值和给定的值不同返回true
  • digits:如果输入的值只包含数字返回true
  • emailAddress:验证电子邮件格式是否有效。
  • greaterThan:如果输入的值大于或等于指定的值返回true
  • hexColor:验证一个hex格式的颜色值是否有效。
  • identical:验证输入的值是否和指定字段的值相同。
  • lessThan:如果输入的值小于或等于指定的值返回true
  • notEmpty:检测字段是否为空。
  • regexp:检测输入值是否和指定的javascript正则表达式匹配。
  • remote:通过AJAX请求来执行远程代码。
  • stringLength:验证字符串的长度。
  • uri:验证URL地址是否有效。
  • usZipCode:验证美国的邮政编码格式。

这个jQuery表单验证插件还可以和FoundationPureSemantic UIUIKit一起配合使用。产科下面的效果图。

formvalidation和Bootstrap一起使用:

formvalidation配合Bootstrup使用的效果

formvalidation和Foundation一起使用:

formvalidation配合Foundation使用的效果

formvalidation和Pure一起使用:

formvalidation配合Pure使用的效果

formvalidation和UI Kit一起使用:

formvalidation配合UI Kit使用的效果

formvalidation和Semantic UI一起使用:

formvalidation配合Semantic UI使用的效果

 使用方法

使用这个表单验证插件首先要引入必要的js和css文件。jQuery要求1.9.1+以上的版本。

<script src="jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../dist/js/bootstrapValidator.js"></script>
<link rel="stylesheet" href="../dist/css/bootstrapValidator.css"/>              
 HTML结构

该表单验证插件的最基本例子的HTML结果如下:

<form id="defaultForm" method="post" class="form-horizontal">
  <div class="form-group">
    <label class="col-lg-3 control-label">Username</label>
    <div class="col-lg-5">
      <input type="text" class="form-control" name="username" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">Email address</label>
    <div class="col-lg-5">
      <input type="text" class="form-control" name="email" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">Password</label>
    <div class="col-lg-5">
      <input type="password" class="form-control" name="password" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label">Retype password</label>
    <div class="col-lg-5">
      <input type="password" class="form-control" name="confirmPassword" />
    </div>
  </div>
  <div class="form-group">
    <label class="col-lg-3 control-label" id="captchaOperation"></label>
    <div class="col-lg-2">
      <input type="text" class="form-control" name="captcha" />
    </div>
  </div>
  <div class="form-group">
    <div class="col-lg-9 col-lg-offset-3">
      <button type="submit" class="btn btn-primary">Sign up</button>
    </div>
  </div>
</form>               
 JAVASCRIPT

在页面加载完毕之后,通过下面的方法来初始化该表单验证插件:

<script type="text/javascript">
  $(document).ready(function() {
  // Generate a simple captcha
  function randomNumber(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
  };
  $('#captchaOperation').html([randomNumber(1, 100), '+', randomNumber(1, 200), '='].join(' '));
 
  $('#defaultForm').bootstrapValidator({
    message: 'This value is not valid',
      fields: {
      username: {
      message: 'The username is not valid',
      validators: {
      notEmpty: {
      message: 'The username is required and can\'t be empty'
      },
      stringLength: {
      min: 6,
      max: 30,
      message: 'The username must be more than 6 and less than 30 characters long'
      },
      regexp: {
        regexp: /^[a-zA-Z0-9_\.]+$/,
        message: 'The username can only consist of alphabetical, number, dot and underscore'
        },
        different: {
        field: 'password',
        message: 'The username and password can\'t be the same as each other'
        }
      }
    },
    email: {
      validators: {
        notEmpty: {
          message: 'The email address is required and can\'t be empty'
        },
        emailAddress: {
          message: 'The input is not a valid email address'
        }
      }
    },
    password: {
    validators: {
      notEmpty: {
          message: 'The password is required and can\'t be empty'
        },
        identical: {
          field: 'confirmPassword',
          message: 'The password and its confirm are not the same'
        },
        different: {
          field: 'username',
          message: 'The password can\'t be the same as username'
        }
      }
    },
    confirmPassword: {
      validators: {
        notEmpty: {
        message: 'The confirm password is required and can\'t be empty'
        },
        identical: {
        field: 'password',
        message: 'The password and its confirm are not the same'
        },
        different: {
        field: 'username',
        message: 'The password can\'t be the same as username'
        }
      }
    },
    captcha: {
      validators: {
        callback: {
          message: 'Wrong answer',
          callback: function(value, validator) {
          var items = $('#captchaOperation').html().split(' '), sum = parseInt(items[0]) + parseInt(items[2]);
          return value == sum;
          }
        }
      }
    }
  }
  });
});
</script>

 配置参数

该表单验证插件的默认参数配置如下:

// The first invalid field will be focused automatically
autoFocus: true,
 
// Support declarative usage (setting options via HTML 5 attributes)
// Setting to false can improve the performance
declarative: true,
 
// The form CSS class
elementClass: 'fv-form',
 
// Use custom event name to avoid window.onerror being invoked by jQuery
// See #630
events: {
  // Support backward
  formInit: 'init.form.fv',
  formError: 'err.form.fv',
  formSuccess: 'success.form.fv',
  fieldAdded: 'added.field.fv',
  fieldRemoved: 'removed.field.fv',
  fieldInit: 'init.field.fv',
  fieldError: 'err.field.fv',
  fieldSuccess: 'success.field.fv',
  fieldStatus: 'status.field.fv',
  localeChanged: 'changed.locale.fv',
  validatorError: 'err.validator.fv',
  validatorSuccess: 'success.validator.fv'
},
 
// Indicate fields which won't be validated
// By default, the plugin will not validate the following kind of fields:
// - disabled
// - hidden
// - invisible
//
// The setting consists of jQuery filters. Accept 3 formats:
// - A string. Use a comma to separate filter
// - An array. Each element is a filter
// - An array. Each element can be a callback function
//    function($field, validator) {
//  $field is jQuery object representing the field element
//  validator is the BootstrapValidator instance
//  return true or false;
//    }
//
// The 3 following settings are equivalent:
//
// 1) ':disabled, :hidden, :not(:visible)'
// 2) [':disabled', ':hidden', ':not(:visible)']
// 3) [':disabled', ':hidden', function($field) {
//return !$field.is(':visible');
//  }]
excluded: [':disabled', ':hidden', ':not(:visible)'],
 
// Map the field name with validator rules
fields: null,
 
// Live validating option
// Can be one of 3 values:
// - enabled: The plugin validates fields as soon as they are changed
// - disabled: Disable the live validating. The error messages are only shown after the form is submitted
// - submitted: The live validating is enabled after the form is submitted
live: 'enabled',
 
// Locale in the format of languagecode_COUNTRYCODE
locale: 'en_US',
 
// Default invalid message
message: 'This value is not valid',
 
// The field will not be live validated if its length is less than this number of characters
threshold: null,
 
// Whether to be verbose when validating a field or not.
// Possible values:
// - true:  when a field has multiple validators, all of them will be checked, and respectively - if errors occur in
//  multiple validators, all of them will be displayed to the user
// - false: when a field has multiple validators, validation for this field will be terminated upon the first encountered error.
//  Thus, only the very first error message related to this field will be displayed to the user
verbose: true,
 
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
// These options mostly are overridden by specific framework
// ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 
button: {
  // The submit buttons selector
  // These buttons will be disabled to prevent the valid form from multiple submissions
  selector: '[type="submit"]',
 
  // The disabled class
  disabled: ''
},
 
control: {
  // The CSS class for valid control
  valid: '',
 
  // The CSS class for invalid control
  invalid: ''
},
 
err: {
  // The CSS class of each message element
  clazz: '',
 
  // The error messages container. It can be:
  // - 'tooltip' if you want to use Bootstrap tooltip to show error messages
  // - 'popover' if you want to use Bootstrap popover to show error messages
  // - a CSS selector indicating the container
  // In the first two cases, since the tooltip/popover should be small enough, the plugin only shows only one error message
  // You also can define the message container for particular field
  container: null,
 
  // Used to determine where the messages are placed
  parent: null
},
 
// Shows ok/error/loading icons based on the field validity.
icon: {
  valid: null,
  invalid: null,
  validating: null,
  feedback: ''
},
 
row: {
  // The CSS selector for indicating the element consists of the field
  // You should adjust this option if your form group consists of many fields which not all of them need to be validated
  selector: null,
  valid: '',
  invalid: '',
  feedback: ''
}               

更多信息请参考formvalidation表单验证插件官方网站:http://formvalidation.io/

本文版权属于jQuery之家,转载请注明出处:http://www.htmleaf.com/jQuery/Form/201505101807.html

相关插件

基于bootstrap的jquery弹出层确认框插件
基于bootstrap的jquery弹出层确认框插件
支持移动手机的jquery放大镜插件enlarge.js
支持移动手机的jquery放大镜插件enlarge.js
jquery仿PPT幻灯片特效插件ppt.js
jquery仿PPT幻灯片特效插件ppt.js
强大的jquery下拉分页选择插件SelectPage
强大的jquery下拉分页选择插件SelectPage

网友评论

  • 评论
17人参与,12条评论
  • 最新评论
2017年9月26日 15:16TIMEOFSUNRISE [北京市网友]

关闭验证怎么做?

 回复     
2016年6月14日 10:21o丨佐佴圈灬 [江西省南昌市网友]
1o丨佐佴圈灬 [江西省南昌市网友]

为什么在弹出的模态窗口中提示信息隐藏不了

代码中看到提示信息样式为display:none但是就是不会隐藏,求解决方案

 回复     
2016年6月14日 10:19o丨佐佴圈灬 [江西省南昌市网友]

为什么在弹出的模态窗口中提示信息隐藏不了

 回复     
2016年6月8日 14:35夺地眩 [广东省深圳市网友]

对于input type=hidden,怎么弄呢

 回复     
2016年3月18日 15:41癫颠滇巅 [广东省广州市网友]

怎么用这个验证用户名的唯一性呢

 回复     
2016年2月19日 16:38qq364163838 [上海市网友]

想请问在点击提交的时候 页面是刷新了吗?如果要获取表单输入的内容到页面的话 该肿么办?

 回复  1   
2016年1月24日 14:48花饰雪 [上海市网友]

基于Bootstrap的强大jQuery表单验证插件

 回复     
2015年10月29日 11:43木头 [上海市网友]

tooltip提示方式,能自定义tooltip的参数吗?

 回复     
2015年8月31日 21:00若离 [广东省广州市网友]
1若离 [广东省广州市网友]

请问以下 这个插件是如何使用 语言包的 ?,类似 language/zh_CN.js 这种

直接引入想要的语言js文件既可以了,下面引入的是中文:

嗯,十分感谢,我试试,貌似官网formvalidator 这个是要收费的,感谢无私奉献啊

 回复  1   
2015年8月31日 20:40jQuery之家 管理员
1若离 [广东省广州市网友]

请问以下 这个插件是如何使用 语言包的 ?,类似 language/zh_CN.js 这种

直接引入想要的语言js文件既可以了,下面引入的是中文:
<script type=“text/javascript” src=“dist/js/language/zh_CN.js”></script>

 回复     
2015年8月31日 20:35若离 [广东省广州市网友]

请问以下 这个插件是如何使用 语言包的 ?,类似 language/zh_CN.js 这种

 回复  1   
2015年5月11日 16:07yufu2000 [上海市网友]

mark,以备不时之需

 回复     

bootstrap表单验证

阅读数 358

Bootstrap3 表单

阅读数 126

没有更多推荐了,返回首页