最近項目用到了bootstrap框架,其中前端用的校驗,采用的是bootstrapvalidator插件,也是非常強大的一款插件。我這里用的是0.5.2版本。
下面記錄一下使用中學(xué)習(xí)到的相關(guān)API,不定期更新。
1. 獲取validator對象或?qū)嵗?br />
一般使用校驗是直接調(diào)用$(form).bootstrapValidator(options)來初始化validator。初始化后有兩種方式獲取validator對象或?qū)嵗梢杂脕碚{(diào)用其對象的方法,比如調(diào)用resetForm來重置表單。有兩種方式獲取:
1)
// Get plugin instancevar bootstrapValidator = $(form).data('bootstrapValidator');// and then call methodbootstrapValidator.methodName(parameters)這種方式獲取的是BootstrapValidator的實例,可以直接調(diào)用其方法。
2)
$(form).bootstrapValidator(methodName, parameters);
這種方式獲取的是代表當(dāng)前form的jquery對象,調(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í)行任何的校驗。一般需要時可以放在validator校驗的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,重新啟用提交按鈕。
$('#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' } } } } });
新聞熱點
疑難解答
圖片精選