手把手教你自己寫乙個js表單驗證框架

2022-02-05 11:24:58 字數 2415 閱讀 1086

手把手教你自己寫乙個js表單驗證框架 **之

其實我自己也就能簡單用用js而已,但是呢,相對很多初學者來說多懂了點know how所以鬥

膽孟浪一下,將一些所得記錄下來,以供更多的初學者能夠知道乙個東西的實現過程,省去

在原始碼裡摸索的過程。

在表單程式中,在頁面上需要很多的js**來驗證表單,每乙個field是否必須填寫,是否

只能是數字,是否需要ajax到遠端驗證,blablabla。

如果乙個乙個單獨寫勢必非常的繁瑣,所以我們的第乙個目標就是構建乙個類似dsl的東西,

用表述的語句而非控制語句來實現驗證。

其次乙個個單獨寫的話還有乙個問題就是必須全部驗證通過才能提交,但是單獨驗證會因為

這個特徵而增加很多額外的控制**,且經常會驗證不全面。所以第二個目標就是能夠全面

的整合整個驗證的過程。

最後不能是乙個無法擴充套件的一切寫死的實現,必要的擴充套件性還是要的。

首先,我們需要乙個能夠描述對欄位驗證的類

**1 function field(params)

8關於驗證器物件我們在後面來討論,接下來我們擴充套件這個類,加入validate方法

**1 field.prototype.validate=function()

10     }

11 }

再加入乙個獲取字段值的方法:

1 //獲取字段值的方法

2 field.prototype.data=function()

設定驗證器**函式的方法set_callback如下:

**1 field.prototype.set_callback=function(val)

7     val.on_error=function()

11 }

接下來我們就來看看驗證器,驗證器是真正執行驗證過程的類,根據一般的驗證過程,我們

可以將其分類成,長度驗證(包括必填驗證),正規表示式驗證,自定義函式驗證,ajax遠

程驗證這幾種,所以我們定義這幾種驗證器類,ajax遠端驗證為了方便引用了jquery,其他

部分也有用到:

**1

2 //長度驗證的驗證器類

3 function len_val(min_l,max_l,tip)

10 len_val.prototype.validate=function(fd)

15 this.on_suc();

16 return true;

17 }

18 //正規表示式驗證器

19 function exp_val(expresion,tip)

25 exp_val.prototype.validate=function(fd)

30 if(this.exps.test(fd))else

37 }

38 //遠端驗證器

39 function remote_val(url,tip)

45 remote_val.prototype.validate=function(fd),

48 function(data)else

55         },"json"

56     );

57 return false;

58 }

59 //自定義函式驗證器

60 function man_val(tip,func)

66 man_val.prototype.validate=function(fd)else

72 }

最後我們用乙個userform的類來做乙個入口,在構造的時候傳入field物件的列表,並且將

每乙個控制項的onblur事件繫結到validate的包裝器上

**1 function userform(items)

9         }

10     );

11 }

這裡提到了乙個userform的validate方法,如下:

**1 //驗證所有的字段

2 userform.prototype.validate=function()

8     }

9 return true;                         //乙個都沒錯就返回成功執行提交

10 }

最後用乙個例子來看看怎麼用:

**1

238

39 40

41 42

要注意的地方就是在迴圈中使用閉包會茶几,必須用乙個方法來**一下,呵呵

希望對初學js但是還不知道該做點什麼怎麼做的朋友能有所幫助

手把手教你寫乙個ORM(二)

昨夜一夜未睡,本來以為下班回家能倒下就打呼嚕的,結果吃了晚飯後反而清醒起來了,於是決定把本打算明天寫的部分提前。半夜三更不睡覺幹嘛?出來假扮王祖賢阿 根據前面的需求,我們發現需要將配置檔案抽象出乙個元件出來,快取需要乙個單獨的元件,為了適應不同的資料庫需要做成乙個外掛程式架構的,為不同資料庫插入不同...

手把手教你寫乙個搶講座的指令碼

利用js指令碼來幫你搶到乙個表單提交型別的各種活動,這裡以講座為例 註冊乙個麥克表單 建立乙個自己的表單 首先自己提交乙個表單,同時開啟f12中的network,看一看自己提交的東西包含了什麼。比如這裡我們發現了d這個物件 之後我們嘗試著按照它這種格式,自己提交一下,看看能不能成功。這裡我選用了re...

手把手教你製作乙個Windows服務

也許你認為開發windows服務是件非常困難的事件,需要了解非常多的作業系統原理以及精通windows的各種api。其實沒有這麼誇張,windows服務就像乙個框架一樣,至於你往裡面加些什麼完全在與你自己。好吧,現在我們就往裡面加 helloworld 吧。開學習製作windows服務之前我們先大概...