一種實(shí)現(xiàn)js通用表單驗(yàn)證的方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及軟件開(kāi)發(fā)技術(shù)領(lǐng)域，具體涉及一種實(shí)現(xiàn)js通用表單驗(yàn)證的方法。
【背景技術(shù)】
[0002]目前的WEB程序功能越來(lái)越復(fù)雜，程序頁(yè)面眾多；而且每個(gè)頁(yè)面都有自己不同的業(yè)務(wù)邏輯，數(shù)據(jù)格式要求各有不同。同時(shí)為了提高用戶體驗(yàn)度和減少程序BUG，頁(yè)面表單提交前的數(shù)據(jù)校驗(yàn)又必不可少；所以通常會(huì)一個(gè)表單對(duì)應(yīng)一個(gè)表單驗(yàn)證函數(shù)。這樣一來(lái)，前臺(tái)表單驗(yàn)證就成了一個(gè)必須要做又十分繁瑣的事情。

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

[0003]本發(fā)明解決的技術(shù)問(wèn)題在于提供一種通用的html表單驗(yàn)證的方法；有效提升校驗(yàn)的效率。
[0004]本發(fā)明解決上述技術(shù)問(wèn)題的方案是:
[0005]利用html表單元素?cái)U(kuò)展屬性，擴(kuò)展表單元素的屬性，綁定數(shù)據(jù)校驗(yàn)規(guī)則和錯(cuò)誤提示，通過(guò)共用的JS函數(shù)完成不同的表單前端數(shù)據(jù)效驗(yàn)。
[0006]所述的方法具體包括以下步驟:
[0007]第一步，按照正常的方式新增html表單元素；
[0008]第二步，給需要校驗(yàn)的表單元素空間加入擴(kuò)展屬性checkType和mess，根據(jù)實(shí)際數(shù)據(jù)格式要求，將驗(yàn)證規(guī)則標(biāo)識(shí)寫(xiě)入checkType屬性，將錯(cuò)誤提示寫(xiě)入mess屬性；
[0009]第三步，編寫(xiě)一個(gè)JS校驗(yàn)函數(shù)，定義校驗(yàn)規(guī)則類(lèi)型；
[0010]第四步，調(diào)用校驗(yàn)函數(shù)，遍歷表單元素控件，判斷checkType屬性中的值，對(duì)表單進(jìn)行規(guī)則校驗(yàn)，全部通過(guò)校驗(yàn)才認(rèn)為表單數(shù)據(jù)驗(yàn)證有效。
[0011]所述的方法具體包括以下步驟:
[0012]第一步，定義一個(gè)表單元素〈input〉標(biāo)簽，
[0013]第二步，給〈input〉標(biāo)簽添加checkType屬性和mess屬性，根據(jù)實(shí)際數(shù)據(jù)格式要求，將驗(yàn)證規(guī)則標(biāo)識(shí)寫(xiě)入checkType屬性，將錯(cuò)誤提示寫(xiě)入mess屬性；
[0014]第三步，編寫(xiě)一個(gè)JS驗(yàn)證函數(shù)，用參數(shù)接受需要效驗(yàn)的表單或者某個(gè)區(qū)塊的ID，在函數(shù)內(nèi)部遍歷表單或者區(qū)塊內(nèi)的所有表單元素，抓取控件的checkType屬性來(lái)校驗(yàn)輸入的合法性，對(duì)不符合規(guī)則的按mess屬性中的值進(jìn)行提醒，未配置mess屬性的按照預(yù)設(shè)提醒處理；
[0015]第四步，在表單提交前調(diào)用此統(tǒng)一驗(yàn)證函數(shù)，將需要驗(yàn)證的表單ID作為參數(shù)傳給函數(shù)；驗(yàn)證失敗時(shí)函數(shù)將給出校驗(yàn)提示，并返回false ;所有表單元素通過(guò)驗(yàn)證才返回true ο
[0016]本發(fā)明的有益效果是:將表單驗(yàn)證函數(shù)和表單欄位數(shù)據(jù)格式規(guī)則分離，數(shù)據(jù)格式驗(yàn)證規(guī)則和錯(cuò)誤提醒通過(guò)擴(kuò)展屬性綁定到表單元素上，驗(yàn)證函數(shù)提供統(tǒng)一的表單元素迭代，抓取驗(yàn)收規(guī)則和錯(cuò)誤提示即可，從而降低代碼耦合，提高代碼共用，簡(jiǎn)化前臺(tái)頁(yè)面開(kāi)發(fā)， 提升Π工程師的工作效率。
【附圖說(shuō)明】
[0017]下面結(jié)合附圖對(duì)本發(fā)明進(jìn)一步說(shuō)明:
[0018]圖1是本發(fā)明流程圖。
【具體實(shí)施方式】
[0019]見(jiàn)附圖所示，本發(fā)明利用html表單元素?cái)U(kuò)展屬性，擴(kuò)展表單元素的屬性，綁定數(shù)據(jù)校驗(yàn)規(guī)則和錯(cuò)誤提示，通過(guò)共用的JS函數(shù)完成不同的表單前端數(shù)據(jù)效驗(yàn)。
[0020]所述的方法具體包括以下步驟:
[0021]第一步，按照正常的方式新增html表單元素；
[0022]第二步，給需要校驗(yàn)的表單元素空間加入擴(kuò)展屬性checkType和mess，根據(jù)實(shí)際數(shù)據(jù)格式要求，將驗(yàn)證規(guī)則標(biāo)識(shí)寫(xiě)入checkType屬性，將錯(cuò)誤提示寫(xiě)入mess屬性；
[0023]第三步，編寫(xiě)一個(gè)JS校驗(yàn)函數(shù)，定義校驗(yàn)規(guī)則類(lèi)型；
[0024]第四步，調(diào)用校驗(yàn)函數(shù)，遍歷表單元素控件，判斷checkType屬性中的值，對(duì)表單進(jìn)行規(guī)則校驗(yàn)，全部通過(guò)校驗(yàn)才認(rèn)為表單數(shù)據(jù)驗(yàn)證有效。
[0025]下面具體以HTML頁(yè)面表單開(kāi)發(fā)為例，講述該方法的具體操作。
[0026]在開(kāi)發(fā)HTML頁(yè)面表單過(guò)程中有以下操作:
[0027]第一步、定義一個(gè)表單元素如〈input〉標(biāo)簽。
[0028]第二步、給〈input〉標(biāo)簽添加checkType屬性和mess屬性，根據(jù)實(shí)際數(shù)據(jù)格式要求，將驗(yàn)證規(guī)則標(biāo)識(shí)寫(xiě)入checkType屬性，將錯(cuò)誤提示寫(xiě)入mess屬性。
[0029]第三步、編寫(xiě)一個(gè)JS驗(yàn)證函數(shù)(該函數(shù)不與具體的表單關(guān)聯(lián)，只需要編寫(xiě)一個(gè)，所有頁(yè)面共用即可)，用參數(shù)接受需要效驗(yàn)的表單或者某個(gè)區(qū)塊的ID，在函數(shù)內(nèi)部遍歷表單或者區(qū)塊內(nèi)的所有表單元素，抓取控件的checkType屬性來(lái)校驗(yàn)輸入的合法性，對(duì)不符合規(guī)則的按mess屬性中的值進(jìn)行提醒，未配置mess屬性的按照預(yù)設(shè)提醒處理即可。
[0030]第四步、在表單提交前調(diào)用此統(tǒng)一驗(yàn)證函數(shù)，將需要驗(yàn)證的表單ID作為參數(shù)傳給函數(shù)即可。驗(yàn)證失敗時(shí)函數(shù)將給出校驗(yàn)提示，并返回false，所有表單元素通過(guò)驗(yàn)證才返回true ο
【主權(quán)項(xiàng)】
1.一種實(shí)現(xiàn)js通用表單驗(yàn)證的方法，其特征在于:利用html表單元素?cái)U(kuò)展屬性，擴(kuò)展表單元素的屬性，綁定數(shù)據(jù)校驗(yàn)規(guī)則和錯(cuò)誤提示，通過(guò)共用的JS函數(shù)完成不同的表單前端數(shù)據(jù)效驗(yàn)。2.根據(jù)權(quán)利要求1所述的實(shí)現(xiàn)js通用表單驗(yàn)證的方法，其特征在于:所述的方法具體包括以下步驟: 第一步，按照正常的方式新增html表單元素； 第二步，給需要校驗(yàn)的表單元素空間加入擴(kuò)展屬性checkType和mess，根據(jù)實(shí)際數(shù)據(jù)格式要求，將驗(yàn)證規(guī)則標(biāo)識(shí)寫(xiě)入checkType屬性，將錯(cuò)誤提示寫(xiě)入mess屬性； 第三步，編寫(xiě)一個(gè)JS校驗(yàn)函數(shù)，定義校驗(yàn)規(guī)則類(lèi)型； 第四步，調(diào)用校驗(yàn)函數(shù)，遍歷表單元素控件，判斷checkType屬性中的值，對(duì)表單進(jìn)行規(guī)則校驗(yàn)，全部通過(guò)校驗(yàn)才認(rèn)為表單數(shù)據(jù)驗(yàn)證有效。3.根據(jù)權(quán)利要求1或2所述的實(shí)現(xiàn)js通用表單驗(yàn)證的方法，其特征在于:所述的方法具體包括以下步驟: 第一步，定義一個(gè)表單元素〈input〉標(biāo)簽， 第二步，給〈input〉標(biāo)簽添加checkType屬性和mess屬性，根據(jù)實(shí)際數(shù)據(jù)格式要求，將驗(yàn)證規(guī)則標(biāo)識(shí)寫(xiě)入checkType屬性，將錯(cuò)誤提示寫(xiě)入mess屬性； 第三步，編寫(xiě)一個(gè)JS驗(yàn)證函數(shù)，用參數(shù)接受需要效驗(yàn)的表單或者某個(gè)區(qū)塊的ID，在函數(shù)內(nèi)部遍歷表單或者區(qū)塊內(nèi)的所有表單元素，抓取控件的checkType屬性來(lái)校驗(yàn)輸入的合法性，對(duì)不符合規(guī)則的按mess屬性中的值進(jìn)行提醒，未配置mess屬性的按照預(yù)設(shè)提醒處理； 第四步，在表單提交前調(diào)用此統(tǒng)一驗(yàn)證函數(shù)，將需要驗(yàn)證的表單ID作為參數(shù)傳給函數(shù)；驗(yàn)證失敗時(shí)函數(shù)將給出校驗(yàn)提示，并返回false ;所有表單元素通過(guò)驗(yàn)證才返回true。
【專(zhuān)利摘要】本發(fā)明涉及軟件開(kāi)發(fā)技術(shù)領(lǐng)域，具體涉及一種實(shí)現(xiàn)js通用表單驗(yàn)證的方法。本發(fā)明利用html表單元素?cái)U(kuò)展屬性，將表單元素對(duì)數(shù)據(jù)的格式要求規(guī)則和錯(cuò)誤提示綁定到控件自身屬性上，然后寫(xiě)一個(gè)通用函數(shù)去遍歷html控件，根據(jù)控件的驗(yàn)收規(guī)則進(jìn)行效驗(yàn)，對(duì)于不符合要求的輸入數(shù)據(jù)進(jìn)行提醒，由此提高前臺(tái)表單數(shù)據(jù)效驗(yàn)的通用性和靈活性。本方法簡(jiǎn)單易用，十分有利于降低前臺(tái)UI工程師的工作量，加快開(kāi)發(fā)進(jìn)度；可以用于前臺(tái)頁(yè)面開(kāi)發(fā)。
【IPC分類(lèi)】G06F9/44
【公開(kāi)號(hào)】CN104899027
【申請(qǐng)?zhí)枴緾N201510267469
【發(fā)明人】文新, 徐震宇, 孫傲冰, 季統(tǒng)凱
【申請(qǐng)人】國(guó)云科技股份有限公司
【公開(kāi)日】2015年9月9日
【申請(qǐng)日】2015年5月22日