bootstrapValidator驗證大全
<meta name='viewport' content='width=device-width, initial-scale=1'>");
out.println("<link href='" + path + "bootstrap3/css/bootstrap.min.css' rel='stylesheet' type='text/css'/>");
out.println("<link href='" + path + "bootstrap3/css/bootstrap-theme.min.css' rel='stylesheet' type='text/css'/>");
out.println("<link href='" + path + "bootstrap3/css/bootstrapValidator.min.css' rel='stylesheet' type='text/css'/>");
out.println("<script type='text/javascript' src='" + path + "bootstrap3/js/jquery.min.js'></script>");
out.println("<script type='text/javascript' src='" + path + "bootstrap3/js/bootstrap.min.js'></script>");
out.println("<script type='text/javascript' src='" + path + "bootstrap3/js/bootstrapValidator.min.js'></script>");
<jsp:include page="../../bootstrap3/bootstrap.jsp"></jsp:include> <script rel="stylesheet"> $(function () { $('form').bootstrapValidator({ live: 'enabled',//驗證時機，enabled是內容有變化就驗證（默認），disabled和submitted是提交再驗證 excluded: [':disabled', ':hidden', ':not(:visible)'],//排除無需驗證的控件，比如被禁用的或者被隱藏的 // submitButtons: '#subtn',//指定提交按鈕，如果驗證失敗則變成disabled，但我沒試成功，反而加了這句話非submit按鈕也會提交到action指定頁面 message: '通用的驗證失敗消息',//特殊處理會用到 feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, fields: { username: { message: '賬號驗證失敗', validators: { notEmpty: { message: '賬號不能為空' }, stringLength: { min: 6, max: 18, message: '賬號長度必須為6到18之間' }, regexp: { regexp: /^[a-zA-Z0-9_]+$/, message: '賬號只能包含大寫、小寫、數字和下划線' } } }, phone: { message: '電話無效', validators: { notEmpty: { message: '手機號碼不能為空' }, stringLength: { min: 11, max: 11, message: '請輸入11位手機號碼' }, regexp: { regexp: /^1[3|5|7|8]{1}[0-9]{9}$/, message: '請輸入正確的手機號碼' } } }, verificationCode: { validators: { notEmpty: { message: '驗證碼不能為空' } } }, password: { message: '密碼無效', validators: { notEmpty: { message: '密碼不能為空' }, stringLength: { min: 6, max: 18, message: '長度必須在6到30之間' }, identical: {//相同 field: 'repassword', //需要進行比較的input name值 message: '兩次密碼不一致' }, different: {//不能和用戶名相同 field: 'username',//需要進行比較的input name值 message: '不能和用戶名相同' }, regexp: { regexp: /^[a-zA-Z0-9_\.]+$/, message: '用戶名只能由字母、數字、點和下划線組成' } } }, repassword: { message: '密碼無效', validators: { notEmpty: { message: '密碼不能為空' }, stringLength: { min: 6, max: 30, message: '長度必須在6到30之間' }, identical: {//相同 field: 'password', message: '兩次密碼不一致' }, different: {//不能和用戶名相同 field: 'username', message: '不能和用戶名相同' }, regexp: {//匹配規則 regexp: /^[a-zA-Z0-9_\.]+$/, message: '用戶名只能由字母、數字、點和下划線組成' } } }, nickname: { validators: { notEmpty: { message: '昵稱不能為空' } } }, email: { validators: { notEmpty: { message: '郵箱地址不能為空' }, emailAddress: { message: '請輸入正確的郵件地址' } } }, fields: { datetimeStart: { trigger: "change", validators: { notEmpty: { message: '請選擇開始時間' } } }, datetimeEnd: {//日期驗證 trigger: "change", validators: { notEmpty: { message: '請選擇結束時間' }, callback: { message: '開始時間必須小於結束時間', callback: function (value, validator, $field) { let other = validator.getFieldElements('datetimeStart').val();//獲得另一個的值 let start = new Date(other.replace("-", "/").replace("-", "/")); let end = new Date(value.replace("-", "/").replace("-", "/")); if (start <= end) { return true; } return false; } } } }, } } }); }).on('success.form.bv', function (e) { // 防止表單提交 e.preventDefault(); // 獲取表單實例 var $form = $(e.target); // 獲取BooTrasPalpDealver實例 var bv = $form.data('bootstrapValidator'); // 使用AJAX提交表單數據 $.post('/toback', function (data) { if (data.Status == "ok") { window.location.href = "/toback"; } else if (data.Status == "error") { alert(data.Message); } else { alert("未知錯誤"); } ; }); }) </script>
添加到js上
注：以下參數上面的賦值都為默認值，不添加該參數即使用默認值
$(formSelector).bootstrapValidator({
/** * 指定不驗證的情況 * 值可設置為以下三種類型： * 1、String ':disabled, :hidden, :not(:visible)' * 2、Array 默認值 [':disabled', ':hidden', ':not(:visible)'] * 3、帶回調函數 [':disabled', ':hidden', function($field, validator) { // $field 當前驗證字段dom節點 // validator 驗證實例對象 // 可以再次自定義不要驗證的規則 // 必須要return，return true or false; return !$field.is(':visible'); }] */ excluded: [':disabled', ':hidden', ':not(:visible)'], /** * 指定驗證后驗證字段的提示字體圖標。（默認是bootstrap風格） * Bootstrap 版本 >= 3.1.0 * 也可以使用任何自定義風格，只要引入好相關的字體文件即可 * 默認樣式 .form-horizontal .has-feedback .form-control-feedback { top: 0; right: 15px; } * 自定義該樣式覆蓋默認樣式 .form-horizontal .has-feedback .form-control-feedback { top: 0; right: -15px; } .form-horizontal .has-feedback .input-group .form-control-feedback { top: 0; right: -30px; } */ feedbackIcons: { valid: 'glyphicon glyphicon-ok', invalid: 'glyphicon glyphicon-remove', validating: 'glyphicon glyphicon-refresh' }, /** * 生效規則（三選一） * enabled 字段值有變化就觸發驗證 * disabled,submitted 當點擊提交時驗證並展示錯誤信息 */ live: 'enabled', /** * 為每個字段指定通用錯誤提示語 */ message: 'This value is not valid', /** * 指定提交的按鈕，例如：'.submitBtn' '#submitBtn' * 當表單驗證不通過時，該按鈕為disabled */ submitButtons: 'button[type="submit"]', /** * submitHandler: function(validator, form, submitButton) { * //validator: 表單驗證實例對象 * //form jq對象 指定表單對象 * //submitButton jq對象 指定提交按鈕的對象 * } * 在ajax提交表單時很實用 * submitHandler: function(validator, form, submitButton) { // 實用ajax提交表單 $.post(form.attr('action'), form.serialize(), function(result) { // .自定義回調邏輯 }, 'json'); } * */ submitHandler: null, /** * 為每個字段設置統一觸發驗證方式（也可在fields中為每個字段單獨定義），默認是live配置的方式，數據改變就改變 * 也可以指定一個或多個（多個空格隔開） 'focus blur keyup' */ trigger: null, /** * Number類型 為每個字段設置統一的開始驗證情況，當輸入字符大於等於設置的數值后才實時觸發驗證 */ threshold: null, /** * 表單域配置 */ fields: { //多個重復 <fieldName>: { //隱藏或顯示 該字段的驗證 enabled: true, //錯誤提示信息 message: 'This value is not valid', /** * 定義錯誤提示位置 值為CSS選擇器設置方式 * 例如：'#firstNameMeg' '.lastNameMeg' '[data-stripe="exp-month"]' */ container: null, /** * 定義驗證的節點，CSS選擇器設置方式，可不必須是name值。 * 若是id，class, name屬性，<fieldName>為該屬性值 * 若是其他屬性值且有中划線鏈接，<fieldName>轉換為駝峰格式 selector: '[data-stripe="exp-month"]' => expMonth */ selector: null, /** * 定義觸發驗證方式（也可在fields中為每個字段單獨定義），默認是live配置的方式，數據改變就改變 * 也可以指定一個或多個（多個空格隔開） 'focus blur keyup' */ trigger: null, // 定義每個驗證規則 validators: { //多個重復 //官方默認驗證參照 http://bv.doc.javake.cn/validators/ // 注：使用默認前提是引入了bootstrapValidator-all.js // 若引入bootstrapValidator.js沒有提供常用驗證規則，需自定義驗證規則哦 <validatorName>: <validatorOptions> } } } });定義自定義驗證規則
該規則是拓展插件的validators方法。
我將項目中常用的方法放到了一個單獨js中，也就是上面第一步引用的自定義方法。
使用方法如下：
(function($) {
//自定義表單驗證規則 $.fn.bootstrapValidator.validators = { <validatorName> : { /** * @param {BootstrapValidator} 表單驗證實例對象 * @param {jQuery} $field jQuery 對象 * @param {Object} 表單驗證配置項值 * @returns {boolean} */ validate: function(validator, $field, options) { // 表單輸入的值 // var value = $field.val(); //options為<validatorOptions>對象，直接.獲取需要的值 // 返回true/false //也可返回{ valid : true/false, message: 'XXXX'} return reg.test( $field.val() ); } }, }; }(window.jQuery))
常用事件
1、重置某一單一驗證字段驗證規則
$(formName).data(“bootstrapValidator”).updateStatus("fieldName", "NOT_VALIDATED", null );2、重置表單所有驗證規則
$(formName).data("bootstrapValidator").resetForm();
3、手動觸發表單驗證//觸發全部驗證
$(formName).data(“bootstrapValidator”).validate(); //觸發指定字段的驗證 $(formName).data(“bootstrapValidator”).validateField('fieldName');4、獲取當前表單驗證狀態
// flag = true/false
var flag = $(formName).data(“bootstrapValidator”).isValid();
5、根據指定字段名稱獲取驗證對象
// element = jq對象 / null var element = $(formName).data(“bootstrapValidator”).getFieldElements('fieldName');
表單提交
1、當提交按鈕是普通按鈕
手動觸發表單驗證
示例：
$("buttonName").on("click", function(){ //獲取表單對象 var bootstrapValidator = form.data('bootstrapValidator'); //手動觸發驗證 bootstrapValidator.validate(); if(bootstrapValidator.isValid()){ //表單提交的方法、比如ajax提交 } });
2、當提交按鈕的[type=”submit”]時
會在success之前自動觸發表單驗證
var bootstrapValidator = form.data('bootstrapValidator'); bootstrapValidator.on('success.form.bv', function (e) { e.preventDefault(); //提交邏輯 });