利用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++;
}
}
}
});
}