JavaScript表单生成器 / 开普饭

在本文中，您将学习用于创建和管理Forms的JavaScript对象FormGen。

介绍
本文是关于FormGen用于创建和管理表单[1]的JavaScript对象（）；FormGen从创建简单的消息框到具有文本字段，组合框，单选按钮等的相对复杂的窗体，[2]足够通用化以创建各种窗体。此外，它只是包装的非正式且非详尽的介绍。

使用程序
表单生成器位于formgen.js脚本中，该脚本包含对象函数formGen；可以调用此函数或将其用于创建新对象：

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

idContainer用于托管生成的表单的HTML标签的ID在哪里，是control_list用于管理表单的控件列表以及可能的其他信息（伪控件）；如果省略此参数，则formGen假定列表位于标签容器中。

每一个控制描述的特征在于属性列表逗号分隔：Type，场Name，场Label，Length和Extra：

Type 是控件类型，与情况无关。
Name是控件名称，大小写有意义（通常成为控件的name和id）。
Label 是控件的标签。
Length 是控件的长度。
Extra 是用于向控件添加信息的附加字段（取决于类型）。
每个描述都用分号分隔。

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

Form告诉如何提交时管理的形式，它的语法是：Form，name，caption，uri，function，
Defaults 用于在控件上插入值；
Control 在提交表格之前对字段进行一些检查；
Below并After从默认位置移动的按钮，在该形式的底部，低于或后（右）的控制的;
Get 用于获取数据，对于填充表单或更新列表很有用。
formGen插入件3个标准按钮按钮：Ok，Reset和Cancel，根据在形式的控件，例如，如果仅存在一个组合或单选按钮组，没有按钮是礼物因为关于项目的选择退出形式的尝试：

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

但是，我们可以把自定义按钮或更改标题或使用图形按钮取代了标准按钮（其名称分别为fg_Ok，

fg_Cancel和fg_Reset）（试）。...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>...123456789101112131415161718

请注意，按钮标题使用了Unicode字符，例如＆＃x270E（✎）。

表格介绍
数据按照它们出现在参数列表中，除了出现在一起的自定义按钮的顺序呈现标准按钮由插入FormGen在所述形式的底部; 因此，可以在控件（通过Below和After伪控件）的右侧或下方插入自定义按钮和复选框。

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

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

或多或少的价值
正式正确的邮件地址
非空字段
匹配正则表达式
这些控件在以下情况下发生：

控制失去重点
用户输入一个数字字段
表格已提交
在下面的示例中，在输入中，失去焦点时以及提交表单时尝试检查数字浮点字段

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

处理控件和事件
我们可以使用控件的ID（即控件的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>1234567891011

提交表格时
按照伪类型Check（如果存在）中的指示检查数据，如果出现错误，则不提交表单，并且错误的字段以红色边框显示；它还会生成警报。

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

仅URL：响应替换源页面（https://www.xiaoyuani.com/）
URLand function：function通过内置的Ajax模块从URL
only function：function以参数形式调用，显然它需要局部详细说明
在新页面中提交
在上面要显示在新页面中的情况1）中，我们在附加字段中插入了一个自定义按钮，该按钮包含将处理提交的函数的名称：

...Fgen = new formGen("result")...function myHandler(frm) {                // the function receive the formvar 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 uploadfrm.target = "_blank";        // in new windowfrm.submit();}...Form,frm,Complete Control form,x.php;B,Start,,,myHandler;...1234567891011121314

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

进阶使用
伪类型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;1234567891011

这是处理请求的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";}?>12345678910111213

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

Form,frm,,echo.php,receiveData;C,Time,Clock;T,wField,IT Cite,200;Image,Image,,200;GET,Time,getSample.php?Type=Time,60000;GET,wField,getITCite.php,10000;Get,Image,getImage.php,11000;1234567

注意
^这是一些可在我的网站中找到的表单生成器（用于Autoit，Powershell，Basic4Android）之一。
^某些功能需要HTML5（输入类型为数据）。
^有一些简单的样式：

.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;    vertical-align:top;background-color:#eee;}``

JavaScript表单生成器

相关推荐