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