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 相关文章推荐
自适应高度框架 ----属个人收藏内容
Jan 22 Javascript
jQuery boxy弹出层插件中文演示及使用讲解
Feb 24 Javascript
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
jQuery移动和复制dom节点实用DOM操作案例
Dec 17 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
Sep 16 Javascript
基于JavaScript实现手机短信按钮倒计时(超简单)
Dec 30 Javascript
利用jQuery中的ajax分页实现代码
Feb 25 Javascript
Node.js中防止错误导致的进程阻塞的方法
Aug 11 Javascript
JS数组交集、并集、差集的示例代码
Aug 23 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 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面向对象全攻略 (十四) php5接口技术
2009/09/30 PHP
用php解析html的实现代码
2011/08/08 PHP
解析strtr函数的效率问题
2013/06/26 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
php DES加密算法实例分析
2019/09/18 PHP
js 中{},[]中括号,大括号使用详解
2011/05/12 Javascript
jquery模拟SELECT下拉框取值效果
2013/10/23 Javascript
javascript实现数字验证码的简单实例
2014/02/10 Javascript
angularJS结合canvas画图例子
2015/02/09 Javascript
javascript删除元素节点removeChild()用法实例
2015/05/26 Javascript
JS解决iframe之间通信和自适应高度的问题
2016/08/24 Javascript
React-native桥接Android原生开发详解
2018/01/17 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
jQuery选择器之层次选择器用法实例分析
2019/02/19 jQuery
深入浅出了解Node.js Streams
2019/05/27 Javascript
JS桶排序的简单理解与实现方法示例
2019/11/25 Javascript
6种JavaScript继承方式及优缺点(小结)
2020/02/06 Javascript
javascript中的with语句学习笔记及用法
2020/02/17 Javascript
Python实现识别手写数字大纲
2018/01/29 Python
Python实现的在特定目录下导入模块功能分析
2019/02/11 Python
pytorch 自定义参数不更新方式
2020/01/06 Python
python如何停止递归
2020/09/09 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
HTML5未来发展趋势
2016/02/01 HTML / CSS
顺丰快递Java软件工程师面试题
2015/07/31 面试题
英文推荐信格式范文
2014/05/09 职场文书
爱与责任演讲稿
2014/05/20 职场文书
家具公司总经理岗位职责
2014/07/08 职场文书
入党函调证明材料
2014/12/24 职场文书
大学生英文求职信范文
2015/03/19 职场文书
趣味运动会新闻稿
2015/07/17 职场文书
浙江省杭州市平均工资标准是多少?
2019/07/09 职场文书
SQLServer2019 数据库环境搭建与使用的实现
2021/04/08 SQL Server
Redis官方可视化工具RedisInsight安装使用教程
2022/04/19 Redis
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python