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 相关文章推荐
JavaScript 字符编码规则
May 04 Javascript
javascript数组操作方法小结和3个属性详细介绍
Jul 05 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
js实现分享到随页面滚动而滑动效果的方法
Apr 10 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
jQuery插件imgAreaSelect基础讲解
May 26 jQuery
解决vue build打包之后首页白屏的问题
Mar 06 Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 Javascript
js字符串倒序的实例代码
Nov 30 Javascript
vue 解决兄弟组件、跨组件深层次的通信操作
Jul 27 Javascript
利用javaScript处理常用事件详解
Apr 14 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
PHP FOR MYSQL 代码生成助手(根据Mysql里的字段自动生成类文件的)
2011/07/23 PHP
php 模拟get_headers函数的代码示例
2013/04/27 PHP
PHP列出MySQL中所有数据库的方法
2015/03/12 PHP
详解WordPress中给链接添加查询字符串的方法
2015/12/18 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
利用PHP命令行模式采集股票趋势信息
2016/08/09 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JQuery UI皮肤定制
2009/07/27 Javascript
jQuery实现原理的模拟代码 -6 代码下载
2010/08/16 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
Bootstrap每天必学之导航
2015/11/26 Javascript
Angular懒加载机制刷新后无法回退的快速解决方法
2016/08/30 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
Vue props用法详解(小结)
2018/07/03 Javascript
Vuerouter的beforeEach与afterEach钩子函数的区别
2018/12/26 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
JavaScript 类的封装操作示例详解
2020/05/16 Javascript
使用React代码动态生成栅格布局的方法
2020/05/24 Javascript
Python实现Event回调机制的方法
2019/02/13 Python
Python代码实现删除一个list里面重复元素的方法
2019/04/02 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
让Django的BooleanField支持字符串形式的输入方式
2020/05/20 Python
CSS3中的Transition过度与Animation动画属性使用要点
2016/05/20 HTML / CSS
CSS3 border-radius圆角的实现方法及用法详解
2020/09/14 HTML / CSS
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
德国电子商城:ComputerUniverse
2017/04/21 全球购物
学校岗位设置方案
2014/01/16 职场文书
新闻专业学生的自我评价
2014/02/13 职场文书
聚美优品恶搞广告词
2014/03/14 职场文书
党员实事承诺书
2014/03/26 职场文书
学生安全责任书
2014/04/15 职场文书
超市商业计划书
2014/05/04 职场文书
教师节慰问信
2015/02/15 职场文书
金砖之国观后感
2015/06/11 职场文书