说明
BootstrapValidator的使用方式有多种,这里示例了其中一种的完整使用流程,即当点击某个按钮的时候,开始校验,校验通过,则异步提交表单
使用步骤:
第一步:HTML页面上需要有一个表单
//需要提前引入JQuery和bootstrap,因为这个校验是基于bootstrap的
<form id="myForm">
<div class="form-group">
<input type="text" class="form-control" id="name" name="name" />
</div>
<div class="form-group">
<div class="radio">
<label class="radio-inline" style="margin-right:15px;">
<input type="radio" name="status" id="status1" value="0">启用
</label>
<label class="radio-inline" style="margin-right:15px;">
<input type="radio" name="status" id="status2" value="1">停用
</label>
</div>
</div>
<button type="button" class="btn btn-success" id="mySubmit">提交</button>
</form>
第二步:定义一个对某个表单校验的校验器
<script>
$("#myForm").bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
//普通字段不为空校验
name: {
message: '名称验证失败',
validators: {
notEmpty: {
message: '名称不能为空'
},
//可以在callback里面写上自定义的一些校验规则
callback: {
message: '自定义的校验失败',
callback: function(value, validator) {
if (value=="") {
return false;
} else {
return true;
}
}
}
}
},
//radio不为空校验
status: {
message: '状态验证失败',
validators: {
notEmpty: {
message: '状态必须选择'
}
}
},
},
});
</script>
第三步:当点击提交的时候,开始校验
//定义一个校验器
var bootstrapValidator = $("#myForm").data('bootstrapValidator');
//执行校验
bootstrapValidator.validate();
//判断校验结果
if(bootstrapValidator.isValid()){
//校验成功,可以ajax提交表单到服务器
var status=""; //得到radio的值
if($("#status1").is(":checked")){
status=$("#status1").val();
}else if($("#status2").is(":checked")){
status=$("#status2").val();
}
var name=$("#name").val().trim(); //得到名称的值
$.ajax({
type:'post',
data:{
"name":name,
"status":status
},
dataType:'json',
url: "${root}/test.do",
success: function(data) {
if(data.code=="200"){
//提交成功
}else{
//提交失败
}
},
error:function(data){
//提交失败
}
});
}else{
//校验失败
}
注意:页面的表单一定要有form-group,不然该校验插件用不了,会报以下的错误
关于手动校验的操作
对于某些联动的字段,或者得不到焦点的字段,可能有时候不会自动校验,我们需要手动的进行校验。
$("#myForm").data('bootstrapValidator').updateStatus('name', 'notEmpty').validateField('name');