我们在做增删改查的时候，必可避免的要做表单，那么表单是怎么弄出来的呢？拖拽控件、手写、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,增改查,re,json,var,表单 来源： https://blog.51cto.com/u_15179455/2729805
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。