bootstrap之表单校验
2016-03-24 14:05
651 查看
需要引入的文件
<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>
<select class="form-control" id="city" name="city" style="width:150px;float:left;display:none;"></select>
<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">
4000
<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>
[b]后台springMVC代码：[/b]
@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如果字段是没有找到
<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>
<select class="form-control" id="city" name="city" style="width:150px;float:left;display:none;"></select>
<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">
4000
<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>
[b]后台springMVC代码：[/b]
@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如果字段是没有找到
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- bootstrap根据数据库自动生成多列
- 前端未了事_bootstrap使用（1）
- bootstrap和angular.js技术要求
- bootstrap-table组件使用说明
- Bootstrap框架使用拖拽插件Nestable
- bootstrap创建带遮罩层的进度条
- bootstrap实现slider的刻度
- Bootstrap中datepicker时间插件出现问题
- Bootstrap初入之环境搭建
- 为什么用bower 安装bootstrap而不用npm来安装？
- html5 bootstrap响应式视差滚动网页单页模板
- bootstraps对于低于IE9版本的支持
- 每日一bootstrap 下拉菜单
- bootstrap-datepicker的使用
- BootStrap实用代码片段之一
- 后台管理系统模板ACE
- Uncaught Error: Bootstrap's JavaScript requires jQuery
- bootstrap使用笔记
- Bootstrap的iCheck插件checkbox和radio
- JavaEE框架Bootstrap HTML5 jQuery SpringMVC maven mybatis shiro