一、 引入js 和css文件
在有jquery和bootstrap的頁面里引入
- bootstrapValidator.js
- bootstrapValidator.css
鏈接: https://pan.baidu.com/s/1eGMPFGISB618gYFttGPgaw 密碼: 請加我qq（2353806846）獲取
二、 編寫html
然后建立一個form表單，添加表單控件，若對某一字段想添加驗證規則，
默認需要以<div class=”form-group”></div>包裹（對應錯誤提示會根據該class值定位），
內部<input class="form-control" />標簽必須有name屬性值，此值為驗證匹配字段。
注：該值不是絕對的，也可以通過js手動指定錯誤提示位置和驗證的輸入框（后續會講解到）。
<form class="form-horizontal"> <div class="form-group"> <label class="col-lg-3 control-label">Username</label> <div class="col-lg-9"> <input type="text" class="form-control" name="username" /> </div> </div> <div class="form-group"> <label class="col-lg-3 control-label">Email address</label> <div class="col-lg-9"> <input type="text" class="form-control" name="email" /> </div> </div> </form>
三、添加驗證規則
1、在html 標簽中添加
<div class="form-group"> <label class="col-lg-3 control-label">Username</label> <div class="col-lg-5"> <input type="text" class="form-control" name="username" data-bv-message="The username is not valid" required data-bv-notempty-message="The username is required and cannot be empty" pattern="[a-zA-Z0-9]+" data-bv-regexp-message="The username can only consist of alphabetical, number" /> </div> </div>
2、 添加 js 文件
$(function () { $("#form-test").bootstrapValidator({ live: 'disabled',//驗證時機，enabled是內容有變化就驗證（默認），disabled和submitted是提交再驗證 excluded: [':disabled', ':hidden', ':not(:visible)'],//排除無需驗證的控件，比如被禁用的或者被隱藏的 submitButtons: '#btn-test',//指定提交按鈕，如果驗證失敗則變成disabled，但我沒試成功，反而加了這句話非submit按鈕也會提交到action指定頁面 message: '通用的驗證失敗消息',//好像從來沒出現過 feedbackIcons: {//根據驗證結果顯示的各種圖標 valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { text: { validators: { notEmpty: {//檢測非空,radio也可用 message: '文本框必須輸入' }, stringLength: {//檢測長度 min: 6, max: 30, message: '長度必須在6-30之間' }, regexp: {//正則驗證 regexp: /^[a-zA-Z0-9_\.]+$/, message: '所輸入的字符不符要求' }, remote: {//將內容發送至指定頁面驗證，返回驗證結果，比如查詢用戶名是否存在 url: '指定頁面', message: 'The username is not available' }, different: {//與指定文本框比較內容相同 field: '指定文本框name', message: '不能與指定文本框內容相同' }, emailAddress: {//驗證email地址 message: '不是正確的email地址' }, identical: {//與指定控件內容比較是否相同，比如兩次密碼不一致 field: 'confirmPassword',//指定控件name message: '輸入的內容不一致' }, date: {//驗證指定的日期格式 format: 'YYYY/MM/DD', message: '日期格式不正確' }, choice: {//check控件選擇的數量 min: 2, max: 4, message: '必須選擇2-4個選項' } } } } }); $("#btn-test").click(function () {//非submit按鈕點擊后進行驗證，如果是submit則無需此句直接驗證 $("#form-test").bootstrapValidator('validate');//提交驗證 if ($("#form-test").data('bootstrapValidator').isValid()) {//獲取驗證結果，如果成功，執行下面代碼 alert("yes");//驗證成功后的操作，如ajax } }); });
四、前端自定義驗證規則
1、回調自定義驗證
Bootstrapvalidator的前端自定義驗證為callback
"rowkey": { message: 'rowkey驗證失敗', validators: { stringLength:{ max: 1000, message: 'rowkey不能超過1000個字符' }, callback:{ callback : function(value, validator, $field) { if ($('input:radio[name="databaseType"]:checked').val() == "Hbase" && value == ""){ return { valid: false, message: 'rowkey不能為空' } } else{ return true } } } } }
2、拓展插件的validators方法
將項目中常用的方法放到了一個單獨js中
$(function () { $.fn.bootstrapValidator.validators.checkIdCard = { /** * @param {BootstrapValidator} 表單驗證實例對象 * @param {jQuery} $field jQuery 對象 * @param {Object} 表單驗證配置項值 * @returns {boolean} */ validate: function (validator, $field, options) { // debugger; try { return checkIdCardNo($field.val()); }catch (e){ console.error(e); } return false; } }; }(window.jQuery));
3、remote 后端自定義驗證
Bootstrapvalidator的前端自定義驗證為remote，在數據庫驗重時經常會用到
"tableName": { message: '表名稱驗證失敗', validators: { notEmpty: { message: '表名稱不能為空' }, stringLength:{ max: 100, message: '表名稱不能超過100個字符' }, remote: { message: '表名重復', url: 'check', data : '',//這里默認會傳遞該驗證字段的值到后端 delay: 2000 //這里特別要說明，必須要加此屬性，否則用戶輸入一個字就會訪問后台一次，會消耗大量的系統資源， } } },
后端代碼：
//檢測新增metaTableName是否重復 def check(){ def map = new HashMap() def result = service.check(params.name) if(result){ map.put("valid",true) }else{ map.put("valid",false) } render(map as JSON) // 注意后端傳到前端的格式必須是帶有valid屬性的json對象才會被validator識別，
// 如果返回任何其他的值，頁面驗證將獲取不到驗證結果導致無法驗證 }
- {"valid":false} //表示不合法，驗證不通過
- {"valid":true} //表示合法，驗證通過
五、常用事件
1、獲取validator對象或實例
一般使用校驗是直接調用$(form).bootstrapValidator(options)來初始化validator。初始化后有兩種方式獲取validator對象或實例，可以用來調用其對象的方法，比如調用resetForm來重置表單。有兩種方式獲取：
1）
// Get plugin instance
var bootstrapValidator = $(form).data('bootstrapValidator');
// and then call method
bootstrapValidator.methodName(parameters)
這種方式獲取的是BootstrapValidator的實例，可以直接調用其方法。
2）
兩種方式的使用分別如下：
// The first way
$(form)
.data('bootstrapValidator')
.updateStatus('birthday', 'NOT_VALIDATED')
.validateField('birthday');
// The second one
$(form)
.bootstrapValidator('updateStatus', 'birthday', 'NOT_VALIDATED')
.bootstrapValidator('validateField', 'birthday');
2、重置某一單一驗證字段驗證規則
$(formName).data(“bootstrapValidator”).updateStatus("fieldName", "NOT_VALIDATED", null );
3、重置表單所有驗證規則
$(formName).data("bootstrapValidator").resetForm();
4、手動觸發表單驗證
//觸發全部驗證 $(formName).data(“bootstrapValidator”).validate(); //觸發指定字段的驗證 $(formName).data(“bootstrapValidator”).validateField('fieldName');
5、獲取當前表單驗證狀態
var flag = $(formName).data(“bootstrapValidator”).isValid();
6、根據指定字段名稱獲取驗證對象
// element = jq對象 / null var element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');