最近專案用到了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）
兩種方式的使用分別如下：
// 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)
對指定的欄位進行校驗。