JavaScript表单生成器

最新推荐文章于 2024-04-26 16:47:03 发布
最新推荐文章于 2024-04-26 16:47:03 发布
阅读量1.9k 收藏
点赞数
分类专栏： web前端 文章标签： javascript ecmascript
原文链接：https://www.codeproject.com/Articles/1029517/A-JavaScript-Form-Generator
版权

目录

介绍

使用程序

表格展示

数据控制

处理控件和事件

提交表格时

在新页面中提交

高级使用

可移动形式

注意

介绍

这篇文章是关于一个用于创建和管理表单的JavaScript对象(FormGen) ；FormGen具有足够的通用性，可以创建广泛的表单，从简单的消息框到具有文本字段、组合、单选按钮等的相对复杂的表单；此外，它只是对软件包的非正式介绍，并不详尽。

该软件包正在随着我的使用而产生的功能而发展；这不仅会影响源代码，还会影响文档、代码清理和提高可靠性。简要地说，最后的一些实现是：

  • 在Event伪类型上添加了对字段和函数存在的控制。
  • 添加了包含已修改字段列表的字段fg_Changed。
  •  添加了允许通过文本字段上的输入键提交表单的伪事件输入。
  • 添加了类似于注释的IB（内联按钮）类型。
  • 添加了CE（注释错误）和 CS（注释分隔符）类型。
  • 为国际化添加了伪类型Dict[ionary]（见下文）。
  • 添加了创建可移动表单的可能性（请参阅使用文档）。

使用程序

表单生成器在formgen.js脚本中，其中包含对象函数formGen；这个函数可以被调用或用于创建一个新对象：

formGen(idContainer[,control_list])
fGenObject = new formGen(idContainer[,control_list])

其中idContainer是HTML标记的 id，它将承载生成的表单，并且control_list是控件列表，其中可能包含用于管理表单的其他信息（伪控件）；如果省略此参数，则formGen假定列表位于标签容器中。

如果idContainer省略 ，则使用id fg_PopUp和 class fg_PopUp创建可移动表单。

每个控件描述都以逗号分隔的属性列表为特征：Type、Field Name、 Field Label和LengthExtra：

  • Type是控件类型，这个无所谓。
  • Name是控件名称，大小写显着（一般变成控件的nameand id）。
  • Label是控件的标签。
  • Length是控件的长度。
  • Extra是用于向控件添加信息的额外字段（这取决于类型）。

每个描述都用分号分隔。

注意

标签和额外字段中可能出现的逗号、分号、等号和&符号必须分别由\x2C、\x3B、\x3D和\x26编码。

从0.2.12版本开始，属性可以包含在'或"中，以包含上述字符。

在控件中，有不同类型的文本控件、列表、按钮、滑块、单选按钮和复选框；该列表还可以包含一些伪控件（语义略有不同）：

  • Form用于告诉如何在提交时管理表单，其语法为：Form, name, caption, uri, function;
  • Defaults在控件上插入值；
  • Control用于在提交表单之前对字段进行一些检查；
  • Below以及After从默认位置、表单底部、控件下方或之后（右侧）移动按钮；
  • Get用于获取数据，对于填充表单或更新列表很有用。

formGen插入三个标准按钮按钮：Ok、Reset和Cancel，具体取决于表单中的控件，例如，如果只有一个组合按钮或单选按钮集，则不会出现任何按钮，因为项目上的选择会退出表单try： 

Form,frm,,echo.php;
CMB,Unit,Measure Unit,,,|=Linear,mm=millimeter,cm=centimeter,m=meter,
km=kilometer,|=Weight,g=gram,kg=kilogram,t=ton;

但是，我们可以放置自定义按钮或更改标题或使用图形按钮替换标准按钮（其名称为fg_Ok、fg_Cancel和fg_Reset）（try）。

...
function infoPSW(frm) {
	alert("Password from 6 to 12 characters.\nand at least one number and 
           one capital letter and one letter")
}
formGen('fg');
...
<div id=fg>
P,psw,Password,15,Insert password;
B,Info,?,25,infoPSW;
B,fg_Cancel,&#x2718,30,,Cancel form;
B,fg_Reset,&#x21B6,30,,Reset form;
B,fg_Ok,&#x270E,30,,Go!;
After,psw,Info;
Control,psw,required,pattern=(?\x3D.*\d)(?\x3D.*[A-Z])(?\x3D.*[a-z]).{6\x2C12};
</div>
...

请注意按钮标题使用Unicode字符，例如✎ (✎)。

表格展示

数据按照它们在参数列表中出现的顺序显示，除了在FormGen表单底部插入的标准按钮一起出现的自定义按钮；因此，可以在控件的右侧或下方插入自定义按钮和复选框（由Below和After伪控件）。

使用CSS样式，我们可以控制显示，因为表单是使用具有类名fg_Table的table标签显示的，按钮具有类名fg_Button或fg_Gbutton。每行的第一个td标签都有类名fg_Label。

数据控制

伪控制Control或Check允许对数据执行一些控制：

  • 大于或小于一个值
  • 正式正确的邮件地址
  • 非空字段
  • 匹配正则表达式

这些控制发生在以下情况：

  • 控件失去焦点
  • 用户输入一个数字字段
  • 表格已提交

在下面的示例中，在输入中检查了一个数字浮动字段，在失去焦点和提交表单时尝试 [3]

...
NF,Number,,12,Insert Floating number;
Control,Number,min=-200,max=200,pattern=^[-+]?\d{1\x2C3}(\.\d{1\x2c2})?$;

处理控件和事件

我们可以使用控件的ID(即控件的name)进入事件管理。此外，在按钮的额外字段中，我们可以设置一个函数，当单击按钮时将调用该函数，并带有表单本身的参数（请参见下面的片段）（try）。

...
Fgen = new formGen("fg")
$("Agree").addEventListener("click",function() 
{$('Start').disabled = !this.checked;},true);
$('Start').disabled = true;
...
<div id='fg'>
GB,Info,images/info.png,,infoPSW,Info;
CKB,Agree,Consent cookies?,,I agree;
B,Start;
</div>

提交表格时

数据按照伪类型Check的指示进行检查（如果存在），如果出现错误，则不提交表单，错误的字段以红色边框；它还产生了警报。

提交取决于参数URL和function伪类型Form：

  1. 仅有URL：响应替换源页面
  2. URL和function:function通过内置的Ajax模块从URL接收答案
  3. 仅有function:function以参数形式调用，显然它需要本地阐述

在新页面中提交

在上面的情况1)中，为了在新页面中显示，我们插入了一个自定义按钮，该按钮在额外字段中包含将处理提交的函数的名称：

...
Fgen = new formGen("result")
...
function myHandler(frm) {		                // the function receive the form	
	var aErrors = Fgen.check(frm);
	if (aErrors.length > 0) {alert("Errors:\n"+aErrors.join("\n"));return;}
	frm.encoding = "multipart/form-data";		// if there is a file to upload
	frm.target = "_blank";				        // in new window
	frm.submit();
}
...
Form,frm,Complete Control form,x.php;
B,Start,,,myHandler;
...

请注意，用户必须对字段进行任何检查，如果存在文件上传，则必须设置属性编码。

高级使用

伪类型Get可用于通过内部Ajax函数从INTERNET检索数据，以填充（或更改）组合框或列表上的值，或使用默认值填充表单，例如使用来自数据库的数据。

Get需要一个URI，即Internet站点上的脚本，该脚本提供数据，其结构必须具有CMB或L的额外字段中预期的语法，或者在默认情况下是伪类型DEFAULTS预期的结构（参见下面的示例）：

Form,frmg2,Form Generator 2,echo.php;
CMB,WidgetType,Widget Type;
CMB,Hellas,Greek letters;
List,Town;
B,fg_Ok,✎,40;
B,fg_Cancel,✘,40,,Cancel Form;
B,fg_Reset,↶,40,,Reset Form;
Get,*,getSample.php?Type=Defaults;
Get,WidgetType,getSample.php?Type=Type;
Get,Town,getSample.php?Type=Towns;
Get,Hellas,getSample.php?Type=Hellas;

这是处理请求的PHP脚本：

<?PHP
$type = $_REQUEST["Type"];
if ($type == "Type") {
	echo "|=Buttons,B=Button,R=Radio button,RV=Vertical Radio button,"
	."|=Lists,CMB=Combo box,L=List,"
	."|=Texts,C=Comment,F=File,H=Hidden field,N=Numeric,NS=Numeric signed,"
	."NF=Numeric with decimals,P=Password,T=Text,U=Unmodifiable text,"
	."|=Others,CKB=Check box,S=Slider";
}
if ($type == "Hellas") {echo "Alfa,Beta,Gamma,Delta";}
if ($type == "Towns") {echo "London,Paris,Rome,Turin,Zurich";}
if ($type == "Defaults") {echo "Town=Turin,Hellas=Alfa,WidgetType=F";}
?>

此外，伪类型GET已得到增强，添加了一个超时参数，以允许定期更新评论、文本和新控件类型Image：

表单,frm,,echo.php,receiveData;

C，时间，时钟；

T,wField,IT 引用, 200 ;

图像,图像,, 200 ;

GET,Time,getSample.php?Type=Time, 60000 ;

获取，wField，getITCite.php，10000；

获取，图像，getImage.php，11000；

可移动形式

在沙盒中有一个可移动形式（和国际化）的例子。

这是通过生成一个不指示创建标记或指示不存在标记的表单来实现的，因此FormGen生成一个带有fg_PopUp类的div标记，该表单必须具有form伪类型才能生成标题行。

此时，用户可以向标题添加一个类以显示移动光标，并且必须包含一些用于移动表单的JavaScript（SandBox包含脚本moveItem.js）。

Widget
List

 
Form,ft,Try Sand Box,echo.php,receive;
T,Text1,Text 1,,place holder;
RV,vRdb2,vRdb 2,,North,South,West,East;

JS

 
function movableForm(widgetList) {
	if($("fg_PopUp")) $("fg_PopUp").remove();
	Fgen = new formGen("",widgetList)
	var link = $("fg_PopUp")
	link.style.top = 0.5 * (window.innerHeight - link.offsetHeight);
	link.style.left = 0.5 * (window.innerWidth - link.offsetWidth);
	$("ftfg_Title").classList.add("fg_Movable")
//	$("ftfg_Title").className += " fg_Movable";	// old browsers?
	$("ftfg_Title").addEventListener("mousedown", dragStart.bind(null, event, "fg_PopUp"))
}

CSS

 
.fg_PopUp { 
   width: auto;
   height: auto;	
   position: absolute;
}
.fg_Movable {
   width: 100%;
   cursor: move;
}

 

注意

  1. 这是可以在我的网站上找到的一些表单生成器之一（用于Autoit、Powershell、Basic4Android） 。
  2. 某些功能需要HTML5（输入类型Data）。
  3. 有一些简单的样式：

<font size="2">
.fg_Button {font-size:10pt;width:70px;height:22px;cursor:pointer;margin:0px 3px;
    background:silver;line-height: 1.25;}
	fg_GButton {border:0;cursor:pointer;vertical-align:middle;padding:5px;}
	table {border: 1px solid #111;padding:3px}
	th {font: bold 9pt Arial;text-align: center;padding:5px;

https://www.codeproject.com/Articles/1029517/A-JavaScript-Form-Generator

 

寒冰屋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
azlan-form-builder:一个ReactJS表单生成器库
03-30
Azlan表单生成器 AFB是一个ReactJS Form Builder插件，可以轻松集成到任何react应用中。 它还支持表单元素的拖放更新。 安装 使用软件包管理器进行安装。 npm install azlan-form-builder 用法 import FormBuilder from "azlan-form-builder"; /// then use it as const [items, setItems] = useState([]); const formUpdate = (newItemsList) => { console.log(newItemsList); /// you can call an API to save form elements as soon as they are updated }; <FormBuilder onUpdate=
JavaScript实现的可视化表单设计器源码.zip
05-31
JavaScript实现的可视化表单设计器源码。实现的可视化表单设计器。基于Vue的可视化表单设计器，让表单开发简单而高效。 特性如下： 可视化配置页面 提供栅格布局，并采用flex实现对齐 一键预览配置的效果 一键生成配置json数据 一键生成代码，立即可运行 提供自定义组件满足用户自定义需求 提供远端数据接口，方便用户需要异步获取数据加载 提供功能强大的高级组件 支持表单验证 快速获取表单数据 国际化支持
推荐6个开源可视化表单生成器
小马甲
01-30 2912
表单设计器和表单渲染器。表单设计器负责提供直观的可视化界面，让用户能够方便地搭建表单，并生成对应的JSON配置文件。表单渲染器则负责读取这些JSON配置，并将其转换成实际可用的表单界面。本人每篇文章都是一字一句码出来，希望对大家有所帮助，多提提意见。
react-form-b​​uilder：React表单生成器
02-12
React形式生成器 使用JSON模式React表单生成器 安装 npm install --save @guidesmiths/react-form-builder 用法 import React , { Component } from ' react ' import MyComponent from ' react-form-builder ' import ' react-form-builder/dist/index.css ' class Example extends Component { render () { return < MyComponent> } } 贡献 npm install npm start 打开另一个标签并执行cd example npm install npm start 见localhost:3000 根src库
formeo:拖放表单生成器
05-31
福美欧 用于拖放表单创建的纯 JavaScript 模块。 特征 拖放编辑 具有多种选项的可扩展构建器 列/内联字段 自定义字段 预览模式 国际化支持 安装 新产品管理 npm install --save formeo 手动的 [removed][removed] 用法 要开始使用此模块构建表单，请在您的项目中包含formeo.min.js和formeo.min.css并调用： import { FormeoEditor , FormeoRenderer } from 'formeo' // Set up a form builder const editor = new FormeoEditor ( options ) // When you're r
vue-form-maker:Vue 表单生成器——动态生成表单组件
05-02
简介 Vue 动态生成表单组件，可以根据数据配置表单，使用的UI库是。 有问题或BUG欢迎提 表单组件 Input 输入框 Button 按钮 Radio 单选框 Checkbox 多选框 Icon 图标 Switch 开关 Select 选择器 Slider 滑块 DatePicker 日期选择器 TimePicker 时间选择器 Cascader 级联选择器 InputNumber 数字输入框 Rate 评分 Upload 上传 ColorPicker 颜色选择器 使用 在单文件组件中引用 npm i vue-form-maker import VueFormMaker from 'vue-form-maker' import ViewUI from 'view-design'; import 'view-design/dist/styles/iview.css'; // 如需使用城市
JavaScript:表单生成器
WHT869706733的博客
12-01 3893
表单属性有姓名、性别、爱好、地址、自我介绍。 <body> <form id="form"></form> <script> var elements = [ { tag: 'input', text: '姓名', attr: { type: 'text', name: 'user' },
基于vue的 表单设计器（拖拽生成表单）
热门推荐
weixin_43765747的博客
02-18 1万+
日常开发时想要快速构建节省时间或者功能需求需要拖拽生成表单，推荐使用以下表单设计器。 1.基于vue+elementui 的表单设计及代码生成器 Form Generator 码云仓库：form-generator: Element UI表单设计及代码生成器 演示地址：form-generator ...
form-create表单生成器简单使用
Black_Straight的博客
11-05 1114
form-create表单生成器简单使用
JavaScript中的复杂功能实现：一个动态表单生成器
geng1025的博客
01-18 960
我们将通过详细的注释和代码来解释整个过程，包括如何监听下拉列表的更改事件，如何根据用户的选择动态地创建和配置表单元素，以及如何将新生成的表单元素添加到页面中。当事件触发时，我们将根据用户的选择动态地创建和配置表单元素，并将它们添加到表单元素区域中。在上述代码中，我们首先获取了下拉列表和表单元素区域的引用，并定义了几个变量来存储用户的选择和表单元素的选项。当用户从下拉列表中选择一个表单元素类型时，我们将获取用户的选择，清除之前的表单元素，并创建新的表单元素。元素，用于显示生成的表单元素。
vue自定义表单生成器form-create使用详解
10-16
主要介绍了vue自定义表单生成器,可根据json参数动态生成表单,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
outperform:普通javascript中的表单生成器
05-27
跑赢大市Outperform是使用零依赖性的纯Java脚本编写的表单生成器。 它支持并增强了浏览器本机表单验证，并在与任何及所有Web框架集成时提供了跨页面重新加载的半填充表单的自动保留。要求它可以在任何Web浏览器环境...
FormBuilder:表单生成器练习
06-21
表单创建者使用上述文件，在 JavaScript 中创建一个表单构建器，它可以接受一个 JSON 对象，并将为文档生成语义 HTML。
表单生成器Supler.zip
07-16
Supler 可以帮你轻松实现用代码生成复杂的表单，包括 JavaScript 实现的客户端组件和 Scala 实现的服务器端组件。在线演示：https://supler.softwaremill.com/site/index.html 标签：Supler
vue快速入门（四十六）Router的安装与使用
最新发布
不起眼小菜菜的博客
04-26 471
步骤很详细，直接上教程……
vue2---修饰符
weixin_45503872的博客
04-24 1020
此时有一个问题，如果我们设置了系统修饰符，并不希望有其他的按键组合，比如我们设置ctrl修饰符，此时如果按住ctrl和其他键，然后再点击鼠标，此时也会触发事件监听，所以我需要使用其他的修饰符来设置精确匹配事件。此时People的data返回的是一个对象，不是一个地址，每一个实例拿到的都是个独立，个体的对象，互相不会数据冲突，这个就是vue组件data为什么是函数的原因。data是一个函数，返回的是一个对象，目的是为了让每个组件数据隔离，这个是JavaScript的原理，并不是vue去设计的。
vue 实现级联选择器功能
清音的博客
04-22 545
数组包含了级联选择器的数据源，其中每个对象表示一个选项，包括。组件来实现级联选择器功能,下面是一个示例代码，演示如何使用。组件初始化级联选择器，并设置默认值为单位。对象用于指定数据结构中的属性名，以便。上，可以在初始化时选中指定的值。使用 Element UI 的。中设置初始选中值为单位。组件正确地解析数据。
Redux 状态持久化之 redux-persist 使用示例
笔记、经验、日常分享
04-24 311
同vuex一样，redux中的状态会在刷新浏览器后状态又恢复到初始状态，有些数据想在浏览器刷新后仍然是在最新的状态，不会丢失，就需要借助一些插件实现。本文通过 redux-persist 插件来实现Redux状态的持久化。
layui代码生成器
10-16
Layui代码生成器是一款基于Layui前端框架的代码生成工具。Layui是一套使用简单、易于上手的前端UI框架，具有丰富的组件和强大的扩展能力。而Layui代码生成器则是为了更加方便快捷地生成符合Layui风格的代码而设计的工具。 使用Layui代码生成器，我们可以通过简单的配置和操作，快速生成常见的前端代码。它提供了多种代码生成选项，包括生成表单、表格、树等各种常见的页面元素。我们只需选择相应的生成选项，填写相关的字段和配置信息，点击生成按钮，即可生成对应的代码。 生成的代码包含了HTML、CSS和JavaScript部分，结构清晰，样式简洁。它遵循了Layui的设计规范和命名规范，充分发挥了Layui框架的特点和优势。生成的代码可以直接使用，也可根据需求进行进一步的扩展和修改。 通过Layui代码生成器，我们可以大大提高开发效率，减少手写代码的时间和工作量。它适用于各种项目类型，无论是小型网站还是大型应用，都可以得到很好的应用和推广。 总之，Layui代码生成器是一款便捷实用的前端工具，可以快速生成符合Layui风格的前端代码，提高开发效率，减少重复劳动。它是Layui框架的辅助工具，为开发者提供了更多便利和选择，是前端开发过程中的一股清风。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值