bootstrapvalidator之API学习教程
最近项目用到了bootstrap框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件。我这里用的是0.5.2版本。
下面记录一下使用中学习到的相关API,不定期更新。
1.获取validator对象或实例
一般使用校验是直接调用$(form).bootstrapValidator(options)来初始化validator。初始化后有两种方式获取validator对象或实例,可以用来调用其对象的方法,比如调用resetForm来重置表单。有两种方式获取:
1)
//Getplugininstance varbootstrapValidator=$(form).data('bootstrapValidator'); //andthencallmethod bootstrapValidator.methodName(parameters)
这种方式获取的是BootstrapValidator的实例,可以直接调用其方法。
2)
$(form).bootstrapValidator(methodName,parameters);
这种方式获取的是代表当前form的jquery对象,调用方式是将方法名和参数分别传入到bootstrapValidator方法中,可以链式调用。
两种方式的使用分别如下:
//Thefirstway $(form) .data('bootstrapValidator') .updateStatus('birthday','NOT_VALIDATED') .validateField('birthday'); //Thesecondone $(form) .bootstrapValidator('updateStatus','birthday','NOT_VALIDATED') .bootstrapValidator('validateField','birthday');
2.defaultSubmit()
使用默认的提交方式提交表单,调用此方法BootstrapValidator将不执行任何的校验。一般需要时可以放在validator校验的submitHandler属性里调用。
使用:
$('#defaultForm').bootstrapValidator({ fields:{ username:{ message:'Theusernameisnotvalid', validators:{ notEmpty:{ message:'Theusernameisrequiredandcan\'tbeempty' } } } }, submitHandler:function(validator,form,submitButton){ //a) //UseAjaxtosubmitformdata //$.post(form.attr('action'),form.serialize(),function(result){ //...processtheresult... //},'json'); //b) //Doyourtask //... //Submittheform validator.defaultSubmit(); } });
3.disableSubmitButtons(boolean)
启用或禁用提交按钮。BootstrapValidator里默认的提交按钮是所有表单内的type属性值为submit的按钮,即[type="submit"]。
使用:
当登录失败时,重新启用提交按钮。
$('#loginForm').bootstrapValidator({ message:'Thisvalueisnotvalid', feedbackIcons:{ valid:'glyphiconglyphicon-ok', invalid:'glyphiconglyphicon-remove', validating:'glyphiconglyphicon-refresh' }, submitHandler:function(validator,form,submitButton){ $.post(form.attr('action'),form.serialize(),function(result){ //TheresultisaJSONformattedbyyourback-end //Iassumetheformatisasfollowing: //{ //valid:true,//falseiftheaccountisnotfound //username:'Username',//nulliftheaccountisnotfound //} if(result.valid==true||result.valid=='true'){ //Youcanreloadthecurrentlocation window.location.reload(); //OruseJavascripttoupdateyourpage,suchasshowingtheaccountname //$('#welcome').html('Hello'+result.username); }else{ //Theaccountisnotfound //Showtheerrors $('#errors').html('Theaccountisnotfound').removeClass('hide'); //Enablethesubmitbuttons $('#loginForm').bootstrapValidator('disableSubmitButtons',false); } },'json'); }, fields:{ username:{ validators:{ notEmpty:{ message:'Theusernameisrequired' } } }, password:{ validators:{ notEmpty:{ message:'Thepasswordisrequired' } } } } });
4.enableFieldValidators(field,enabled)
启用或禁用指定字段的所有校验。这里我的实
验结果是如果禁用了校验,好像对应的字段输入(文本框、下拉等)也会变为禁用。
使用:
当密码框不为空时,开启密码框和确认密码框的校验:
//Enablethepassword/confirmpasswordvalidatorsifthepasswordisnotempty $('#signupForm').find('[name="password"]').on('keyup',function(){ varisEmpty=$(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,INVALIDorVALID。
9.updateStatus(field,status,validatorName)
更新指定的字段状态。BootstrapValidator默认在校验某个字段合法后不再重新校验,当调用其他插件或者方法可能会改变字段值时,需要重新对该字段进行校验。
使用:
点击按钮对文本框进行赋值,并对其重新校验:
$('#defaultForm').bootstrapValidator({ fields:{ username:{ message:'Theusernameisnotvalid', validators:{ notEmpty:{ message:'Theusernameisrequiredandcan\'tbeempty' } } }, stringLength:{ min:6, max:30, message:'Theusernamemustbemorethan6andlessthan30characterslong' } } }); $("#setname").on("click",function(){ $("input[name=username]").val('san'); varbootstrapValidator=$("#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)
对指定的字段进行校验。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持毛票票。