欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

bootstrapvalidator之API学习教程

程序员文章站 2022-06-03 14:05:22
最近项目用到了bootstrap框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件。我这里用的是0.5.2版本。 下面记...

最近项目用到了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) 

对指定的字段进行校验。

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