最近項目用到了bootstrap框架，其中前端用的校驗，采用的是bootstrapvalidator插件，也是非常強大的一款插件。我這里用的是0.5.2版本。
下面記錄一下使用中學習到的相關API，不定期更新。
1. 獲取validator對象或實例
一般使用校驗是直接調用$(form).bootstrapValidator(options)來初始化validator。初始化后有兩種方式獲取validator對象或實例，可以用來調用其對象的方法，比如調用resetForm來重置表單。有兩種方式獲取：
1）
// Get plugin instancevar bootstrapValidator = $(form).data('bootstrapValidator');// and then call methodbootstrapValidator.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)
對指定的字段進行校驗。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
