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>
分享到:
相关推荐
JS表单控件是JavaScript技术在网页交互设计中的具体应用,主要用于提升用户体验,提供美观、功能丰富的输入界面。这些控件通常包括各种输入框、下拉菜单、复选框、单选按钮、日期选择器、滑块、进度条等,它们不仅有...
首先,纯JS日期控件意味着它完全依赖于JavaScript,不依赖于任何外部库如jQuery或其他框架。这使得它具有轻量级、快速加载的优点,同时对开发者来说,理解和自定义代码也更为直接。 在JavaScript中,处理日期和时间...
本教程将详细讲解一个基于纯JavaScript实现的日期控件,其特点在于使用简单,无需依赖任何外部库。 1. **纯JavaScript实现** 这个日期控件完全由JavaScript编写,不依赖jQuery或其他JavaScript框架,这使得它在...
纯JavaScript编写的日期控件则不依赖任何外部库,如jQuery或Bootstrap,因此具有轻量级、自包含和可定制性强的特点。下面将详细讨论纯JavaScript实现日期控件的关键知识点。 1. **HTML结构**: 创建日期输入的基础...
Javascript 表单控件实例讲解 在本文中,我们将详细介绍了 javascript 表单控件实例的使用方法和实现原理,主要包括遍历表单的全部控件、通过控件名访问特定的控件、猎取表单内文本框的个数、修改表单的提交方法等...
总的来说,"100行超适用纯js验证控件支持自定义UI扩展"是一个实用的前端开发工具,可以帮助开发者快速构建健壮且用户体验良好的表单验证功能。通过深入研究和实践,你可以将这个控件灵活地应用到各种项目中,提升...
本话题主要探讨了三个关键知识点:JavaScript表单验证、JavaScript日期控件以及JavaScript新闻编辑器控件。 首先,JavaScript表单验证是确保用户输入数据正确性和完整性的关键步骤。在Web应用中,用户输入的数据...
综上所述,这个资源提供了一套完整的解决方案,让开发者能够用纯JavaScript和CSS自定义表单控件,从而提高用户界面的美感和交互性。对于想要提升其网站或应用注册表单体验的前端开发者来说,这是一个非常有价值的...
主要用例子说明extjs4的form表单的运用,其中有表单属性说明,表单控件运用说明如: title:'表单', //表单标题 bodyStyle:'padding:5 5 5 5', //表单边距 height:120, //表单高度 width:200, //表单宽度 ...
它通过CSS和JavaScript来实现这些改变,使表单控件看起来更加现代化,提高网站的整体设计感。在ASP.NET环境中,这样的美化对于提供用户友好的界面特别有用,因为ASP.NET的默认控件样式往往较为朴素。 使用jQuery...
本文将深入探讨"微信小程序表单控件【100%纯】"这一主题,帮助开发者更高效地处理表单相关任务。 首先,我们来看看提供的文件列表: 1. `calendar.js` 和 `calendar-converter.js`:这两个文件可能是日历组件的核心...
JavaScript日历控件是网页开发中常用的一种交互元素,它允许用户在网页上方便地选择日期,常用于表单输入、事件安排或者时间相关的功能。本文将深入探讨JavaScript日历控件的实现原理、常见库及其应用。 1. **基本...
这篇文档将深入探讨JavaScript中几种常用的表单验证控件和方法。 一、基本的HTML5验证 HTML5引入了内置的表单验证属性,如`required`、`pattern`、`min`、`max`等,使得验证变得更加简单。例如: ```html ``` ...
标题中的“一个简单的纯JS时间控件(非jQuery插件)”表明我们将探讨一个JavaScript实现的时间选择器,它不依赖于jQuery库。这样的控件在Web开发中非常常见,用于帮助用户方便地选择时间,常见于表单或者事件预约等...
JavaScript(JS)日历控件是网页开发中常用的一种组件,用于展示日期选择功能,通常在表单中作为输入辅助工具出现。它们可以提供用户友好的界面,方便用户选择日期,而无需手动输入。以下是对JS日历控件的一些详细...
"支持Firefox和IE浏览器的纯js日历控件"是一个旨在兼容两种主流浏览器(Firefox和Internet Explorer)的JavaScript库,其设计灵感来源于AJAX自带的日历控件。在AJAX技术中,日历控件通常通过异步交互提供无刷新的...
Validator v1.05是针对HTML表单的验证控件,它包含了多种内置的验证规则,可以帮助开发者轻松地为表单字段添加验证逻辑。这个库的使用可以极大地简化代码,提升开发效率,并且提供一致的用户体验。 1. **基本概念**...
JavaScript是实现自定义表单控件动态行为的关键。通过事件监听、数据绑定和DOM操作,开发者可以控制控件的行为,如验证用户输入、处理用户交互、更新视图状态等。现代框架如React、Vue或Angular提供了更高级的数据...
本文将深入探讨两个优秀的纯JavaScript日历控件源代码,它们能实现各种风格的日历,并且能够与ASPX网页无缝集成。 首先,纯JavaScript日历控件的优势在于它们不依赖于特定的服务器端技术,如ASP.NET,而是完全基于...
WebJS控件,也称为JavaScript控件或Web前端控件,主要用于构建动态、交互式的Web页面。这些控件是用JavaScript语言编写的,可以在用户的浏览器上运行,无需服务器端支持。WebJS控件的优势在于它们可以提供丰富的用户...