JavaScript表单生成器

寒冰屋

于 2024-08-02 17:38:58 发布

阅读量111

点赞数

分类专栏：前端文章标签： JavaScript FormGen

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

版权

前端专栏收录该内容

241 篇文章

订阅专栏

本文是关于一个用于创建和管理表单的JavaScript 对象(fGen); fGen具有足够的通用性，可以创建广泛的表单，从简单的消息框到带有按钮、图形按钮、文本字段、组合、单选按钮和图像等小部件的相对复杂的表单;此外，fGen还支持事件管理、本地处理和Ajax 交互。
在本文中，仅对软件包进行了非正式且不详尽的介绍，但是，在评论示例时将强调一些特殊性。
该软件包已经过重建，特别是功能没有变化，除了一些次要的实现，但语法变得更加直观，以实现更简单的使用、更好的安全性和更大的可维护性。

介绍
使用程序
表单生成器在formgen.js 脚本中，其中包含object函数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 ：
- 图片img images/condor.gif width 100
- RDB 性别 'images/.png' 'M=♂男，F=♀Female，N=未指定' 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字符，例如，“确定”按钮的标题为✎ （✎）。

表单表示

数据按它们在control_list中出现的顺序显示，除了在表单底部由fGen 插入的标准按钮一起出现的自定义按钮；因此，可以在另一个小部件的右侧或下方插入自定义按钮和其他小部件。

使用CSS样式表，我们可以控制表单的显示方式，使用具有类名 fg_Table的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;}

管理事件

我们可以进入使用JavasScript 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 功能：

only URL：响应生成一个新页面。
URL 和function：function通过内置的 Ajax 模块从服务器接收答案。
只有function：以表单作为参数调用function，显然它需要局部阐述。
如果没有URL，也没有function fGen 显示替换表单的数据。

高级使用

使用来自服务器的数据编译表单

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

Get 需要一个URI，即Internet站点上的一个脚本，该脚本提供的数据可以是分配给小部件的值或用于填充组合框的项目，在默认情况下，期望控制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 控件才能生成标题行，该行对移动事件做出反应，并在其中设置了光标样式to move。
此时，用户必须包含一些JavaScript来移动表单（SandBox 包括脚本moveItem.js）（自己尝试一下）。

Widget

List

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: "Τώρα"

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