纯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风格。看个人喜好了。
varNature={};Nature.Controls={};varform;//表单控件functioncreate(){$("#divForm").html("");//创建表单varformEvent={divID:"divForm",callback:formCallback//回调函数};form=newNature.Controls.Form(formEvent);form.create();$("#divButton").show();}functionformCallback(formState){switch(formState){case401://查看break;case402://添加break;case403:case408://修改break;}}//获取用户输入的信息functiongetValue(){//验证数据varre=checkData();if(!re){return;}//获取用户输入的信息,json格式,然后可以ajax提交到数据库varvalue=form.getValue("dataForm");//下面仅在演示时用,显示用户输入了啥。varmeta=eval("("+$("#json").val()+")");varcontrolInfo=meta.controlInfo;varre="";for(varkeyinvalue){varid=key.substring(1,key.length);re+=controlInfo[id].ColName+":\t"+value[key]+"\n";}$("#msg").val(re);}functioncheckData(){//自带的验证功能。varre=CheckForm();if(re==true){//验证通过,查看是否有自定义的js文件的验证if(typeof(cuscheck)!="undefined"){//有自定义的验证,执行re=cuscheck();}}returnre;}
问与答:
问:为啥重复制造轮子?
答:搜索了一下js表单控件,没有发现特出名的。当然了肯定有做好的,只是我没有发现。再有也不是完全自己写的,有很多第三方现成的js拿来用的,比如my97。
问:写这个json也太复杂了,还不如自己做个表单方便。
答:这个json确实挺复杂的,但是他不是手动写出来的,而是自动生成的。原理类似于代码生成器。所以用起来还是挺方便的。
问:一个页面能放几个表单控件?
答:大于等于一个。因为是new出来的,所以每个表单控件都可以互补干扰。只要属性没有设置错误就可以区分开。
问:还有其他的功能吗?
答:当然还有其他的功能,比如设置文本框只读(readonly),设置默认值,设置帮助信息,表单布局等,这些都可以通过修改json的属性值来实现。
问:json的结构到底是啥样的?
答:这个可以看在线演示,还可以修改值来看看变化。
附:第三方js
1、jQuery。这个就不多说了。
2、my97。选择日期的,很好很强大
3、kindereditor。选择他是因为可以直接在页面里使用。因为是纯js的表单控件,所以服务器控件形式的在线编辑器是不好用了。
4、数据验证。这个好像有很多已经很成熟的了,只是一直没时间研究。目前用的是一个比较古老的js脚本,出处已经不记得了。<wbr></wbr>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值