JavaScript表单生成器

分享于 

8分钟阅读

Web开发

  繁體

介绍

这是关于创建和管理表单 [1]的JavaScript对象( FormGen ) FormGen sufficiently广义概括为创建广泛的表单,包括文本框,combos,单选按钮,而不是简单的表单,它只是软件包的一个不完整的演示。

使用程序

表单生成器位于 formgen.js 脚本,包含对象函数 FormGen ;可以调用该函数或者用于创建新对象:

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

如果 idContainer 标记为HTML表单,control_list 将托管生成表单的控件列表;如果省略这里参数,则可能为其他信息( 伪控件) ;如果省略这里参数,则将列表放入标记容器。

每个控件描述都以逗号分隔的属性列表为特征: 类型,字段名称,字段标签,长度和额外值:

  • Type 是控件类型,这与大小写无关。
  • Name 控件名称,大小写是重要的( 通常成为控件的名称和 id )。
  • Label 控件的标签。
  • Length 控件的长度。
  • Extra 为控件添加信息的额外字段,( 这取决于类型)。

每个描述都用分号隔开。

控件中有不同类型的文本控件。列表。按钮。slider。单选按钮和复选框;列表还可以包含一些伪控件( 语义稍微不同):

  • Form 用于说明在提交表单时如何管理窗体,它的语法为: Form,name,caption,uri,function
  • 控件上的插入值 Defaults
  • 在提交表单前对字段进行一些检查的Control
  • BelowAfter 用于从默认位置移动按钮,在窗体的底部,below 或者控件的( 右边) 之后。

formGen插入三个标准按钮按钮: 如果只显示一个组合按钮或者单选按钮,则 OkResetCancel,例如如果项目中只有一个按钮或者单选按钮,因为该项退出表单请尝试:

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_Okfg_Cancelfg_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]).{6x2C12};</div>...

表单演示文稿

除了表单底部的自定义按钮显示在表单底部的自定义按钮外,这些数据按顺序显示;在窗体底部可能会插入自定义按钮和复选框,并显示控件。

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

数据上的控件

伪控件 Control 或者 Check 允许对数据执行某些控件:

  • 大于或者 LESS 值,
  • 正式正确的邮寄地址
  • 不是空
  • 匹配正则表达式。

这些控件在以下情况下发生:

  • 控件失去焦点,
  • 用户输入一个数字字段,
  • 表单已经提交。

在下面的示例中,数字浮动字段在输入中检查,失去焦点,当提交表单时,

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

处理控件和事件

我们可以使用控件的ID ( 即控件的Name ) 来输入事件的管理。 在按钮的额外字段中,我们可以设置一个函数,当按钮被单击时,该函数将被调用。表单本身是( 请参见下面的fragment ) ( try )。

...
$("Agree").addEventListener("click",function() {$('Start').disabled =!this.checked;},true);
$('Start').disabled = true;
Fgen = new formGen("fg")
...
<div id='fg'>GB,Info,images/info.png,,infoPSW,Info;
CKB,Agree,Consent cookies?,,I agree;
B,Start;</div>

提交表单时

在伪类型 Check ( 如果存在) 中检查数据,如果未提交表单的错误,并且错误的字段为红色。

提交依赖于伪类型 Form的参数 URLfunction:

  • 只有 URL: 响应替换了源页面;
  • URLfunction: function 通过一个内置的ajax模块从 URL 接收答案;
  • 仅使用参数形式调用 function: function,显然它需要一个局部细化。
  • 在新页面中提交

上面 新页面中显示的case 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;
...

注意用户必须对字段执行任何检查,如果存在文件上传,则必须设置属性编码。

便笺

  • 这是某种形式的生成器,可以在我的网站中找到。
  • ^ 某些功能需要 HTML5 ( 输入类型数据)。
  • ^ 有一些简单的样式:
.fg_Button {font-size:10pt;width:70px;height:22px;cursor:pointer;margin:0px 3px;background:silver;line-height: 1.25;}<br/>. fg_GButton {border:0;cursor:pointer;vertical-align:middle;padding:5px;}<br/> table {border: 1px solid #111;padding:3px}<br/> th {font: bold 9pt Arial;text-align: center;padding:5px;vertical-align:top;background-color:#eee;}

相关文章