bootstrapvalidator之API学习教程
最近项目用到了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)
对指定的字段进行校验。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
上一篇: Vue中的数据监听和数据交互案例解析
下一篇: 详解微信小程序设置底部导航栏目方法