### BootstrapValidator 表单验证插件 **插件名：** bootstrapvalidator 基于Bootstrap的表单验证插件 **位置：** Public\plug\validator **参数：** 需要用到form的id名 **调用：** <link rel="stylesheet" href="__PUBLIC__/plug/validator/css/bootstrapValidator.min.css"/> <script src="__PUBLIC__/plug/validator/js/bootstrapValidator.min.js"></script> <script charset="UTF-8" src="__PUBLIC__/wset/js/set_user.js"></script> **完整代码：** ~~~ $('#add_department').bootstrapValidator({ message: '无效', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { department_describe: { validators: { notEmpty: { message: '描述不能为空' } } }, email: { validators: { notEmpty: { message: '邮箱不能为空' }, emailAddress: { message: '邮箱地址无效' } } }, phone: { validators: { notEmpty: { message: '手机号不能为空' }, digits: { message: '只能填写数字' }, remote: { //发送AJAX请求到后台 type: "post", url: "/index.php/Wcrm/Customer/Lists/phone", message: '手机号已存在', delay: 2000 }, callback: { callback: function(value, validator) { if (value.length < 11) { return { valid: false, message: '请输入正确的手机号' } } return true; } } } }, } }).on('success.form.bv', function(e) { ajax_result(e); //ajax数据调用方法 }); ~~~ **截图：**  **赋值验证：** 2017-11-30 jig update 在我们进行Form表单操作的时候，很多时候会出现赋值内容的验证，这时候就要对对应的表单进行单独的操作 1、在表单验证中加上获取change状态 trigger:"change", ~~~ brand: { trigger:"change", // 赋值操作 validators: { notEmpty: { message: '品牌不能为空' } } }, ~~~ 2、赋值操作 加上对应的 change 状态 ~~~ var brand = 'ARMANI'; // 赋值修改验证插件状态 $("#brand").val(brand).change(); ~~~ 具体操作参见： http://www.cnblogs.com/Brose/p/bootstrapValidator_hiddeninput.html **日期验证：** 2017-11-30 jig update 日期查询比较多时候都是不可编辑的 readonly 状态，日期都是datepicker插件进行赋值的，对日期的验证比较不一样，必须调用下面的代码实现验证  1、Form表单： ~~~ <form class="form-horizontal bv-form" id="service_add" method="get" action="#"> <input class="form-control calendar-icon" id="get_date" name="get_date" readonly placeholder="时间"> </form> ~~~ 2、插件验证 ~~~ $('#service_add').bootstrapValidator({ message: '无效', feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { get_date: { validators: { notEmpty: { message: '日期不能为空' } } }, } }) ~~~ 3、调用日期插件实现验证 ~~~ /* 加载时间选择插件验证 */ $("#get_date").datetimepicker({ autoclose: true,//选中之后自动隐藏日期选择框 format: 'yyyy-mm-dd' }).on('hide',function(e){ $("#service_add").data('bootstrapValidator').updateStatus('get_date', 'NOT_VALIDATED', null).validateField('get_date'); }); ~~~