[译]JavaScript表单生成器

By robot-v1.0

本文链接 https://www.kyfws.com/applications/a-javascript-form-generator-zh/

版权声明 本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！

- 8 分钟阅读 - 3554 个词 阅读量 0

[译]JavaScript表单生成器

原文地址：https://www.codeproject.com/Articles/1029517/A-JavaScript-Form-Generator

原文作者：Member 4206974

译文由本站 robot-v1.0 翻译

前言

FormGen, a JavaScript Form Generator FormGen,JavaScript表单生成器 In this article, you will learn about a JavaScript object, FormGen, for creating and managing Forms. 在本文中,您将学习用于创建和管理Forms的JavaScript对象FormGen.

介绍(Introduction)

本文是关于JavaScript对象((This article is about a JavaScript object () FormGen ),用于创建和管理表单() for creating and managing Forms) [1](https://www.codeproject.com#note-1) ;(;) FormGen 从创建简单的消息框到具有文本字段,组合框,单选按钮等的相对复杂的窗体,足够广泛地创建各种窗体(is sufficiently generalized for create a wide set of forms, from simple message box to relatively complex forms with text field, combos, radio buttons and so on) [2](https://www.codeproject.com#note-2) ;此外,它只是包装的非正式且非详尽的介绍.(; moreover it is only an informal and not exhaustive presentation of the package.)

使用程序(Using the Program)

表单生成器在(The form generator is in)**formgen.js(formgen.js)**脚本,其中包含对象功能(script, which contains the object function) formGen ;可以调用此函数或将其用于创建新对象:(; this function can be invoked or used for creating a new object:)

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

哪里(where) *idContainer* 是将托管生成的表单的HTML标签的ID,并且(is the id of an HTML tag that will host the generated form and) *control_list* 是具有可能用于管理表单的其他信息(伪控件)的控件列表;如果省略此参数,(is the list of controls with possibly other information (pseudo controls) for managing the form; if this parameter is omitted,) formGen 假定列表在标签容器中.(assumes that the list is in the tag container.) 每个控件描述均以逗号分隔的属性列表为特征:(Every control description is characterized by a list of attributes comma separated:) Type 场(, Field) Name 场(, Field) Label ,(,) Length 和(and) Extra :(:)

  • Type 是控件类型,与情况无关.(is the control type, this is indifferent to the case.)

  • Name 是控件名称,区分大小写(通常变为(is the control name, the case is significant (generally become a) name 和(and) id 控件).(of the control).)

  • Label 是控件的标签.(is the label of the control.)

  • Length 是控件的长度.(is the length of the control.)

  • Extra 是用于向控件添加信息的附加字段(取决于类型).(is an extra field for add information to the control (this depends on the type).) 每个描述都用分号分隔.(Every description is separated by a semicolon.) 在这些控件中,有不同类型的文本控件,列表,按钮,滑块,单选按钮和复选框.该列表还可以包含一些伪控件(语义稍有不同):(Among the controls, there are different types of text controls, lists, buttons, slider, radio button and check box; the list can also contain some pseudo controls (with a semantic slightly different):)

  • Form 用于告知提交表单时如何管理表单,其语法为:(for telling how to manage the form when it is submitted, its syntax is:) Form ,(,) name ,(,) caption ,(,) uri ,(,) function ;(;)

  • Defaults 用于在控件上插入值;(for insert value on controls;)

  • Control 在提交表格之前对字段进行一些检查;(for executing some checks on the fields before submitting the form;)

  • Below 和(and) After 用于将按钮从默认位置移动到窗体底部,控件下方或之后(右侧);(for moving the buttons from the default position, at the bottom of the form, below or after (at right) of a control;)

  • Get 用于获取数据,对于填充表单或更新列表很有用.(for obtaining data, useful for populating the form or update lists.) formGen 插入三个(inserts three)标准按钮(standard buttons)纽扣:(buttons:) Ok ,(,) Reset 和(and) Cancel ,具体取决于表单中的控件,例如,如果只有一个(, depending on the controls in the form, for example, if there is only one)连击(combo)要么(or)单选按钮(radio button)设置,没有按钮出现,因为项目的选择退出了表单(set, no buttons are presents because the choice on item exits the form) 尝试(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;

但是,我们可以放置自定义按钮或更改标题,也可以使用图形按钮代替(However, we can put custom buttons or change the caption or use graphics buttons replacing the)标准按钮(standard buttons)(其名称是((whose names are) fg_Ok ,(,) fg_Cancel 和(, and) 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字符,例如＆#x270E(✎).(Note the use of Unicode characters for the button’s caption like &#x270E (✎).)

表格介绍(Form Presentation)

数据以它们在参数列表中出现的顺序显示,但自定义按钮与(The data are presented in the order in which they appear in the parameters list, except for the custom buttons that appear together the)标准按钮(standard buttons)插入者(inserted by) FormGen 在表格的底部;因此,可以在控件的右侧或下方插入自定义按钮和复选框(通过(at the bottom of the form; therefore, it is possible to insert custom buttons and check boxes at the right or below a control (by) Below 和(and) After 伪控件).(pseudo controls).) 使用CSS样式,我们可以控制演示文稿,因为表单是使用(With CSS style, we can control the presentation because the form is displayed using a) table 具有类名的标签(tag which has a class name) fg_Table ,按钮具有类名(, the buttons have the class name) fg_Button 要么(or) fg_Gbutton .首先(. The first) td 每行的标签都有类名(tag of every rows has class name) fg_Label .(.)

数据控制(Controls on Data)

伪控制(The pseudo control) Control 要么(or) Check 允许对数据执行一些控制:(allows to perform some controls on data:)

  • 或多或少的价值(greater or less a value)

  • 正式正确的邮件地址(formally correct mail address)

  • 非空字段(not empty field)

  • 匹配正则表达式(match a regular expression) 这些控件在以下情况下发生:(Those controls occur when:)

  • 控制失去重点(the control loses the focus)

  • 用户输入一个数字字段(the user inputs a numeric field)

  • 表格已提交(the form is submitted) 在下面的示例中,将在输入中,失去焦点时以及提交表单时检查数字浮动字段(In the sample below, a numeric floating field is checked in input, on loss of focus and when the form is submitted) 尝试(try) [3](https://www.codeproject.com#note-3)

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

处理控件和事件(Handle Controls and Events)

我们可以使用控件的ID(即(We can enter the management of events using the ID of the control, namely the) name 控制.另外,在按钮的额外字段中,我们可以设置一个函数,当单击带有表单本身参数的按钮时将调用该函数(请参见下面的片段)((of the control. Also, in the extra field of a button, we can set a function that will be invoked when the button is clicked with argument the form itself (see this fragment below) () 尝试(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>

提交表格时(When the Form is Submitted)

按照伪类型指示检查数据(The data are checked as indicated in the pseudo type) Check (如果存在),如果出现错误,则不会提交表单,并且错误的字段以红色边框显示;它还会生成警报.((if it exists), in case of errors, the form is not submitted and the fields in error are bordered in red; it also generated an alert.) 提交取决于参数(The submission depends on parameters) URL 和(and) function 伪类型(of pseudo type) Form :(:)

  • 只要(only) URL :响应替换源页面(: the response replaces the source page)
  • URL 和(and) function :(:) function 通过内置的Ajax模块从(receives the answer, via a built-in Ajax module, from) URL
  • 只要(only) function :(:) function 以参数形式调用,显然它需要本地详细说明(is called with argument form, obviously it needs a local elaboration)

在新页面中提交(Submit in a New Page)

在上述情况1)中,如果要在新页面中显示该广告,我们会在附加字段中插入一个自定义按钮,其中包含(In case 1) above for display in a new page, we insert a custom button which, in the extra field, contains the name of a) 功能(function) 将处理提交:(that will handle the submission:)

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

请注意,用户必须对字段进行任何检查,并且如果存在文件上载,则必须设置属性编码.(Note that the user must carry out any checks on the fields, and, if a file upload is present, he must set the property encoding.)

进阶使用(Advanced Use)

伪类型(The pseudo type) Get 可用于检索数据(can be used to retrieve data)通过内部Ajax函数从INTERNET中获取,以填充(或更改)组合框或列表中的值,或使用默认值(例如,使用数据库中的数据)填充表单.(from INTERNET via the internal Ajax function for populate (or change) values on Combo box or Lists or to populate the form with default values, for example with data from database.) Get 需要URI,即Internet站点上的脚本,该脚本提供数据的结构必须具有预期的语法(needs a URI, i.e., a script on an Internet site that provides the data whose structure must have the syntax expected in)额外(extra)现场(field of)**招商银行(CMB)**要么(or)**大号(L)**或者,如果使用默认值,则为伪类型的预期结构(or, in case of defaults is the structure expected for pseudo type)默认值(DEFAULTS)(请参见下面的示例):((see example below):)

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脚本:(Here is the PHP script that handles the requests:)

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

|此外,伪类型(Furthermore, the pseudo-type) GET 增强了添加超时参数的功能,以允许定期更新注释,文本和新控件类型(has been enhanced adding a timeout parameter to allow periodic updating of comments, texts and of new control type) Image :(:)|Image 2

注意(Note)

  • ^(^) 这是一些表单生成器(用于Autoit,Powershell,Basic4Android)之一,可以在我的(This is one of some form generators (for Autoit, Powershell, Basic4Android) which can be found in my) 现场(site) .(.)
  • ^(^) 某些功能需要HTML5(输入类型为数据).(Some functionality requires HTML5 (input type Data).)
  • ^(^) 有一些简单的样式:(There are some simple styles:)

许可

本文以及所有相关的源代码和文件均已获得The Code Project Open License (CPOL)的许可。

CSS HTML Javascript Windows PHP 新闻 翻译