### 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'); }); ~~~