bootstrapvalidator之API學(xué)習(xí)教程

發(fā)布時(shí)間：2020-09-10 22:53:32 來源：腳本之家閱讀：144 作者：nazhidao 欄目：web開發(fā)

最近項(xiàng)目用到了bootstrap框架，其中前端用的校驗(yàn)，采用的是bootstrapvalidator插件，也是非常強(qiáng)大的一款插件。我這里用的是0.5.2版本。

下面記錄一下使用中學(xué)習(xí)到的相關(guān)API，不定期更新。

1. 獲取validator對(duì)象或?qū)嵗?br />

一般使用校驗(yàn)是直接調(diào)用$(form).bootstrapValidator(options)來初始化validator。初始化后有兩種方式獲取validator對(duì)象或?qū)嵗?，可以用來調(diào)用其對(duì)象的方法，比如調(diào)用resetForm來重置表單。有兩種方式獲?。?br />

1）

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

這種方式獲取的是BootstrapValidator的實(shí)例，可以直接調(diào)用其方法。

2）

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

這種方式獲取的是代表當(dāng)前form的jquery對(duì)象，調(diào)用方式是將方法名和參數(shù)分別傳入到bootstrapValidator方法中，可以鏈?zhǔn)秸{(diào)用。
兩種方式的使用分別如下：

// 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()

使用默認(rèn)的提交方式提交表單，調(diào)用此方法BootstrapValidator將不執(zhí)行任何的校驗(yàn)。一般需要時(shí)可以放在validator校驗(yàn)的submitHandler屬性里調(diào)用。

使用：

$('#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里默認(rèn)的提交按鈕是所有表單內(nèi)的type屬性值為submit的按鈕，即[type="submit"]。
使用：

當(dāng)?shù)卿浭r(shí)，重新啟用提交按鈕。

$('#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)

啟用或禁用指定字段的所有校驗(yàn)。這里我的實(shí)

驗(yàn)結(jié)果是如果禁用了校驗(yàn)，好像對(duì)應(yīng)的字段輸入（文本框、下拉等）也會(huì)變?yōu)榻谩?br /> 使用：

當(dāng)密碼框不為空時(shí)，開啟密碼框和確認(rèn)密碼框的校驗(yàn)：

 // 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)根據(jù)指定的name獲取指定的元素，返回值是null或一個(gè)jQuery對(duì)象數(shù)組。

6. isValid()返回當(dāng)前需要驗(yàn)證的所有字段是否都合法。調(diào)用此方法前需先調(diào)用validate來進(jìn)行驗(yàn)證，validate方法可用在需要點(diǎn)擊按鈕或者鏈接而非提交對(duì)表單進(jìn)行校驗(yàn)的時(shí)候。使用：點(diǎn)擊某按鈕時(shí)，提示所有字段是否通過校驗(yàn)。

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

7. resetForm(Boolean)

重置表單中設(shè)置過校驗(yàn)的內(nèi)容，將隱藏所有錯(cuò)誤提示和圖標(biāo)。
使用：

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

8. updateElementStatus($field, status, validatorName)

更新元素狀態(tài)。status的值有：NOT_VALIDATED, VALIDATING, INVALID or VALID。

9. updateStatus(field, status, validatorName)

更新指定的字段狀態(tài)。BootstrapValidator默認(rèn)在校驗(yàn)?zāi)硞€(gè)字段合法后不再重新校驗(yàn)，當(dāng)調(diào)用其他插件或者方法可能會(huì)改變字段值時(shí)，需要重新對(duì)該字段進(jìn)行校驗(yàn)。
使用：

點(diǎn)擊按鈕對(duì)文本框進(jìn)行賦值，并對(duì)其重新校驗(yàn)：

$('#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'); 
 //錯(cuò)誤提示信息變了
});

10. validate()

手動(dòng)對(duì)表單進(jìn)行校驗(yàn)，validate方法可用在需要點(diǎn)擊按鈕或者鏈接而非提交對(duì)表單進(jìn)行校驗(yàn)的時(shí)候。
由第一條可知，調(diào)用方式同樣有兩種：

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

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

11. validateField(field)

對(duì)指定的字段進(jìn)行校驗(yàn)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

bootstrapvalidator之API學(xué)習(xí)教程

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽