最近项目用到了引导框架,其中前端用的校验,采用的是bootstrapvalidator插件,也是非常强大的一款插件。我这里用的是0.5.2版本。
下面记录一下使用中学习到的相关API,不定期更新。
<强> 1。获取验证器对象或实例
,一般使用校验是直接调用美元(形式).bootstrapValidator(选项)来初始化验证器。初始化后有两种方式获取验证器对象或实例,可以用来调用其对象的方法,比如调用resetForm来重置表单。有两种方式获取:
, 1),
//获得插件实例
var bootstrapValidator=$(形式). data (“bootstrapValidator”);//然后调用方法
bootstrapValidator.methodName(参数)
这种方式获取的是BootstrapValidator的实例,可以直接调用其方法。
2),
美元(形式)。bootstrapValidator (methodName、参数);
之前
,这种方式获取的是代表当前形成的jquery对象,调用方式是将方法名和参数分别传入到bootstrapValidator方法中,可以链式调用。
,两种方式的使用分别如下:
//第一种方法
$(形式)
. data (“bootstrapValidator”)
.updateStatus(‘生日’,‘NOT_VALIDATED’)
.validateField(“生日”);//第二个>
$ (' # defaultForm ') .bootstrapValidator ({
领域:{
用户名:{
信息:用户名是无效的,
验证器:{
notEmpty: {
需要的信息:用户名,可以\ ' t是空的
}
}
}
},
submitHandler:函数(验证器、形式、submitButton) {//)//使用Ajax提交表单数据//$ . post (form.attr(的行动),form.serialize()函数(结果){//痰慕峁?/},json);//b)//你的任务//?/提交表单
validator.defaultSubmit ();
}
});
之前
<强> 3。disableSubmitButtons(布尔),
启用或禁用提交按钮.BootstrapValidator里默认的提交按钮是所有表单内的类型属性值为提交的按钮,即(type=疤峤弧?。
使用:
当登录失败时,重新启用提交按钮。
$ (' # loginForm ') .bootstrapValidator ({
信息:“这个值是无效的”,
feedbackIcons: {
有效:“glyphicon glyphicon-ok’,
无效:“glyphicon glyphicon-remove’,
验证:“glyphicon glyphicon-refresh”
},
submitHandler:函数(验证器、形式、submitButton) {
$ . post (form.attr(的行动),form.serialize()函数(结果){//结果是一个JSON格式化你的后端//我想格式如下://{//有效:真,//假如果帐户没有找到//用户名:用户名,//零如果没有找到帐户//}
如果结果。有效==真| |的结果。有效的=='真的'){//重新加载当前位置
window.location.reload ();//或者使用Javascript来更新页面,如显示帐户名称//$(' #欢迎')。html('你好' + result.username);
其他}{//帐户没有找到//显示错误
$(" #错误”)。html(“帐户没有找到”).removeClass(隐藏的);//启用提交按钮
$ (" # loginForm”)。bootstrapValidator (disableSubmitButtons,假);
}
},json);
},
领域:{
用户名:{
验证器:{
notEmpty: {
消息:“用户名是必需的
}
}
},
密码:{
验证器:{
notEmpty: {
信息:“需要密码”
}
}
}
}
});
之前
<强> 4。enableFieldValidators(启用),
启用或禁用指定字段的所有校验。这里我的实
验结果是如果禁用了校验,好像对应的字段输入(文本框,下拉等)也会变为禁用。
使用:
当密码框不为空时,开启密码框和确认密码框的校验:
//启用密码/确认密码验证密码是否非空
$ (' # signupForm '); ([name="密码"])。(“弹起”,函数(){
var isEmpty=$(这).val ()==?
$ (" # signupForm”)。bootstrapValidator (‘enableFieldValidators’,‘密码’,isEmpty !)
.bootstrapValidator (‘enableFieldValidators’,‘confirm_password ! isEmpty);
如果($ ().val ()。长度==1){
$ (" # signupForm”)。bootstrapValidator (“validateField”、“密码”)
.bootstrapValidator (“validateField”、“confirm_password”);
}
});
之前
<强> 5。getFieldElements(领域)根据指定的名字获取指定的元素,返回值是零或一个jQuery对象数组只,
