bootstrapValidator驗證大全 添加到js上 註：以下參數上面的賦值都為預設值，不添加該參數即使用預設值 定義自定義驗證規則 該規則是拓展插件的validators方法。 我將項目中常用的方法放到了一個單獨js中，也就是上面第一步引用的自定義方法。 使用方法如下： 常用事件 1、重置某 ...
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();
//提交邏輯
});
