bootstrapValidator 表單驗證

 

1、引入必要文件

下載地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/path/to/dist/css/

1、引入必要文件

下載地址：(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip)

<link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/path/to/dist/css/bootstrapValidator.min.css"/> <script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script> <script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script> // 帶衆多經常使用默認驗證規則的 <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator-all.js"></script> // 不帶經常使用規則，需自定義規則 <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script> //此方法是我編寫經常使用的自定義規則的，也可直接寫到對應的表單的js中 <script type="text/javascript" src="/path/to/dist/js/validator/atfmCustomValidatorRules.js"></script>

2、編寫HTML

在表單中，若對某一字段想添加驗證規則，默認須要以<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>

 

3、添加驗證規則

一、添加到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> 

 

 

 

二、添加到js上

注：如下參數上面的賦值都爲默認值，不添加該參數即便用默認值

$(formSelector).bootstrapValidator({
    /** * 指定不驗證的狀況 * 值可設置爲如下三種類型： * 一、String ':disabled, :hidden, :not(:visible)' * 二、Array 默認值 [':disabled', ':hidden', ':not(:visible)'] * 三、帶回調函數 [':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> } } } });

 

4、定義自定義驗證規則

該規則是拓展插件的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));

 

5、經常使用事件

一、重置某一單一驗證字段驗證規則

$(formName).data(「bootstrapValidator」).updateStatus("fieldName", "NOT_VALIDATED", null );

二、重置表單全部驗證規則

$(formName).data("bootstrapValidator").resetForm();

三、手動觸發表單驗證

//觸發所有驗證
$(formName).data(「bootstrapValidator」).validate(); //觸發指定字段的驗證 $(formName).data(「bootstrapValidator」).validateField('fieldName');

四、獲取當前表單驗證狀態

// flag = true/false 
var flag = $(formName).data(「bootstrapValidator」).isValid();

 

五、根據指定字段名稱獲取驗證對象

// element = jq對象 / null var element = $(formName).data(「bootstrapValidator」).getFieldElements('fieldName');

 

6、表單提交

一、當提交按鈕是普通按鈕 
手動觸發表單驗證 
示例：

$("buttonName").on("click", function(){ //獲取表單對象 var bootstrapValidator = form.data('bootstrapValidator'); //手動觸發驗證 bootstrapValidator.validate(); if(bootstrapValidator.isValid()){ //表單提交的方法、好比ajax提交 } });

 

二、當提交按鈕的[type=」submit」]時 
會在success以前自動觸發表單驗證

var bootstrapValidator = form.data('bootstrapValidator'); bootstrapValidator.on('success.form.bv', function (e) { e.preventDefault(); //提交邏輯 });

 

不知道各位小夥伴們看懂了沒，這個插件蠻好用的，上手也快，結合bootstrap風格節省了不少樣式調節

.min.css"/> <script type="text/javascript" src="/path/to/jquery/jquery.min.js"></script> <script type="text/javascript" src="/path/to/bootstrap/js/bootstrap.min.js"></script> // 帶衆多經常使用默認驗證規則的 <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator-all.js"></script> // 不帶經常使用規則，需自定義規則 <script type="text/javascript" src="/path/to/dist/js/bootstrapValidator.min.js"></script> //此方法是我編寫經常使用的自定義規則的，也可直接寫到對應的表單的js中 <script type="text/javascript" src="/path/to/dist/js/validator/atfmCustomValidatorRules.js"></script>

 

2、編寫HTML

在表單中，若對某一字段想添加驗證規則，默認須要以<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>

 

3、添加驗證規則

一、添加到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>

二、添加到js上

注：如下參數上面的賦值都爲默認值，不添加該參數即便用默認值

$(formSelector).bootstrapValidator({
    /** * 指定不驗證的狀況 * 值可設置爲如下三種類型： * 一、String ':disabled, :hidden, :not(:visible)' * 二、Array 默認值 [':disabled', ':hidden', ':not(:visible)'] * 三、帶回調函數 [':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> } } } });

4、定義自定義驗證規則

該規則是拓展插件的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));

 

5、經常使用事件

一、重置某一單一驗證字段驗證規則

$(formName).data(「bootstrapValidator」).updateStatus("fieldName", "NOT_VALIDATED", null );

二、重置表單全部驗證規則

$(formName).data("bootstrapValidator").resetForm();

三、手動觸發表單驗證

//觸發所有驗證
$(formName).data(「bootstrapValidator」).validate(); //觸發指定字段的驗證 $(formName).data(「bootstrapValidator」).validateField('fieldName');

 

四、獲取當前表單驗證狀態

// flag = true/false 
var flag = $(formName).data(「bootstrapValidator」).isValid();

 

五、根據指定字段名稱獲取驗證對象

// element = jq對象 / null var element = $(formName).data(「bootstrapValidator」).getFieldElements('fieldName');

六表單提交

一、當提交按鈕是普通按鈕 
手動觸發表單驗證 
示例：

$("buttonName").on("click", function(){ //獲取表單對象 var bootstrapValidator = form.data('bootstrapValidator'); //手動觸發驗證 bootstrapValidator.validate(); if(bootstrapValidator.isValid()){ //表單提交的方法、好比ajax提交 } });

 

二、當提交按鈕的[type=」submit」]時 
會在success以前自動觸發表單驗證

var bootstrapValidator = form.data('bootstrapValidator'); bootstrapValidator.on('success.form.bv', function (e) { e.preventDefault(); //提交邏輯 });

 

不知道各位小夥伴們看懂了沒，這個插件蠻好用的，上手也快，結合bootstrap風格節省了不少樣式調節