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

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

需求、目的： 1、 在前臺網頁，使用js自動建立表單 2、 可以控制表單裡的控制元件型別，比如文字框、下拉列表框、線上編輯器等。 3、 可以獲取使用者輸入的資料，可以進行驗證 4、 可以進行排版 5、 修改資料時，可以把原有資料繫結到表單。 實現方式：

使用方式： 使用就很簡單了，因為俺比較懶，所以我做的東東，第一目標就是——用著省事。 1、 引用一堆js，其中自己的只有兩個，一個建立控制元件，一個建立表單，還有一個驗證資料。

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

        var Nature = {};
        Nature.Controls = {};
        
        var form;   //表單控制元件
        
        function create() {
            $("#divForm").html("");
            //建立表單
            var formEvent = {
                divID: "divForm",
                callback: formCallback   //回撥函式
            };
            form = new Nature.Controls.Form(formEvent);
            form.create();

            $("#divButton").show();

        }
        
        function formCallback(formState) {
            switch (formState) {
            case 401:
                //檢視
                 
                break;
            case 402:
                //新增
                 
                break;
            case 403:
            case 408:
                //修改
              
                break;

            }
            
        }

        //獲取使用者輸入的資訊
        function getValue() {
            //驗證資料
            var re = checkData();

            if (!re) {
                return;
            }
            
            //獲取使用者輸入的資訊，json格式，然後可以ajax提交到資料庫
            var value = form.getValue("dataForm");
           
            //下面僅在演示時用，顯示使用者輸入了啥。
            var meta = eval("(" + $("#json").val() + ")");
            var controlInfo = meta.controlInfo;
            
            var re = "";
            for (var key in value) {
                var id = key.substring(1, key.length);
                re += controlInfo[id].ColName + "：   t" + value[key] + "n";
            }

            $("#msg").val(re);
        }

        function checkData() {
            //自帶的驗證功能。
            var re = CheckForm();

            if (re == true) {
                //驗證通過，檢視是否有自定義的js檔案的驗證
                if (typeof (cuscheck) != "undefined") {
                    //有自定義的驗證，執行
                    re = cuscheck();
                }
            }
            return re;
        }
 

問與答： 問：為啥重複製造輪子？ 答：搜尋了一下js表單控制元件，沒有發現特出名的。當然了肯定有做好的，只是我沒有發現。再有也不是完全自己寫的，有很多第三方現成的js拿來用的，比如my97。 問：寫這個json也太複雜了，還不如自己做個表單方便。 答：這個json確實挺複雜的，但是他不是手動寫出來的，而是自動生成的。原理類似於程式碼生成器。所以用起來還是挺方便的。 問：一個頁面能放幾個表單控制元件？ 答：大於等於一個。因為是new出來的，所以每個表單控制元件都可以互補干擾。只要屬性沒有設定錯誤就可以區分開。

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

問：json的結構到底是啥樣的？ 答：這個可以看線上演示，還可以修改值來看看變化。

附：第三方js 1、 jQuery。這個就不多說了。 2、 my97。選擇日期的，很好很強大 3、 kindereditor。選擇他是因為可以直接在頁面裡使用。因為是純js的表單控制元件，所以伺服器控制元件形式的線上編輯器是不好用了。 4、 資料驗證。這個好像有很多已經很成熟的了，只是一直沒時間研究。目前用的是一個比較古老的js指令碼，出處已經不記得了。

​

線上演示：

js版的表單控制元件 ：http://www.naturefw.com/demo/jsform.htm  (下面是一個iframe。好像有快取。)

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