【分享】 純 js 表單控件 —— 讓 “增改查” 更輕松！

　　我們在做增删改查的時候，必可避免的要做表單，那麼表單是怎麼弄出來的呢？拖拽控件、手寫、js建立還是第三方控件（包括js版）？ 以前用伺服器控件寫了一套表單控件，用起來感覺也挺友善的，隻是效率太低，太占用伺服器的資源。想了好久也沒想到如何提高效率，最後改成了純js版的。

　　js屬于初學，代碼還很簡陋，大家見笑了。現在是越學習js，越是感到js的強大！

需求、目的：

1、 在前台網頁，使用js自動建立表單

2、 可以控制表單裡的控件類型，比如文本框、下拉清單框、線上編輯器等。

3、 可以擷取使用者輸入的資料，可以進行驗證

4、 可以進行排版

5、 修改資料時，可以把原有資料綁定到表單。

實作方式：

1、 js + json + 第三方js腳本、控件

2、 json對表單進行描述，比如标題、控件類型、控件大小、下拉清單框的item如何填充等。

3、 第三方腳本實作複雜功能，比如選擇日期、線上編輯、資料驗證等。

4、 Js腳本根據json的描述，建立表單（table形式），建立表單裡面的控件（比如文本框），然後對表單和控件進行修飾。

5、 提取使用者輸入的資料，然後進行驗證。然後可以用ajax的方式送出給伺服器。（送出部分表單控件不負責）。

思路：

1、 對表單進行歸納總結，抽象出來幾種情況。比如有多少種控件、表格有幾種表現形式。

其他的還沒想好怎麼表達出來。

使用方式：

使用就很簡單了，因為俺比較懶，是以我做的東東，第一目标就是——用着省事。

1、 引用一堆js，其中自己的隻有兩個，一個建立控件，一個建立表單，還有一個驗證資料。

2、 寫一段“引導”腳本。這個基本是c#風格，當然也可以寫成js風格。看個人喜好了。

問與答：

問：為啥重複制造輪子？

答：搜尋了一下js表單控件，沒有發現特出名的。當然了肯定有做好的，隻是我沒有發現。再有也不是完全自己寫的，有很多第三方現成的js拿來用的，比如my97。

問：寫這個json也太複雜了，還不如自己做個表單友善。

答：這個json确實挺複雜的，但是他不是手動寫出來的，而是自動生成的。原理類似于代碼生成器。是以用起來還是挺友善的。

問：一個頁面能放幾個表單控件？

答：大于等于一個。因為是new出來的，是以每個表單控件都可以互補幹擾。隻要屬性沒有設定錯誤就可以區分開。

問：還有其他的功能嗎？

答：當然還有其他的功能，比如設定文本框 隻讀（readonly），設定預設值，設定幫助資訊，表單布局等，這些都可以通過修改json的屬性值來實作。

問：json的結構到底是啥樣的？

答：這個可以看線上示範，還可以修改值來看看變化。

附：第三方js

1、 jQuery。這個就不多說了。

2、 my97。選擇日期的，很好很強大

3、 kindereditor。選擇他是因為可以直接在頁面裡使用。因為是純js的表單控件，是以伺服器控件形式的線上編輯器是不好用了。

4、 資料驗證。這個好像有很多已經很成熟的了，隻是一直沒時間研究。目前用的是一個比較古老的js腳本，出處已經不記得了。

​

線上示範：

不知道大家是怎麼處理表單的，有興趣的話，歡迎一起聊聊！