BootstrapValidator的使用

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');