JavaScript表单生成器

在本文中，您将了解用于创建和管理表单的JavaScript对象FormGen。

寒冰屋

2023人浏览 · 2022-05-19 18:45:00

寒冰屋 · 2022-05-19 18:45:00 发布

介绍

这篇文章是关于一个用于创建和管理表单的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：

仅有URL：响应替换源页面
URL和function:function通过内置的Ajax模块从URL接收答案
仅有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;

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;
}

注意

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

<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