文章目录
- (1)基础的字段验证
- (2)button验证
- (3)自定义错误提示信息
- (4)多个字段关联验证
- (5)数字范围的验证
- (6)调用接口交互验证
- 官方文档
(1)基础的字段验证
$('#form').bootstrapValidator({
excluded: [":disabled"],
message: '表单校验',
feedbackIcons: {
/*input状态样式图片*/
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
code:{
message: "code字段校验",
trigger:"change",
validators: {
notEmpty: {
message: 'XX必须选择'
}
}
},
name: {
message: '姓名验证',
trigger:"change",
validators: {
notEmpty: {
message: '姓名不能为空'
},
regexp: {
regexp:/^[\u4e00-\u9fa5]+$/,
message: '只能输入汉字'
},
stringLength: {/*长度提示*/
max: 8,
message: '姓名不超过16个字符'
}
}
}
}
});
(2)button验证
按钮的类型为button时,bootstrapValidator的isValid()方法无法正常工作。这时候就需要使用bootstrapValidator的validate()方法进行激活。
var bootstrapValidator = $("#form").data('bootstrapValidator');
bootstrapValidator.validate();
if (bootstrapValidator.isValid()) {
}
(3)自定义错误提示信息
在一些场景下,可能需要不同的输入做一些不同的文字描述提示,比如我们在验证身份证时,可能需要验证合法性,也可能会提取出生日期做一些验证,可能提取性别验证一些信息等等
updateMessage(field*, validator*, message*): BootstrapValidator —更新对应的错误提示信息
callback: {
message: '身份证号码无效!',
callback: function (value, validator, $field) {
if (!value) {
return true
} else if (isIdCardNo(value)) {
idCardToBirth();
if (!checkAge()){
validator.updateMessage('idcard', 'callback', '年龄不满足要求')
return false;
}
return true;
} else {
return false;
}
}
},
(4)多个字段关联验证
updateStatus(field*, status*, validator):
更新指定字段的验证状态
当我们在进行字段验证时,可能会遇到一个字段被其他字段所影响,在进行当前字段验证时,如果发现某一个条件则设置另一个字段为验证通过,或者为验证不通过,那么就可以通过
手动设置某个字段不通过
validator.updateStatus('字段名称', 'INVALID',validator);
手动设置某个字段不通过
validator.updateStatus('字段名称', 'VALID',validator);
其中validator表示会更新对应的那一个验证器比如下面的方法,设置更新familyNum字段的notEmpty验证器,那么该字段显示的提示信息就是notEmpty中设置的错误信息
validator.updateStatus(‘familyNum’, ‘INVALID’,‘notEmpty’);
(5)数字范围的验证
between:{
min:1,
max:10,
message:"输入范围1~10",
},
(6)调用接口交互验证
对于涉及到接口调用的验证,可以通过remote来处理
remote:{
url:"/idcard/exists",
message: '该身份证已存在,请重新输入',
type:'post',
data:function(validate){
return{
idcard:$("#idcard").val()
}
}
}
接口的返回值参考:
验证通过{valid:true}
验证失败{valid:true}
官方文档
http://bootstrapvalidator.votintsev.ru/api/
更多推荐
BootstrapValidator使用总结
发布评论