[發(fā)明專利]一種表單驗證方法及系統(tǒng)

在審

• 申請?zhí)枺?/td>: 201410203211.5
• 申請日: 2014-05-14
• 公開（公告）號: CN103984547A
• 公開（公告）日: 2014-08-13
• 發(fā)明（設(shè)計）人: 賈春樂
• 申請（專利權(quán)）人: 上海上訊信息技術(shù)股份有限公司
• 主分類號: G06F9/44
• 分類號: G06F9/44
• 代理公司: 上海百一領(lǐng)御專利代理事務(wù)所(普通合伙) 31243
• 代理人: 馬育麟

技術(shù)領(lǐng)域

本發(fā)明涉及web前端的表單驗證，尤其涉及一種表單驗證方法及系統(tǒng)。

背景技術(shù)

隨著表單驗證需求的日益復(fù)雜，數(shù)據(jù)格式的多樣化，一般的表單驗證方式代碼復(fù)用率低，開發(fā)效率不高，即使是封裝了若干驗證規(guī)則的函數(shù)去調(diào)用，前端或者前臺人員仍需要根據(jù)驗證流程寫大量的關(guān)于驗證過程和DOM操作的代碼。當(dāng)前面臨的問題是如何保證只調(diào)用很少的API，只需要指定相應(yīng)的驗證要求，就可以很快捷的去完成驗證過程，減少大量代碼的書寫，進行更集中化的封裝。

綜上可知，現(xiàn)有技術(shù)在實際使用上顯然存在不便與缺陷，所以有必要加以改進。

發(fā)明內(nèi)容

針對上述的缺陷，本發(fā)明的目的在于提供一種表單驗證方法及系統(tǒng)，解決了表單驗證繁雜化，通過大量的代碼去實現(xiàn)驗證流程問題，使得很少的API調(diào)用就可以滿足表單驗證的需求。

為了實現(xiàn)上述目的，本發(fā)明提供一種表單驗證方法，所述方法包括如下步驟

定義表單元素驗證規(guī)則，并將所述驗證規(guī)則與配置項以DOM選擇器方式封裝到表單驗證插件中；

進行表單驗證時調(diào)用對表單綁定的統(tǒng)一配置驗證的表單驗證插件API和提交表單前的全局驗證的表單驗證插件API，進行全局驗證時對需要驗證的表單元素進行一次遍歷，逐一根據(jù)所設(shè)置的驗證規(guī)則進行驗證。

根據(jù)本發(fā)明的表單驗證方法，“將所述驗證規(guī)則與配置項以DOM選擇器方式封裝到表單驗證插件中”的步驟中，所述配置項包括提示框的主題配置，是否忽略隱藏元素驗證的配置以及進行自定義提示樣式的配置。

根據(jù)本發(fā)明的表單驗證方法，“定義表單元素驗證規(guī)則”的步驟中，所述驗證規(guī)則包括：自定義一個屬性名表示表單元素驗證名稱，屬性值定義驗證規(guī)則。

根據(jù)本發(fā)明的表單驗證方法，“定義表單元素驗證規(guī)則”的步驟中，所述驗證規(guī)則包括：采用自定義正則表達式或函數(shù)進行驗證。

根據(jù)本發(fā)明的表單驗證方法，提示框的主題配置包括輸入的提示和如果輸入不合理的錯誤提示；

自定義提示樣式的配置包括：將表單的提示樣式配置為懸浮框提示的方式。

本發(fā)明相應(yīng)提供一種表單驗證系統(tǒng)，所述系統(tǒng)包括：

表單元素定義模塊，用于定義表單元素驗證規(guī)則，

封裝模塊，用于將所述驗證規(guī)則與配置項以DOM選擇器方式封裝到表單驗證插件中；

接口調(diào)用模塊，用于進行表單驗證時調(diào)用對表單綁定的統(tǒng)一配置驗證的表單驗證插件API和提交表單前的全局驗證的表單驗證插件API，進行全局驗證時對需要驗證的表單元素進行一次遍歷，逐一根據(jù)所設(shè)置的驗證規(guī)則進行驗證。

根據(jù)本發(fā)明的表單驗證系統(tǒng)，所述配置項包括提示框的主題配置，是否忽略隱藏元素驗證的配置以及進行自定義提示樣式的配置。

根據(jù)本發(fā)明的表單驗證系統(tǒng)，所述驗證規(guī)則包括：自定義一個屬性名表示表單元素驗證名稱，屬性值定義具體的驗證規(guī)則。

根據(jù)本發(fā)明的表單驗證系統(tǒng)，所述驗證規(guī)則包括：采用自定義正則表達式或函數(shù)進行驗證。

根據(jù)本發(fā)明的表單驗證系統(tǒng)，提示框的主題配置包括輸入的提示和如果輸入不合理的錯誤提示；自定義提示樣式的配置包括：將表單的提示樣式配置為懸浮框提示的方式。

根據(jù)本發(fā)明的表單驗證系統(tǒng)，提示框的主題配置包括輸入的提示和如果輸入不合理的錯誤提示；自定義提示樣式的配置包括：將表單的提示樣式配置為懸浮框提示的方式。

本發(fā)明通過定義表單元素驗證規(guī)則，并將所述驗證規(guī)則與配置項DOM選擇器方式封裝到表單驗證插件中；進行表單驗證時調(diào)用對表單綁定的統(tǒng)一配置驗證的API和提交表單前的全局驗證的API，進行全局驗證時對需要驗證的表單元素進行一次遍歷，逐一根據(jù)所設(shè)置的屬性進行驗證。進行一個表單驗證基本只需要調(diào)用兩個API，即對表單綁定的統(tǒng)一配置驗證的API和提交表單前的全局驗證的API，驗證規(guī)則只需根據(jù)所指定的屬性名屬性值去設(shè)置即可，不用再去為實現(xiàn)驗證流程而寫大量的js代碼，如果有比較特殊的驗證要求時，比如需要進行自定義驗證函數(shù)的設(shè)置時，才需要寫一些特殊驗證流程的代碼。而且提示方式也已用css設(shè)置，并且顯示控制也在插件內(nèi)部進行封裝，省去了反復(fù)寫DOM操作的過程。所以達到了減少js代碼的目的。解決了表單驗證繁雜化，通過大量的代碼去實現(xiàn)驗證流程問題，使得很少的API調(diào)用就可以滿足表單驗證的需求。

附圖說明

圖1是本發(fā)明一種表單驗證系統(tǒng)的原理框圖；

圖2是本發(fā)明一種實施例中web前端進行表單驗證的驗證流程；

圖3是本發(fā)明一種表單驗證方法的流程圖。