表單校驗(yàn)是頁(yè)面開(kāi)發(fā)中非常常見(jiàn)的一類(lèi)需求，相信每個(gè)前端開(kāi)發(fā)人員都有這方面的經(jīng)驗(yàn)。網(wǎng)上有很多成熟的表單校驗(yàn)框架，雖然按照它們默認(rèn)的設(shè)計(jì)，用起來(lái)沒(méi)有多大的問(wèn)題，但是在實(shí)際工作中，表單校驗(yàn)有可能有比較復(fù)雜的個(gè)性化的需求，使得我們用這些插件的默認(rèn)機(jī)制并不能完成這些功能，所以要根據(jù)自己的需要去改造它們（畢竟自己還不到那個(gè)寫(xiě)一個(gè)完美的校驗(yàn)框架的層次）。我用過(guò)formValidation這個(gè)校驗(yàn)框架，雖然它跟bootstrap配合地很好，但是校驗(yàn)風(fēng)格太死板，不太滿足個(gè)性化的場(chǎng)景；后來(lái)我找到了jquery.validate，我發(fā)現(xiàn)這個(gè)框架還挺好的，因?yàn)樗惶峁┬ｒ?yàn)機(jī)制，但是不提供特定校驗(yàn)的交互，有比較多的自定義的空間。在校驗(yàn)風(fēng)格方面，有很多的形式，可以通過(guò)顏色，邊框，動(dòng)畫(huà)，文本顯示，彈框等多種方式來(lái)產(chǎn)生交互，至于要用哪種，就由需求以及自己的喜好來(lái)決定了。我偏向使用氣泡提示的校驗(yàn)風(fēng)格，因?yàn)闅馀菪畔⒃诮缑嫔现伙@示于字段的周邊，而不會(huì)對(duì)表單的內(nèi)容有所改變，看起來(lái)體驗(yàn)比較好。本文介紹自己使用jquery.validate以及bootstrap的tooltip打造一種氣泡式表單校驗(yàn)的思路，如果你有一些個(gè)性化較強(qiáng)的表單校驗(yàn)需求，希望這篇文章能對(duì)你有些參考價(jià)值。

在線demo（點(diǎn)擊下面鏈接頁(yè)面中的保存按鈕，或者改變表單元素的值都能觸發(fā)校驗(yàn)）：

http://liuyunzhuge.github.io/blog/form/dist/html/demo3.html

demo相關(guān)的邏輯代碼：

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/app/demo3.js

效果預(yù)覽：

組件實(shí)現(xiàn)：

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/formValidation.js

https://github.com/liuyunzhuge/blog/tree/master/form/src/js/mod/validation

（有3個(gè)關(guān)聯(lián)的文件，可通過(guò)以上鏈接查看）

其它事項(xiàng)：

1）本文提供的校驗(yàn)實(shí)現(xiàn)依賴jquery，jquery.validate，bootstrap，并采用seajs來(lái)做模塊化管理；

2）本文的demo結(jié)合之前寫(xiě)的form組件來(lái)一起使用，form管理的相關(guān)文章有：

簡(jiǎn)潔易用的表單數(shù)據(jù)設(shè)置和收集管理組件

進(jìn)一步豐富和簡(jiǎn)化表單管理的組件：form.js

相關(guān)文檔：

1）jquery.validate使用說(shuō)明 : https://jqueryvalidation.org/documentation/

2）tootip使用說(shuō)明： http://v3.bootcss.com/javascript/#tooltips

下面就來(lái)看看該如何實(shí)現(xiàn)這個(gè)氣泡式的表單校驗(yàn)吧。

1. 實(shí)現(xiàn)思路

用過(guò)jquery.validate就知道，這個(gè)插件默認(rèn)的校驗(yàn)機(jī)制是在某一個(gè)表單元素校驗(yàn)失敗后，把校驗(yàn)失敗的信息用一個(gè)label元素包裹起來(lái)，然后插入到表單元素的后面。如果我們要換成氣泡式的校驗(yàn)，那么首先就要考慮把它默認(rèn)的插入失敗信息的label元素的機(jī)制給取消掉，因?yàn)橛辛藲馀荩@個(gè)label顯然是多余的；然后還要去修改它的校驗(yàn)控制邏輯，在元素校驗(yàn)失敗的時(shí)候，用氣泡組件顯示失敗信息，在校驗(yàn)成功的時(shí)候，移除可能存在的相關(guān)的氣泡組件（因?yàn)檫@個(gè)元素之前如果有校驗(yàn)失敗的情況，就會(huì)初始化相關(guān)的氣泡組件）。至于這兩個(gè)動(dòng)作該怎么去處理，簡(jiǎn)單的方法就是改源碼，但是改源碼會(huì)帶來(lái)更大的問(wèn)題，一是不利于升級(jí)，二是不利于擴(kuò)展，將來(lái)要做其它的個(gè)性化校驗(yàn)，就容易沖突。更好地辦法是去查閱官方文檔，找到最佳的api來(lái)做自定義，這樣的話，就能完全避免改源碼帶來(lái)的問(wèn)題。如果我們碰到改造一個(gè)已有的組件來(lái)完成另一個(gè)組件，并且不得不改源碼的情況，更好的方式，不是直接把另一個(gè)組件的邏輯寫(xiě)到已有的組件里面，而是在已有的組件里面添加合適的接口，再通過(guò)接口來(lái)完成另一個(gè)組件。

翻閱jquery.validate的文檔，可以了解到它最核心的api是validate這個(gè)方法，這是一個(gè)可以直接在jquery對(duì)象上調(diào)用的方法，在調(diào)用它的時(shí)候，可以通過(guò)option傳遞很多的選項(xiàng)，其中有兩個(gè)選項(xiàng)，就可以用來(lái)完成我們的自定義功能：errorPlacement與showErrors，這兩個(gè)方法的作用以及簽名分別是：

errorPlacement : function(error, element) {…}

用來(lái)自定義表單元素失敗信息的插入位置，如果這個(gè)方法是一個(gè)空函數(shù)，那么失敗信息就不會(huì)插入到DOM里面去。它有兩個(gè)參數(shù)，error表示失敗信息生成的jquery對(duì)象；element表示單個(gè)的表單元素的jquery對(duì)象。

showErrors: function(errorMap, errorList) {…}

用來(lái)自定義校驗(yàn)信息的顯示機(jī)制。它有兩個(gè)參數(shù)，第一個(gè)參數(shù)以O(shè)bject的形式，封裝了當(dāng)前校驗(yàn)操作的所有校驗(yàn)失敗的信息；第二個(gè)參數(shù)errorList是一個(gè)數(shù)組，它的每個(gè)元素包含兩個(gè)屬性element和message分別代表失敗的表單元素的jq對(duì)象和失敗信息。另外在這個(gè)方法里面通過(guò)this.successList還可訪問(wèn)到所有校驗(yàn)成功的元素列表，這個(gè)successList也是一個(gè)數(shù)組，它的每個(gè)元素就是校驗(yàn)成功的表單元素的DOM對(duì)象。

通過(guò)前面對(duì)這兩個(gè)方法的描述，大概就能知道該如何去完成自定義的表單校驗(yàn)功能了：

1）如果在errorPlacement這個(gè)option里什么都不做，那么校驗(yàn)的時(shí)候就不會(huì)插入到頁(yè)面中了；

2）在showErrors里面，通過(guò)errorList和successList，我們可以分別遍歷一遍，給失敗的元素顯示tooltip，然后給成功的元素移除tooltip。

下圖是簡(jiǎn)單說(shuō)明我的實(shí)現(xiàn)中對(duì)jquery.validate調(diào)用時(shí)的方式，只用到了前面提到的這兩個(gè)選項(xiàng)。

接下來(lái)就來(lái)看看實(shí)際實(shí)現(xiàn)時(shí)的一些要點(diǎn)。

2. 詳細(xì)實(shí)現(xiàn)

1）從代碼組織說(shuō)起

本文實(shí)現(xiàn)主要包含三個(gè)文件：

https://github.com/liuyunzhuge/blog/blob/master/form/src/js/mod/formValidation.js

https://github.com/liuyunzhuge/blog/tree/master/form/src/js/mod/validation（這個(gè)文件包含兩個(gè)文件：validate.js和validator.js）

核心的文件是mod/validation文件夾下的兩個(gè)。其中：

validate.js是最核心的代碼，包含了所有的自定義邏輯； validator.js僅僅是對(duì)jquery.validate默認(rèn)的校驗(yàn)信息做的重置，因?yàn)樗J(rèn)是英文的，而我的項(xiàng)目環(huán)境不需要考慮英文，所以就在這個(gè)文件里做了統(tǒng)一的處理；另外如果要添加一些全局的校驗(yàn)器的話，也可以考慮添加在這里。

mod/formValidation.js是在頁(yè)面中直接引用的文件，它依賴mod/validation/validate.js，同時(shí)基于validate.js提供的接口，注冊(cè)了一些自定義的處理，這些自定義的處理我會(huì)在后面進(jìn)行說(shuō)明，它的作用僅僅是為了將validate.js的功能與我之前寫(xiě)的form相關(guān)組件結(jié)合起來(lái)使用。

如果你對(duì)本文的實(shí)現(xiàn)感興趣，但是對(duì)我寫(xiě)的form相關(guān)組件不感興趣的話，完全可以考慮只關(guān)注validate.js和validator.js，因?yàn)闆](méi)有formValidation.js，它們的功能依然是完整的。

2）新添加的option

在validate.js中可以看到有一個(gè)DEFAULTS，來(lái)定義本文實(shí)現(xiàn)的組件模塊的option，除了對(duì)jquery.validate插件相關(guān)的option進(jìn)行覆蓋，還增加了以下option，來(lái)完成更豐富的功能：

useTooltip: true,//配置是否啟用氣泡提示來(lái)顯示校驗(yàn)失敗的信息，默認(rèn)啟用
tipPlacement: 'right',//全局的氣泡提示的位置
tooltipDuration: 2500,//多久自動(dòng)隱藏tooltip
fieldConfig: {},//按字段名稱配置一些東西，如：
/**
 * {
 * title: {
 * fvTipTarget: function($field){ return $field.closest(...);}, //配置氣泡提示關(guān)聯(lián)的DOM元素
 * tipPlacement: 'top', //配置氣泡提示的顯示位置：上下左右
 * tooltipClass: 'tooltip-name', //配置氣泡提示組件需要添加的css類(lèi)
 * errorPlacement: function(error,element){}, //配置字段錯(cuò)誤信息的插入位置
 * fvRelatedTarget: function($field){return ...}, //配置校驗(yàn)時(shí)關(guān)聯(lián)影響的DOM元素
 * }
 * }
 *
 * 其中fvTipTarget fvRelatedTarget可以是function和jQuery對(duì)象兩種形式
 */
fieldTypeConfig: {},//按字段類(lèi)型配置一些東西，如：
/**
 * {
 * date: {
 * fvTipTarget: function($field){ return $field.closest(...);}, //配置date類(lèi)型的字段校驗(yàn)失敗時(shí)氣泡提示關(guān)聯(lián)的DOM元素
 * tipPlacement: 'top', //配置date類(lèi)型的字段校驗(yàn)失敗時(shí)氣泡提示的顯示位置：上下左右
 * tooltipClass: 'tooltip-name', //配置date類(lèi)型的字段校驗(yàn)失敗時(shí)氣泡提示組件需要添加的css類(lèi)
 * errorPlacement: function(error,element){}, //配置date類(lèi)型的字段的錯(cuò)誤信息的插入位置
 * fvRelatedTarget: function($field){return ...}, //配置date類(lèi)型的字段時(shí)校驗(yàn)時(shí)關(guān)聯(lián)影響的DOM元素
 * }
 * }
 * 如果要為所有的類(lèi)型定義一個(gè)配置，可把類(lèi)型名稱設(shè)置為all，如all: {errorPlacement: function(){..}}
 * 優(yōu)先級(jí)：
 * fieldConfig > fieldTypeConfig<type> > Validation.defaultFieldTypeConfig > fieldTypeConfig<all>
 */

詳細(xì)作用如下：

useTooltip決定了是否啟用氣泡校驗(yàn)的功能，默認(rèn)為true，如果為false，validate.js提供的模塊將使用默認(rèn)的校驗(yàn)機(jī)制來(lái)顯示校驗(yàn)邏輯；

tipPlacement: 全局的氣泡提示顯示的位置，用過(guò)bootstrap的tooltip就知道，它可以顯示到一個(gè)元素的上下左右，通過(guò)這個(gè)可以改變氣泡提示的默認(rèn)位置；

tooltipDuration: 配置氣泡顯示的時(shí)間。我提供的實(shí)現(xiàn)，在顯示氣泡時(shí)的邏輯是：在校驗(yàn)失敗的時(shí)候，顯示tootip，然后在這個(gè)選項(xiàng)指定的時(shí)間過(guò)去之后，自動(dòng)消失，當(dāng)鼠標(biāo)再次移入失敗元素的時(shí)候，tooltip會(huì)再次顯示，鼠標(biāo)移出的時(shí)候再消失。

fieldConfig：可以用來(lái)根據(jù)字段名稱做一些配置，注釋中有配舉例。可配置的選項(xiàng)說(shuō)明如下：

- fvTipTarget：用來(lái)自定義氣泡顯示在哪個(gè)元素上； - tipPlacement：配置某個(gè)元素氣泡提示的顯示位置 - tooltipClass：自定義氣泡組件的css類(lèi) - errorPlacement：自定義某個(gè)元素的失敗信息的插入位置 - fvRelatedTarget：自定義元素校驗(yàn)時(shí)需要關(guān)聯(lián)影響的其它元素，其實(shí)就是在表單元素校驗(yàn)失敗的時(shí)候也把相關(guān)的validClass和errorClass這兩個(gè)css類(lèi)，同步管理到其它元素而已。

需要注意的是，fieldConfig是根據(jù)字段元素名稱來(lái)配置的，因?yàn)橹荒芨鶕?jù)名稱來(lái)找到相應(yīng)的元素，所以表單元素上面一定要有name屬性，這樣才能找到fieldConfig中的配置項(xiàng)。

fieldTypeConfig：可以用來(lái)按字段類(lèi)型做一些配置，它的配置項(xiàng)跟fieldConfig的一致，只不過(guò)它的好處在于，可以為同一個(gè)類(lèi)型的字段指定相同的配置，省的在fieldConfig里面要重復(fù)配置。

需要注意的是：fieldType是通過(guò)在表單元素上的type屬性或者data-type屬性或者data-fv-type屬性來(lái)指定的，優(yōu)先級(jí)：data-fv-type > data-type > type。在fieldTypeConfig中，可以使用all這個(gè)特殊的type，它不需要在表單元素上指定，用來(lái)對(duì)所有的字段進(jìn)行一個(gè)統(tǒng)一的配置。在validate.js模塊的靜態(tài)成員上，提供了defaultFieldTypeConfig對(duì)象，通過(guò)擴(kuò)展這個(gè)對(duì)象，可以提供默認(rèn)的一些按字段類(lèi)型的配置，方便做一些統(tǒng)一處理。最后一點(diǎn)在靜態(tài)成員部分還會(huì)再詳細(xì)介紹。

jquery.validate相關(guān)的一些需要覆蓋的option及其說(shuō)明如下：

debug: true,//防止校驗(yàn)成功后表單自動(dòng)提交
submitHandler: $.noop,//屏蔽表單校驗(yàn)成功后的表單提交功能，由外部的Form組件負(fù)責(zé)提交
ignore: '[type="hidden"]:not(.fv-yes),[disabled]:not(.fv-yes),.fv-no',//用于過(guò)濾不參與校驗(yàn)的元素
errorElement: 'i',//使用<i>元素來(lái)包裹校驗(yàn)失敗的信息
errorClass: 'fv-error',//校驗(yàn)失敗時(shí)相應(yīng)的class
validClass: 'fv-valid'//校驗(yàn)成功時(shí)相應(yīng)的class

需要補(bǔ)充的是：

a. 為啥要防止表單自動(dòng)提交，因?yàn)槲易约焊蛴谥鲃?dòng)控制表單提交；

b. ignore部分，沒(méi)有完全把隱藏的或者禁用的表單元素排除掉，有一些時(shí)候隱藏元素也是能夠用于校驗(yàn)的。

3）核心實(shí)現(xiàn)

核心實(shí)現(xiàn)的方法就是下面的代碼：

$element.validate($.extend(opts, {
 errorPlacement: function (error, element) {
 if (opts.useTooltip) {
  return;
 }
 //jquery.validate組件默認(rèn)的校驗(yàn)失敗信息的插入方式是：在該元素后面插入校驗(yàn)失敗的信息
 //我們可以按字段及字段類(lèi)型通過(guò)fieldConfig與fieldTypeConfig來(lái)自定義插入的方式
 var _errorPlacement = getCommonConfig('errorPlacement', element, opts);
 if (!isFunc(_errorPlacement)) {
  _errorPlacement = function () {
  error.insertAfter(element);
  }
 }
 _errorPlacement(error, element);
 },
 showErrors: function (errorMap, errorList) {
 //覆蓋這個(gè)方法以便在校驗(yàn)失敗的時(shí)候顯示tooltip
 //不啟用tooltip的時(shí)候按默認(rèn)的方式顯示失敗信息
 var successList = this.successList;
 //處理本次校驗(yàn)失敗的字段
 if ($.isArray(errorList)) {
  errorList.forEach(function (item) {
  setRelatedTargetStyle(item.element, opts, true);
  if (opts.useTooltip) {
   //顯示失敗的tooltip
   showErrorItem(item, opts, that);
  }
  });
 }
 if ($.isArray(successList)) {
  successList.forEach(function (element) {
  setRelatedTargetStyle(element, opts, false);
  if (opts.useTooltip) {
   //移除原先可能失敗導(dǎo)致的tooltip
   showSuccessItem(element, opts, that);
  }
  });
 }
 //官方文檔要求，在自定義showErrors之后，通過(guò)調(diào)用下面的方法完全內(nèi)置的其它處理
 this.defaultShowErrors();
 }
}));

這兩個(gè)代碼應(yīng)該很好理解，因?yàn)楦鱾€(gè)部分的邏輯都已經(jīng)單獨(dú)抽出來(lái)封裝了，細(xì)節(jié)可以逐一去閱讀了解：

以上每個(gè)方法都比較簡(jiǎn)單，所以就不拆開(kāi)來(lái)介紹了。

4）繼承jquery.validate提供的其它api方法

由于在實(shí)際的工作中，表單校驗(yàn)的邏輯有的時(shí)候會(huì)很復(fù)雜，尤其涉及到字段有增刪改，校驗(yàn)規(guī)則有增刪改的時(shí)候，所以去看jquery.valiate的文檔，也能發(fā)現(xiàn)它提供了不止validate這個(gè)api，還有很多其它有用的方法，為了方便，所以直接把jquery.validate提供的其它validate.js不具備的方法都繼承過(guò)來(lái)：

//將jquery.validate的api方法代理到自身
for (var i in this._validator) {
 if (!(i in this) && isFunc(this._validator[i])) {
 this[i] = (function (context, func) {
  return function () {
  return func.apply(context, arguments);
  }
 })(this._validator, this._validator[i]);
 }
}

5）表單校驗(yàn)重置

一個(gè)很普遍的需求，就是有的時(shí)候需要重置表單，這個(gè)時(shí)候除了重置表單元素的值，還得重置它們的校驗(yàn)狀態(tài)，雖然jquery.validate有提供相關(guān)方法，但是由于我們有用到tooltip組件以及添加了一些其它處理，所以需要對(duì)表單校驗(yàn)的重置功能，做一些自定義，主要是tooltip組件的銷(xiāo)毀和一些狀態(tài)的還原：

resetForm: function () {
 var $element = this.$element,
 opts = this.options;
 //清除掉tooltip組件及綁定的事件
 if (opts.useTooltip) {
 $element.find('.fv-tip-target').each(function () {
  var tooltip = $(this).data('bs.tooltip');
  checkHideTimeout(tooltip);
  tooltip && tooltip.destroy();
 }).off('.fv');
 }
 $element.find('.fv-related-target').removeClass(opts.validClass + ' fv-related-target ' + opts.errorClass);
 this._validator.resetForm();
}

6）靜態(tài)成員

validate.js提供了一些靜態(tài)成員，有屬性也有方法，使用的方法見(jiàn)mod/formValidation.js。其中

defaultFieldTypeConfig：用來(lái)存儲(chǔ)全局的一些按字段類(lèi)型的配置項(xiàng)；

extendFieldTypeConfig：用來(lái)擴(kuò)展defaultFieldTypeConfig。

validateEvents：用來(lái)存儲(chǔ)全局的一些自定義的校驗(yàn)事件。

addValidateEvent和removeValidateEvent用來(lái)添加和移除自定義的校驗(yàn)事件。

為什么會(huì)有自定義的校驗(yàn)事件？因?yàn)樵趈query.validate這個(gè)插件的默認(rèn)機(jī)制下，有些表單元素的change事件并不會(huì)觸發(fā)當(dāng)前元素的校驗(yàn)，導(dǎo)致界面上不能實(shí)時(shí)反饋元素的校驗(yàn)狀態(tài)。這個(gè)用來(lái)幫助我們自動(dòng)的注冊(cè)一些元素的特殊事件，然后在這些事件回調(diào)內(nèi)主動(dòng)觸發(fā)對(duì)元素的校驗(yàn)。

3. 使用舉例

從demo相關(guān)的邏輯代碼中，就看到實(shí)際的使用舉例：

從這個(gè)舉例也能看到，新的Validation組件跟直接使用jquery.validate沒(méi)有太大的區(qū)別，就是多幾個(gè)option，rules跟messages都是jquery.validate提供的option，而fieldTypeConfig是新提供的option；但是在功能上，校驗(yàn)的方式已經(jīng)完全變成我所期待的的氣泡式校驗(yàn)了，這個(gè)體驗(yàn)跟jquery.validate默認(rèn)的體驗(yàn)比起來(lái)，肯定就要好很多了。

4. 相關(guān)CSS

為了正確顯示demo中的校驗(yàn)效果，css也是很重要的一部分，demo相關(guān)的css可在src/css/form.css中去查找，跟校驗(yàn)相關(guān)的css可通過(guò).fv這個(gè)關(guān)鍵詞來(lái)搜索。

5. 總結(jié)

本文介紹了一種如何根據(jù)jquery.validate這種已有的校驗(yàn)框架來(lái)完成個(gè)性化的表單校驗(yàn)功能思路，將來(lái)在碰到其它的個(gè)性化校驗(yàn)需求的時(shí)候，也完全可參照這個(gè)思路，嘗試去做些統(tǒng)一的自定義組件，畢竟基于已有的成果去擴(kuò)展比自己去造輪子，要來(lái)的更快更輕一些。本文提供的校驗(yàn)方式，使用起來(lái)還是挺爽的，也支持校驗(yàn)規(guī)則的增刪改，方式同官方文檔，歡迎使用并討論相關(guān)的問(wèn)題，我在項(xiàng)目中都用它，尤其在管理系統(tǒng)里面開(kāi)發(fā)的時(shí)候，非常高效。

以上所述希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論