参考
http://1000hz.github.io/bootstrap-validator/#
http://formvalidation.io/download/
http://blog.csdn.net/u013938465/article/details/53507109
神奇的变量命名
a:
b: 需验证字段
c: message容器/配置
d: 表单元素的type
默认字段
获取方式 $.fn.bootstrapValidator.DEFAULT_OPTIONS
{
"elementClass": "bv-form",
"message": "This value is not valid",
"group": ".form-group",
"container": null,
"threshold": null,
"excluded": [
":disabled",
":hidden",
":not(:visible)"
],
"feedbackIcons": {
"valid": null,
"invalid": null,
"validating": null
},
"submitButtons": "[type=\"submit\"]",
"live": "enabled",
"fields": null
}
fields={
container
excluded
feedbackIcons
group
message
onError
onStatus
onSuccess
selector
threshold 开始验证长度(对radio类型无效)
trigger 触发验证的动作例如:keyup(按键)/blur(失去焦点)
validators
}
fields.validators = {
callback:{
message:[string],
callback: [function]
},
notEmpty
numeric: {
message:[string],
separator: [function]
},
}
栗子
$("#agentCreate").bootstrapValidator({
feedbackIcons:{
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
message:'不能为空',
fields:{
title:{
validators: {
notEmpty: {}
}
},
file:{
validators: {
notEmpty: {}
}
},
}
}).on('success.form.bv', function(e) {
// 阻止默认事件提交
e.preventDefault();
});
$("#sub").on("click", function () {
//获取表单对象
var bootstrapValidator = $("#agentCreate").data('bootstrapValidator');
//手动触发验证
bootstrapValidator.validate();
if (bootstrapValidator.isValid()) {
console.log("bootstrapValidator", arguments);
//表单提交的方法、比如ajax提交
}
})
操作
获取已配置的表单元素
$("#agentCreate").data("bootstrapValidator").getInvalidFields()
获取配置
$("#agentCreate").data("bootstrapValidator").getOptions()
重置某字段(会清空对应表单元素数据)
$("#agentCreate").data("bootstrapValidator").resetField("imgId","#imgSelector")
更新某字段状态(不会清空数据)
$(formName).data(“bootstrapValidator”).updateStatus("fieldName", "NOT_VALIDATED", null );