bootstrapvalidator之API学习教程


Posted in Javascript onJune 29, 2017

最近项目用到了bootstrap框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件。我这里用的是0.5.2版本。

下面记录一下使用中学习到的相关API,不定期更新。

1. 获取validator对象或实例

 一般使用校验是直接调用$(form).bootstrapValidator(options)来初始化validator。初始化后有两种方式获取validator对象或实例,可以用来调用其对象的方法,比如调用resetForm来重置表单。有两种方式获取:

 1) 

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

这种方式获取的是BootstrapValidator的实例,可以直接调用其方法。

2) 

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

 这种方式获取的是代表当前form的jquery对象,调用方式是将方法名和参数分别传入到bootstrapValidator方法中,可以链式调用。
 两种方式的使用分别如下:

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

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

2. defaultSubmit()

使用默认的提交方式提交表单,调用此方法BootstrapValidator将不执行任何的校验。一般需要时可以放在validator校验的submitHandler属性里调用。

使用:

$('#defaultForm').bootstrapValidator({
 fields: {
   username: {
 message: 'The username is not valid',
 validators: {
   notEmpty: {
  message: 'The username is required and can\'t be empty'
   }
 }
   }
 },
 submitHandler: function(validator, form, submitButton) {
   // a)
   // Use Ajax to submit form data
   //$.post(form.attr('action'), form.serialize(), function(result) {
 // ... process the result ...
   //}, 'json');

   //b)
   // Do your task
   // ...
   // Submit the form
   validator.defaultSubmit();
 }
});

3. disableSubmitButtons(boolean) 

启用或禁用提交按钮。BootstrapValidator里默认的提交按钮是所有表单内的type属性值为submit的按钮,即[type="submit"]。
使用:

当登录失败时,重新启用提交按钮。

$('#loginForm').bootstrapValidator({
    message: 'This value is not valid',
    feedbackIcons: {
      valid: 'glyphicon glyphicon-ok',
      invalid: 'glyphicon glyphicon-remove',
      validating: 'glyphicon glyphicon-refresh'
    },
    submitHandler: function(validator, form, submitButton) {
      $.post(form.attr('action'), form.serialize(), function(result) {
        // The result is a JSON formatted by your back-end
        // I assume the format is as following:
        // {
        //   valid: true,     // false if the account is not found
        //   username: 'Username', // null if the account is not found
        // }
        if (result.valid == true || result.valid == 'true') {
          // You can reload the current location
          window.location.reload();

          // Or use Javascript to update your page, such as showing the account name
          // $('#welcome').html('Hello ' + result.username);
        } else {
          // The account is not found
          // Show the errors
          $('#errors').html('The account is not found').removeClass('hide');

          // Enable the submit buttons
          $('#loginForm').bootstrapValidator('disableSubmitButtons', false);
        }
      }, 'json');
    },
    fields: {
      username: {
        validators: {
          notEmpty: {
            message: 'The username is required'
          }
        }
      },
      password: {
        validators: {
          notEmpty: {
            message: 'The password is required'
          }
        }
      }
    }
  });

 4. enableFieldValidators(field, enabled)

启用或禁用指定字段的所有校验。这里我的实

验结果是如果禁用了校验,好像对应的字段输入(文本框、下拉等)也会变为禁用。
使用:

当密码框不为空时,开启密码框和确认密码框的校验:

// Enable the password/confirm password validators if the password is not empty
  $('#signupForm').find('[name="password"]').on('keyup', function() {
    var isEmpty = $(this).val() == '';
    $('#signupForm').bootstrapValidator('enableFieldValidators', 'password', !isEmpty)
            .bootstrapValidator('enableFieldValidators', 'confirm_password', !isEmpty);
    if ($(this).val().length == 1) {
      $('#signupForm').bootstrapValidator('validateField', 'password')
              .bootstrapValidator('validateField', 'confirm_password');
    }
  });

5. getFieldElements(field)根据指定的name获取指定的元素,返回值是null或一个jQuery对象数组。  

6. isValid()返回当前需要验证的所有字段是否都合法。调用此方法前需先调用validate来进行验证,validate方法可用在需要点击按钮或者链接而非提交对表单进行校验的时候。使用:点击某按钮时,提示所有字段是否通过校验。 

$("#isAllValid").on("click", function(){
 alert($("#defaultForm").data('bootstrapValidator').isValid());
});

 7. resetForm(Boolean)

重置表单中设置过校验的内容,将隐藏所有错误提示和图标。
使用: 

$("#isAllValid").on("click", function(){
 alert($("#defaultForm").data('bootstrapValidator').isValid());
 if(!$("#defaultForm").data('bootstrapValidator').isValid()) {
 $("#defaultForm").data('bootstrapValidator').resetForm();
 }
});

 8. updateElementStatus($field, status, validatorName) 

更新元素状态。status的值有:NOT_VALIDATED, VALIDATING, INVALID or VALID。 

9. updateStatus(field, status, validatorName)

更新指定的字段状态。BootstrapValidator默认在校验某个字段合法后不再重新校验,当调用其他插件或者方法可能会改变字段值时,需要重新对该字段进行校验。
使用:

点击按钮对文本框进行赋值,并对其重新校验: 

$('#defaultForm').bootstrapValidator({
 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'
   }
 }
});

$("#setname").on("click", function(){
 $("input[name=username]").val('san');
 var bootstrapValidator = $("#defaultForm").data('bootstrapValidator');
 bootstrapValidator.updateStatus('username', 'NOT_VALIDATED').validateField('username'); 
 //错误提示信息变了
});

10. validate()

手动对表单进行校验,validate方法可用在需要点击按钮或者链接而非提交对表单进行校验的时候。
由第一条可知,调用方式同样有两种: 

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

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

11. validateField(field) 

对指定的字段进行校验。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
腾讯与新浪的通过IP地址获取当前地理位置(省份)的接口
Jul 26 Javascript
SyntaxHighlighter语法高亮插件使用说明
Aug 14 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
JavaScript中的undefined学习总结
Nov 30 Javascript
jQuery中的pushStack实现原理和应用实例
Feb 03 Javascript
jQuery插件Tooltipster实现漂亮的工具提示
Apr 12 Javascript
JS中setTimeout和setInterval的最大延时值详解
Feb 13 Javascript
JS正则替换去空格的方法
Mar 24 Javascript
JavaScript设计模式之观察者模式实例详解
Jan 16 Javascript
浅析vue中的MVVM实现原理
Mar 04 Javascript
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 #Javascript
jQuery开源组件BootstrapValidator使用详解
Jun 29 #jQuery
详解webpack 多页面/入口支持&公共组件单独打包
Jun 29 #Javascript
详解webpack 如何集成第三方js库
Jun 29 #Javascript
详解webpack介绍&安装&常用命令
Jun 29 #Javascript
基于node.js制作简单爬虫教程
Jun 29 #Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 #Javascript
You might like
Laravel实现构造函数自动依赖注入的方法
2016/03/16 PHP
Laravel手动分页实现方法详解
2016/10/09 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
Jquery进度条插件 Progress Bar小问题解决
2011/07/12 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
jQuery中extend函数详解
2015/02/13 Javascript
js实现仿京东2级菜单效果(带延时功能)
2015/08/27 Javascript
JavaScript实现倒计时代码段Item1(非常实用)
2015/11/03 Javascript
javascript时间差插件分享
2016/07/18 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
Bootstrap modal 多弹窗之叠加显示不出弹窗问题的解决方案
2017/02/23 Javascript
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
2020/10/13 Javascript
[39:32]2014 DOTA2国际邀请赛中国区预选赛 TongFu VS DT 第二场
2014/05/23 DOTA
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
django ModelForm修改显示缩略图 imagefield类型的实例
2019/07/28 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
python 瀑布线指标编写实例
2020/06/03 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
TUMI新加坡官网:国际领先的商旅箱包品牌
2019/01/12 全球购物
改变生活的男士内衣:SAXX Underwear
2019/08/28 全球购物
大学本科毕业生求职简历的自我评价
2013/10/09 职场文书
模具设计与制造专业应届生求职信
2013/10/18 职场文书
装修五一活动策划案
2014/01/23 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
省级优秀毕业生主要事迹
2014/05/29 职场文书
交通安全标语
2014/06/06 职场文书
保送生自荐信范文
2015/03/26 职场文书
汽车质检员岗位职责
2015/04/08 职场文书
社区活动总结范文
2015/05/07 职场文书
童年读书笔记
2015/06/26 职场文书
安全生产学习心得体会
2016/01/18 职场文书
解决pycharm安装scrapy DLL load failed:找不到指定的程序的问题
2021/06/08 Python