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 相关文章推荐
js右键菜单效果代码
Jul 21 Javascript
js cookies实现简单统计访问次数
Nov 24 Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 Javascript
JS关闭窗口或JS关闭页面的几种代码分享
Oct 25 Javascript
js中hash和ico的关联分析
Feb 05 Javascript
JQuery中DOM实现事件移除的方法
Jun 13 Javascript
jQuery.Uploadify插件实现带进度条的批量上传功能
Jun 08 Javascript
jquery制做精致的倒计时特效
Jun 13 Javascript
AngularJS之依赖注入模拟实现
Aug 19 Javascript
详解Angular Forms中自定义ngModel绑定值的方式
Dec 10 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 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
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁
2014/06/09 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
Zend Framework动作助手Redirector用法实例详解
2016/03/05 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
PHP进阶学习之反射基本概念与用法分析
2019/06/18 PHP
JavaScript 指导方针
2007/04/05 Javascript
jQuery 解析xml文件
2009/08/09 Javascript
JavaScript 保存数组到Cookie的代码
2010/04/14 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
node.js中RPC(远程过程调用)的实现原理介绍
2014/12/05 Javascript
javascript实现一个简单的弹出窗
2016/02/22 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
javascript实现抢购倒计时程序
2019/08/26 Javascript
解决layer.confirm选择完之后消息框不消失的问题
2019/09/16 Javascript
JavaScript经典案例之简易计算器
2020/08/24 Javascript
python爬虫面试宝典(常见问题)
2018/03/02 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
python实现爬取图书封面
2018/07/05 Python
python异步存储数据详解
2019/03/19 Python
python和js交互调用的方法
2020/06/23 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
前端实现弹幕效果的方法总结(包含css3和canvas的实现方式)
2018/07/12 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
工厂总经理岗位职责
2014/02/07 职场文书
文明礼仪演讲稿
2014/05/12 职场文书
门店业绩提升方案
2014/06/08 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
学校领导四风问题整改措施思想汇报
2014/10/09 职场文书
2014年商场工作总结
2014/11/22 职场文书
2015年全国爱眼日活动小结
2015/02/27 职场文书
2016年感恩教师节校园广播稿
2015/12/18 职场文书
小学大队委竞选口号
2015/12/25 职场文书