JavaScript 表单生成器

会员 4206974

5.00/5 (31投票s)

2015年9月11日

CPOL

7分钟阅读

73026

2801

FormGen，一个 JavaScript 表单生成器

引言

本文介绍了一个用于创建和管理表单的 JavaScript 对象 (fGen)^[1]；fGen 足够通用，可以创建各种表单，从简单的消息框到相对复杂的表单，其中包含按钮、图形按钮、文本字段、组合框、单选按钮和图像等控件；此外，fGen 支持事件管理、本地处理和 Ajax 交互。

本文仅对该包进行了非正式和不详尽的介绍，但会在评论示例时突出一些细节。

该包已重新构建，特别是功能保持不变，除了一些小的实现外，但语法已变得更加直观，以实现更简单的使用、更好的安全性和更高的可维护性。

使用程序

表单生成器位于 formgen.js 脚本中，该脚本包含对象函数 fGen；此函数用于创建一个新对象

fGenObject = new fGen(idContainer,control_list)

其中 idContainer 是将承载生成表单的 HTML 标签的 ID，control_list 是控件列表，可能包含用于管理表单的其他信息（控件）。

如果省略 idContainer，则会创建一个 ID 为 fg_PopUp 且类名为 fg_PopUp 的容器，这对于创建可移动表单非常有用。

每个控件的描述都由一系列由空格分隔的属性定义：Type、Name、Label 和 Extra 参数。

Type 是控件类型，不区分大小写。
Name 是控件名称，区分大小写。
Label 是控件的标签，如果省略，则会从 Name 生成，并进行一些语法糖处理，例如 name_Surname 会变成 Name surname。
Extra 可以包含控件的信息，其中一些取决于类型，但其他是通用的；这些信息可以采用 key value 或 parameter 的形式，例如：
- Image img images/condor.gif width 100
- RDB Sex 'images/sex.png' 'M=♂ Male,F=♀ Female,N=Not specified' vertical
- T mediaFile '' File width 50 Filter audio/*,video/*,image/*

每个控件描述由换行符分隔。

控件中有几种类型的输入文本、列表、按钮、滑块、单选按钮、复选框、隐藏字段……该列表还可以包含一些语义略有不同的控件。

Form 用于指示表单提交时如何管理，特别是它可以包含 server URL 和 call function 参数；
Defaults 用于在控件中插入初始值；
Control 用于在提交表单之前对控件值执行一些检查；
Get 用于获取数据，用于填充表单、更新列表或更改控件值或图像（也可以按预定间隔进行）。
Event 用于将事件与控件关联：事件可以由本地 JavaScript 函数或由服务器（例如 PHP 脚本）处理。响应可以发送到 JavaScript 函数或直接输入到 DOM 组件。
Dictionary 用于管理语言翻译。

fGen 插入 Ok、Reset 和 Cancel 按钮，其名称分别为 fg_Ok、fg_Cancel 和 fg_Reset，具体取决于存在的控件，例如，如果只有一个数据要插入（文本、组合框或单选按钮），则不显示按钮，因为选择或插入的值会退出表单（自行尝试）。

Form frm 'Select a measure' server echo.php call receive
CMB Unit 'Measure Unit' =Linear,mm=millimeter,cm=centimeter,m=meter,
km=kilometer,=Weight,g=gram,kg=kilogram,t=ton

关于上述示例的两个说明：

Form 伪控件指示调用服务器脚本 echo.php，其响应将由 JavaScript 函数 receive 处理。
CMB 控件根据逗号分隔的项目集生成组合框元素，其中项目可以采用 key[=exposed value] 的形式； key 是选择返回的值，此外项目可以使用 =group 语法进行分组（在示例中为 =Linear 和 =Weight）。

我们可以插入自定义按钮或图形按钮，或更改标准按钮的标题（自行尝试）。

function infoPSW(frm) {
	alert("Password from 6 to 12 characters.\nand at least one number and 
           one capital letter and one letter")
}
var pswForm = `
T psw Password width 15 password hint 'Insert password'
B Info ? width 25 event click call infoPSW after psw
B fg_Cancel &#x2718; width 30 title 'Cancel form'
B fg_Reset \x21B6 width 30 title 'Reset form'
B fg_Ok &#x270E; width 30 title Go!
Required psw
Control psw is (?=.*\d)(?=.*[A-Z])(?=.*[a-z]).{6,12} 'Password from 6 to 12 characters.\nand at least one number and one capital letter and one letter'
`
var frm = new fGen("",pswForm)

请注意按钮标题中使用了 Unicode 字符，例如 Ok 按钮的标题是 ✎ (✎)。

表单呈现

数据按照它们在 control_list 中出现的顺序呈现，但自定义按钮除外，它们会与 fGen 在表单底部插入的标准按钮一起出现；因此，可以在自定义按钮、其他控件的右侧或下方插入。

使用 CSS 样式表，我们可以控制表单的呈现，表单使用 table 标签显示，该标签具有类名 fg_Table，按钮具有类名 fg_Button 或 fg_Gbutton。标签具有类名 fg_Label。一些样式嵌入在 fGen 中。

.fg_Buttons {text-align:center}
.fg_Title img,.fg_Comment img,.fg_Label img,.fg_Button img,.fg_GButton img {
    padding-left: 4px;
    vertical-align:middle;
}
.fg_Erase {cursor:pointer;color:#888;padding-left: 4px}
.fg_Error {color:red}
.fg_Number {text-align:right}
.fg_Slider {width:3em;padding-left: 4px}
.fg_GButton {border: none;background: none}
.fg_Button:hover, .fg_GButton:hover {cursor:pointer}
.fg_Button:disabled, .fg_GButton:disabled{cursor: not-allowed;

请注意，这些样式可以通过设置 !important 来覆盖，例如要更改擦除标记的颜色，CSS 可以是：.fg_Erase {color:blue !important;}。

事件管理

我们可以使用 JavaScript addEventListener 添加事件管理，请看下面的片段（自行尝试）。

...
Fgen = new formGen("fg")
$("Agree").addEventListener("click",function() 
{$('Start').disabled = !this.checked;},true);
$('Start').disabled = true;
...
var agreeForm = `
Form '' 'Event example Form' server echo.php call receive
CKB Agree 'Consent cookies?' 'I agree'
B Start '' disabled
B fg_Cancel &#x2718;
`
var frm = new fGen("",agreeForm)

请注意 Start 按钮是 Ok 按钮的替代项，它最初是禁用的。

然而，处理事件的最简单方法是通过 Event 控件或通过控件的 Event 参数，这两种方式的语法都类似：
Event eventType [on fieldName] [Server URL] [call function|set field]

当存在 Server URL 时，JavaScript function 将处理响应，或者数据将插入到 set 指示的 field 中，请参见下面的示例（自行尝试）。

Form fHBook 'Static Form' server echo.php call receive static
B Clock images/clock.png inline 'Get Time'
T Text ' ' disabled after Clock
B xExcel images/excel.png  Event click alert 'Create Excel file' inline 'Excel file'
B ShowImage images/faro.ico inline 'Show image'
I Img '' height 200 comment
B ShowCite images/new.png inline 'Show IT quote'
Event click on ShowImage server getImage.php?NoTitle set Img
Event click on Clock server getSample.php?Type=Time set Text
Event click on ShowCite server getITCite.php set result2

请注意，Event 控件的 set 参数通过控件名称引用控件，而在最后一个 Event 控件中，引用的是表单外部的 ID。

表单提交时

数据控制

数据按照 Control 或 Check 伪类型指定的进行控制，如果发生错误，表单将不会提交，错误字段将用红色边框标出，并生成警报。

伪类型 Check 允许执行的控制：

将值与常量或其他字段进行比较，
邮箱地址格式正确，
字段非空，
匹配正则表达式，
通过自定义函数控制。

在下面的示例中，对一个浮点数字段进行控制（自行尝试）。

Form '' 'Example of control on data' server echo.php call receive
T Number '' Float 'Insert Floating number'
Check Number >= -200 'Not allowed lesser -200'
Check Number <= 200 'Not allowed greater 200'
Check Number is ^[-+]?\d{1,3}(\.\d{1,2})?$ 'incorrect format'
C c1 'Floating point number\nbetween -200.00 and 200.00 (two decimals)'

数据提交

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

只有 URL：响应会生成一个新页面。
URL 和 function：function 通过内置的 Ajax 模块接收来自服务器的响应。
只有 function：function 以表单作为参数被调用，显然它需要本地处理。
如果没有 URL 也没有 function，fGen 会显示数据，替换表单。

高级用法

用服务器数据编译表单

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

Get 需要一个 URI，即 Internet 站点上的一个脚本，该脚本提供数据，这些数据可以是分配给某个控件的值，也可以是用于填充组合框的项目，或者在 defaults 的情况下，预期是一组 Defaults 控件可以接受的值（自行尝试）。

Form frmg2 'Get example' server echo.php call receive
T Widget '' disabled
CMB WidgetType '' '' link Widget group
CMB Hellas 'Greek letters' '' multiple
List Town
CMB Languages
Hidden HiddenField
Get * getSample.php?Type=Defaults
Get WidgetType getSample.php?Type=Type
Get Town getSample.php?Type=Towns
Get Hellas getSample.php?Type=Hellas
GET Languages getSample.php?Type=Lang

这是处理请求的 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,Delta,Gamma,Epsilon";}
else if ($type == "Towns") {echo "London,Paris,Rome,Toulon,Toulouse,Turin,Zurich";}
else if ($type == "Defaults") {echo "Town=Turin Hellas=Alfa 'WidgetType=T file' Languages=Pascal 'HiddenField=El Condor'";}
else if ($type == "Lang") {echo "Algol,Cobol,Fortran,JavaScript,Pascal,PHP";}
?>

此外，GET 伪类型可以有一个超时参数，用于定期更新注释、文本或图像（自行尝试）。

Form frm '' server echo.php call receive
C Time Clock
T wField 'IT Cite' width 250 disabled
Image Image '' '' height 200 comment
GET Time getSample.php?Type=Time every 60000
GET wField getITCite.php?CR every 9000
Get Image getImage.php every 11000
B fg_Cancel &#x2718; width 45

可移动表单

在 SandBox 中，有一个可移动表单（和国际化）的示例。
这是通过不指定创建标签的表单生成的，因此 fGen 会生成一个类名为 fg_PopUp 的标签；表单必须具有 form 控件，以便生成一个响应移动事件的标题行，并且光标样式设置为 move。
此时，用户必须包含一些 JavaScript 来移动表单（SandBox 包含脚本 moveItem.js）（自行尝试）。

控件
列表

Form rdb 'Radio buttons example' server echo.php call receive
R Status ''  M=Married,S=Single,W=Widow
R Sex 'images/sex.png'  'M=&#9794; Male,F=&#9792; Female,N=Not specified'
R Output ''  E=images/excel.png,None
R Nations '' 'It=images/its.png Italia,Fr=images/frs.png France,Es=images/ess.png España,Us=images/uss.png United States,El=images/els.png Ελλάδα' vertical
Defaults Nations=El Sex=M

function movableForm(widgetList) {
	if($("fg_PopUp")) $("fg_PopUp").remove();
	Fgen = new formGen("",widgetList)
	var link = $("fg_PopUp")
// center the form on screen
    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").addEventListener("mousedown", dragStart.bind(null, event, "fg_PopUp"))
}

CSS

.fg_PopUp { 
	background:#E0E0E0;
	box-shadow:10px 10px #BFBFBF;
    max-width: fit-content;
	position: absolute;
}
.fg_PopUp .fg_Title {cursor:move}

国际化

Dictionary 伪类型用于表单的国际化。

Dict[ionary] dictionaryObject|From function

dictionaryObject 全局 JavaScript 变量包含一组键值项，其中键是控件列表中的单词或短语，值是翻译。

Form ft 'images/faro.ico "Demo internationalization" images/els.png' server echo.php call receive
Dict dict
T Mail Mail address ''  hint 'Minimum 6 characters'"
T Protect 'Protected text' value 'Not modifiable Field' disabled
CKB CheckBox 'Send info' 'Check for consent'
T Time '' disabled"
C Comment Comment center"
B Save images/update.png 'inline=In line button' Event click alert 'Not saved, only for demo'"
GET Time getSample.php?Type=Time"
CMB Hellas 'Greek letters' Alfa,Beta,Delta,Epsilon,Gamma

(自行尝试)。

下面是上面左侧表单中使用的字典片段。

Cancel: "Να κλείσω"
"Check for consent": "Σημειώστε για συγκατάθεση"
Comment: "Σχόλιο"
"Demo internationalization": "Επίδειξη διεθνοποίησης"
"Greek letters": "Ελληνικά γράμματα"
"In line button": "Κουμπί στη γραμμή"
Mail: "ταχυδρομείο"
"Not modifiable Field": "Μη τροποποιήσιμο πεδίο"
Ok: "Εντάξει"
"Protected text": "Προστατευμένο κείμενο"
Reset: "Επαναφορά"
"Send info": "Στείλτε πληροφορίες"
Time: "Τώρα"

注意

^这是我网站上的一些表单生成器（用于 Autoit、Powershell、B4A、B4J、Julia、OCTAVE/MATLAB 和 TCL/TK）之一。

历史

2024 年 4 月 28 日：初始版本