json

利用JSON+JQ动态生成表单，可以自动验证，有不足之处望大家指点。

(2011-08-09 12:54:24)

转载▼

利用JSON+JQ动态生成表单，可以自动验证，有不足之处望大家指点。

下面是HTML代码（为了更直观我加了一个生成后的格式生成格式）：

<div class="form" ID ="Account_Form" >

   <dl>

            <dt>

                <label>游戏账号： </label>

                <em>*</em></dt>

            <dd>

                <input type="text" name="js_cp_2234" id="gameAccount"    class="text" maxlength="30"value=""/><span class="right_tips" id="spn_account">请输入游戏账号</span></dd>

          </dl>

</div>

属性解释（DB - TABLE）：

STRUCT_ID：自增长的主键

TYPE：输入类型（0文本框，1下拉框，4密码框）

CAPTION：标题内容

GAMEID：游戏ID（与游戏表相关联的外键）

PROMPT：提示信息

VERIFICATION_MODE：验证模式

ISNULL：是否必填(0,为空,1必填)

SELECTVALUE：下拉框VALUE，以英文逗号隔开

好了，废话不多说，上代码，下面就靠自己的理解吧，可以随意变化。目前只生成文本框和下拉框。

varJsonData = null;

$(function () {

    $.ajax({

        type: "GET",

        url: "../TradingDirectory/ashx/AjaxHandler/AccountHandler.ashx",

        data: { _Gameid: checkUrl_code(theRequest["gameid"].toString(), false) },

        success: function (JSON) {

            var HtmlStr = "";

            ///将JSON字符串转换为JSON对象

            JsonData = eval_r(‘(‘ + JSON + ‘)‘)

            if (JsonData != "") {

                ///加载HTML表单

                $.each(JsonData, function (index, item) {

                    ///输出表单（下拉框）

                    if (item.TYPE == 1) {

                        HtmlStr += "<dl><dt><label>" + item.CAPTION + "：</label>";

                        ///根据JSON对象的ISNULL数值判断是否需要验证

                        if ($.trim(item.ISNULL.toString()) == ‘1‘) {

                            HtmlStr += "<em>*</em>";

                            HtmlStr += "</dt><dd><select name=‘‘ id=‘SelectInput_" + item.STRUCT_ID + "‘ onblur=‘isCheckInput(this," + item.STRUCT_ID + "," + item.TYPE + ")‘><option value=0>请选择</option>";

                        } else {

                            HtmlStr += "</dt><dd><select name=‘‘ id=‘SelectInput_" + item.STRUCT_ID + "‘><option value=0>请选择</option>";

                        }

                        var strArry = item.SELECTVALUE.toString().split(",");

                        for (var i = 0; i < strArry.length; i++) {

                            HtmlStr += "<option value=" + parseInt(i + 1) + ">" + strArry[i].toString() + "</option>";

                        }

                        HtmlStr += "</select>";

                        HtmlStr += "<span class=‘right_tips‘ id=‘spn_Select_" + item.STRUCT_ID + "‘> " + item.PROMPT + " </span></dt></dl>";

                    }

                    ///输出表单（文本框/密码文本框）

                    if (item.TYPE == 0 || item.TYPE == 4) {

                        ///声明文本框类型（默认为TEXT）

                        var TxtType = "text";

                        if (item.TYPE == 4) {

                            TxtType = "password";

                        }

                        HtmlStr += "<dl><dt><label>" + item.CAPTION + "：</label>";

                        ///根据JSON对象的ISNULL数值判断是否需要验证

                        if ($.trim(item.ISNULL.toString()) == ‘1‘) {

                            HtmlStr += "<em>*</em></dt><dd><input type=‘" + TxtType + "‘ name=‘‘ id=‘AccountInput_" + item.STRUCT_ID + "‘  onblur=‘isCheckInput(this," + item.STRUCT_ID + "," + item.TYPE + ")‘ class=‘text‘ maxlength=‘30‘ value=‘‘/>";

                        } else {

                            HtmlStr += "</dt><dd><input type=‘" + TxtType + "‘ name=‘‘ id=‘AccountInput_" + item.STRUCT_ID + "‘  class=‘text‘ maxlength=‘30‘ value=‘‘/>";

                        }

                        HtmlStr += "<span class=‘right_tips‘ id=‘spn_Account_" + item.STRUCT_ID + "‘> " + item.PROMPT + " </span></dt></dl>";

                    }

                });

                ///输出HTML表单

                $("#Account_Form").html(HtmlStr);

            }

            else {

                alert("加载表单出现异常！");

            }

        }

    });

});

functionisCheckInput(ObjinputStr, struct_Id,type) {

    var _checkResult = false;

    ///如果为文本框类型

    if (type == 0) {

        ///验证用户输入是否为空字符串

        if ($.trim(ObjinputStr.value) == "") {

            $("#spn_Account_" + struct_Id).attr("class", "error_tips");

            $.each(JsonData, function (index, item) {

                if (item.STRUCT_ID == struct_Id) {

                    $("#spn_Account_" + struct_Id).text(item.PROMPT);

                }

            })

            _checkResult = false;

        } else {

            $("#spn_Account_" + struct_Id).attr("class", "correct_tips");

            $("#spn_Account_" + struct_Id).text("");

            _checkResult = true;

        }

    }

    ///遍历表单JSON对象

    $.each(JsonData, function (index, item) {

        ///ID匹配，验证下拉框选中值

        if (item.STRUCT_ID == struct_Id) {

            var ddlist = document.getElementByIdx_x("SelectInput_" + struct_Id);

            var index = ddlist.selectedIndex;

            if (parseInt(ddlist.options[index].value) == 0) { ///为0则表示未选择

                $("#spn_Select_" + struct_Id).attr("class", "error_tips");

                $("#spn_Select_" + struct_Id).text(item.PROMPT);

                _checkResult = false;

            } else {

                $("#spn_Select_" + struct_Id).attr("class", "correct_tips");

                $("#spn_Select_" + struct_Id).text("");

                _checkResult = true;

            }

        }

        ///ID匹配，并且不是验证非空

        if (item.STRUCT_ID == struct_Id && item.VERIFICATION_MODE != "NOTNULL" && item.Type == type) {

            /// DB-WEB 的正则需转换为对象

            /// 原因：var patrn = new RegExp(patrn); javascript为弱类型，直接转换为对象，减少使用New

            var patrn = eval_r(item.VERIFICATION_MODE);

            if (!patrn.exec($.trim(ObjinputStr.value))) {

                $("#spn_Account_" + struct_Id).attr("class", "error_tips");

                $("#spn_Account_" + struct_Id).text(item.PROMPT);

                _checkResult = false;

            }

            else {

                $("#spn_Account_" + struct_Id).attr("class", "correct_tips");

                $("#spn_Account_" + struct_Id).text("");

                _checkResult = true;

            }

        }

    })

    return _checkResult;

}

functionsubFormByAccount() {

    ///声明提交验证结果

    var _resultRowCount = 0;

    ///遍历JSON自动生成表单对象，做提交验证

    $.each(JsonData, function (index, item) {

        if (item.ISNULL == 1) {

            ///文本框

            if (item.TYPE == 0) {

                if (!isCheckInput(document.getElementByIdx_x("AccountInput_" + item.STRUCT_ID), item.STRUCT_ID, item.TYPE)) {

                    _resultRowCount++;

                }

            }

            ///下拉框

            if (item.TYPE == 1) {

                if (!isCheckInput(document.getElementByIdx_x("SelectInput_" + item.STRUCT_ID), item.STRUCT_ID, item.TYPE)) {

                    _resultRowCount++;

                }

            }

        }

});

}