【分享】 純 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風格。看個人喜好了。

        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。好像有緩存。)

 

 

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