bootstrap之表单校验

需要引入的文件

<link href="${ctx}/business/css/bootstrapValidator.css" rel="stylesheet">
<script type="text/javascript" src="${ctx}/business/js/bootstrapValidator.js"></script>

<!-- 国际化语言 -->

<script type="text/javascript" src="${ctx}/business/js/zh_CN.js"></script>

表单jsp页面：

<form id="addBusinessForm" role="form" class="form-horizontal" action="addBusiness">
    <div class="form-group">
    <label class="col-lg-2 control-label" for="inputStandard">营业执照号<span class="text-danger">*</span></label>
    <div class="col-lg-9">
        <input type="text" name="licences" placeholder="请输入商家营业执照号" class="form-control">
    </div>
    </div>
    <div class="form-group">
    <label class="col-lg-2 control-label" for="inputStandard">商家名称<span class="text-danger">*</span></label>
    <div class="col-lg-9">
        <input type="text" name="name" id="name" placeholder="请输入商家名称" class="form-control">
    </div>
    </div>
    <div class="form-group">
    <label class="col-lg-2 control-label" for="inputStandard">商家地址<span class="text-danger">*</span></label>
    <div class="col-lg-9">
        <select class="form-control" id="province" name="province" style="width:150px;float:left;"></select>
        &nbsp;<select class="form-control" id="city" name="city" style="width:150px;float:left;display:none;"></select>
        &nbsp;<select class="form-control" id="district" name="district" style="width:150px;float:left;display:none;"></select>
        <input type="text" name="address" placeholder="详细地址" class="form-control w500">
    </div>
    </div>
    <div class="form-group">
    <label class="col-lg-2 control-label" for="inputStandard">人均消费<span class="text-danger">*</span></label>
    <div class="col-lg-5">
        <select name="per" class="form-control input-sm w100 pull-left mr20 h-40">
        <option value="1">0-50</option>
        <option value="2">50-100</option>
        <option value="3">100-150</option>
        <option value="4">150-200</option>
        <option value="5">200-250</option>
        <option value="6">250-300</option>
        </select>
    </div>
    </div>
    <div class="form-group">
    <label class="col-lg-2 control-label" for="inputStandard">摇一摇次数<span class="text-danger">*</span></label>
    <div class="col-lg-5">
        <input type="text" name="shakeDayNum" placeholder="请输入摇一摇次数" class="form-control">
    </div>
    <span class="pull-left lh40 mr10"> /每人每天</span>
    </div>
    <div class="form-group">
    <label class="col-lg-2 control-label" for="inputStandard">中奖概率<span class="text-danger">*</span></label>
    <div class="col-lg-5">
        <input type="text" name="probability" placeholder="请输入中奖概率" class="form-control">
    </div>
    </div>
    <div class="form-group">
    <label class="col-lg-2 control-label" for="inputStandard">奖品类型<span class="text-danger">*</span></label>
    <div class="col-lg-9">
        <div class="checkbox-custom checkbox-primary mb10 mr20 w100 pull-left">
        <input type="checkbox" name="allowActivity" checked="" id="checkboxExample2" value="1">
        <label for="checkboxExample2">红包</label>
        </div>
        <div class="checkbox-custom checkbox-primary mb10 mr20 w100 pull-left">
        <input type="checkbox" name="allowActivity" checked="" id="checkboxExample3" value="2">
        <label for="checkboxExample3">满减优惠</label>
        </div>
        <div class="checkbox-custom checkbox-primary mb10 mr20 w100 pull-left">
        <input type="checkbox" name="allowActivity" checked="" id="checkboxExample5" value="4">
        <label for="checkboxExample5">实物商品</label>
        </div>
        <div class="checkbox-custom checkbox-primary mb10 mr20 w100 pull-left">
        <input type="checkbox" name="allowActivity" checked="" id="checkboxExample6" value="8">
        <label for="checkboxExample6">虚拟商品</label>
        </div>
        <div class="checkbox-custom checkbox-primary mb10 mr20 w100 pull-left">
        <input type="checkbox" name="allowActivity" checked="" id="checkboxExample7" value="16">
        <label for="checkboxExample7">菜品</label>
        </div>
    </div>
    </div>
    <div class="form-group">
    <label class="col-lg-2 control-label" for="inputStandard">联系人<span class="text-danger">*</span></label>
    <div class="col-lg-5">
        <input type="text" name="linkman" placeholder="请输入商家联系人姓名" class="form-control">
    </div>
    </div>
    <div class="form-group">
    <label class="col-lg-2 control-label" for="inputStandard">手机号<span class="text-danger">*</span></label>
    <div class="col-lg-5">
        <input type="text" name="mobile" placeholder="请输入商家联系人手机号" class="form-control">
    </div>
    </div>
    <div class="form-group">
    <label class="col-lg-2 control-label" for="inputStandard">座机<span class="text-danger">*</span></label>
    <div class="col-lg-5">
        <input type="text" name="phoneNo" placeholder="请输入商家座机号码" class="form-control">
    </div>
    </div>
    <div class="form-group">
    <label for="textArea2" class="col-lg-2 control-label">备注</label>
    <div class="col-lg-9">
        <textarea rows="3" id="remark" name="remark" class="form-control"></textarea>
    </div>
    </div>
    <div class="mt40 mb20 text-center">
    <button class="btn ladda-button btn-primary" type="submit">立即开通</button>
    </div>
</form>

<script type="text/javascript">

//为表单绑定校验

$('#addBusinessForm').bootstrapValidator({
    excluded: [':disabled'],//':hidden', ':not(:visible)'//包含disabled的元素的校验
    message: '数据不合法',
    feedbackIcons: {
    valid: 'glyphicon glyphicon-ok',
    invalid: 'glyphicon glyphicon-remove',
    validating: 'glyphicon glyphicon-refresh'
    },
    fields: {
    licences: {
        validators: {
        notEmpty: {
            message: '营业执照号不能为空'
        },
        callback: {//回调函数：返回true校验通过，犯规false校验不通过，显示message信息
            message: '改营业执照号已经注册！',
            callback: function(value, validator) {
            var status = true;
            $.ajax({
                type:"post",
                async:false,
                global: false,
                url:"${ctx}/work/businessManage/checkBLN",
                data:{"licences":value},
                success:function(data){
                if(data.result == 1){
                    status =  true;
                }else if(data.result == 2){
                    //营业执照号已经注册
                    status =  false;
                }else if(data.result == 3){
                    //营业执照号在提供商中存在  显示数据
                    status =  true;
                    $("#name").val(data.data.name).attr("disabled",true);
                }
                },
                dataType:"json"
            })
            return status;
            }
        }
        }
    },
    pic: {
        validators: {
        notEmpty: {
            message: '请上传图片'
        }
        }
    },
    name: {
        validators: {
        notEmpty: {
            message: '商家名称不能为空'
        }
        }
    },
    per: {
        validators: {
        notEmpty: {
            message: '人均消费不能为空'
        }
        }
    },
    district: {
        validators: {
        notEmpty: {
            message: '商家地址不能为空'
        }
        }
    },
    address: {
        validators: {
        notEmpty: {
            message: '详细地址不能为空'
        }
        }
    },
    shakeDayNum: {
        validators: {
        notEmpty: {
            message: '每日摇一摇次数不能为空'
        },
        regexp: {
            regexp: "^[1-9][0-9]*$",
            message: '摇一摇次数必须为大于0的正整数'
        }
        }
    },
    probability: {
        validators: {
        notEmpty: {
            message: '中奖概率不能为空'
        },
        regexp: {
            regexp: "^[1-9][0-9]*$",
            message: '摇一摇次数必须为大于0的正整数'
        }
        }
    },
    linkman: {
        validators: {
        notEmpty: {
            message: '商家联系人不能为空'
        },
        regexp: {
            regexp: "^[\u4e00-\u9fa5]{2,4}$",
            message: '联系人姓名在2到4个汉字之间'
        }
        }
    },
    mobile: {
        validators: {
        notEmpty: {
            message: '手机号不能为空'
        },
        regexp: {
            regexp: "^([0-9]{11})?$",
            message: '手机号码格式错误'
        },
        callback: {
            message: '该手机已有商家使用，请换一个试试！',
            callback: function(value, validator) {
            var status = true;
            $.ajax({
                type:"post",
                async:false,
                global: false,
                url:"${ctx}/work/businessManage/checkMobile",
                data:{"mobile":value},
                success:function(data){
                if(data == 1){
                    status =  false;
                }
                },
                dataType:"json"

            })
            return status;
            }
        }
        }
    },
    phoneNo: {
        validators: {
        notEmpty: {
            message: '座机号不能为空'
        },
        regexp: {
            regexp: "^([0-9]{3,4}-)?[0-9]{7,8}$",
            message: '座机号格式错误'
        }
        }
    },
    contractNo: {
        validators: {
        notEmpty: {
            message: '合同编号不能为空'
        }
        }
    },
    desc: {
        validators: {
        stringLength: {
            max: 500,
            message: '备注长度在500字以内'
        }
        }
    }
    }
})
.on('success.form.bv', function(e) {//表单全部校验通过会提交表单到actin的地址，后台ajax返回成功还是失败状态
    e.preventDefault();
    var $form = $(e.target);
    var bv = $form.data('bootstrapValidator');
    $.post($form.attr('action'), $form.serialize(), function(data){
    if(data.result == 1){
        var id = data.id;
        //成功跳转到选择商品页面
        windows.location.href="${ctx}/work/businessManage/selectGoodsInit?bId="+id;
    }
    }, 'json');
});

</script>

后台springMVC代码：

@RequestMapping(value = "/addBusiness")
    @ResponseBody
    public Map addBusiness(ModelAndView m, YbMerchantInfo record, HttpServletRequest request, Model model, Page page) throws Exception {
        Map resultMap = new HashMap();
        try {
            //调用业务保存带卡

            resultMap.put("result", “1”);//业务操作成功
        } catch (Exception e) {
            // TODO: handle exception
            e.printStackTrace();
            System.out.println(e.getMessage());
            resultMap.put("result", 0);//业务异常
        }finally{
            return resultMap;
        }
    }

扩展：

再用$(form).bootstrapValidator(options)初始化表单校验插件后，有两种方法调用插件的方法

第一种：

// 得到插件的实例
var bootstrapValidator = $(form).data('bootstrapValidator');
// 调用插件的方法
bootstrapValidator.methodName(parameters);

例如：调用updateStatus和validateFiled方法

$(form).data('bootstrapValidator')
       .updateStatus('birthday', 'NOT_VALIDATED')//修改状态为校验不通过
       .validateField('birthday');

第二种：
$(form).bootstrapValidator(methodName, parameters);

例如：调用updateStatus和validateFiled方法

$(form)

    .bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')

    .bootstrapValidator('validateField', 'birthday');

方法说明：
defaultSubmit：它还不执行任何验证当提交表单。这可能是你想提交表单时使用正确的内部自定义提交处理程序。
disableSubmitButtons：€”禁用(false)或启用(true)提交按钮。
enableFieldValidators：禁用(false)或启用(true)所有给定的字段验证器
getFieldElements：检索字段元素的名字，返回jQuery的数组元素代表,或null如果字段是没有找到