bootstrapvalidator复选CheckBox验证
×和√不能正确显⽰请看
头⽂件
<link rel="stylesheet" type="text/css" href="cdn.bootcss/twitter-bootstrap/4.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" type="text/css" href="cdn.bootcss/jquery.bootstrapvalidator/0.5.3/css/bootstrapValidator.min.css"/>
<script src="cdn.bootcss/jquery/3.4.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="cdn.bootcss/twitter-bootstrap/4.3.1/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="cdn.bootcss/jquery.bootstrapvalidator/0.5.3/js/bootstrapValidator.min.js" type="text/javascript" charset="utf-8"></script>
HTML
⾥边样式的东西不⽤管，我引⼊了其他css，关于选中复选框的背景图⽚变化（position）
1. 复选项的外层元素必须⽤form-group包裹，否则验证不⽣效
2. 每条input添加name属性，数组形式“interest[]”
<form id="checkForm" method="post">
<div class="checkbox_part form-group">
<p class="tit_p"><span class="vertical_tag">*</span>您对哪些产品感兴趣？</p>
<div class="checkbox checkbox-primary">
<input id="checkbox1" class="styled" type="checkbox" name="interest[]">
<label for="checkbox1">
灭菌消毒和感染控制类产品
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox2" class="styled" type="checkbox" name="interest[]">
<label for="checkbox2">
jquery怎么进行验证⽛科技⼯室家具及设备
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox3" class="styled" type="checkbox" name="interest[]">
<label for="checkbox3">
⽛科诊室家具及设备
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox4" class="styled" type="checkbox" name="interest[]">
<label for="checkbox4">
义齿加⼯所
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox5" class="styled" type="checkbox" name="interest[]">
<label for="checkbox5">
仪器和⼯具
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox6" class="styled" type="checkbox" name="interest[]">
<label for="checkbox6">
⽛科技⼯室所⽤材料
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox7" class="styled" type="checkbox" name="interest[]">
<label for="checkbox7">
⽛科诊室所⽤材料
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox8" class="styled" type="checkbox" name="interest[]">
<label for="checkbox8">
预防及其他
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox9" class="styled" type="checkbox" name="interest[]">
<label for="checkbox9">
其他⽤于⽛科技⼯室的附件和辅助材料
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox10" class="styled" type="checkbox" name="interest[]">
<label for="checkbox10">
其他⽤于⽛科诊室的附件和辅助材料
</label>
</div>
<div class="checkbox checkbox-primary">
<input id="checkbox11" class="styled" type="checkbox" name="interest[]">
<label for="checkbox11">
义齿修复材料和种植产品及其附件
</label>
</div>
<div class="checkbox checkbox-primary"">
<input id="checkbox12" class="styled" type="checkbox" name="interest[]">
<label for="checkbox12">
正畸产品及其附件
</label>
</div>
</div>
/* 提交验证 */
<button type="submit" id="submitBtn" name="submit" class="btn btn-primary btn-block">提交</button> </form>
JS
3. 验证：
/* ****************** 表单验证 *************** */
$('#submitBtn').click(function() {
$('#checkForm').bootstrapValidator('validate');    });
$('#registrationForm').bootstrapValidator({
// live:'enabled',
// 当表单验证不通过时，该按钮为disabled
submitButtons: "button[type='submit']",
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
'interest[]': {
validators: {
/
/ ⾄少选⼀项⽅式
/* notEmpty: {
enabled: true,
message:'请⾄少选择⼀项'
}, */
// ⾃定义选择
choice: {
min:2,
max:4,
message:'请选择2~4项'
}
}
}
}
});
简单来说就是这样

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。