我可以: 邀请好友来看>>
ZOL论坛 > 技术论坛 > Java技术论坛 > JavaScript表单生成器
帖子很冷清,卤煮很失落!求安慰
返回列表
签到
手机签到经验翻倍!
快来扫一扫!

JavaScript表单生成器

43浏览 / 0回复

一只小佳

一只小佳

0
精华
1
帖子

等  级:Lv.1
经  验:41
  • Z金豆: 7

    千万礼品等你来兑哦~快点击这里兑换吧~

  • 城  市:浙江
  • 注  册:2020-11-24
  • 登  录:2020-11-25
发表于 2020-11-24 16:10:14
电梯直达 确定
楼主

在本文中,您将学习用于创建和管理Forms的j对象FormGen。
JavaScript表单生成器
介绍
本文是关于FormGen用于创建和管理表单[1]的j对象();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) {
	aleet("Password from 6 to 12 characters.nand at least one number and 
           one capital letter and one letter")}formGen('fg');...P,psw,Password,15,Insert password;B,Info,?,25,infoPSW;B,fg_Cancel,✘,30,,Cancel form;B,fg_Reset,↶,30,,Reset form;B,fg_Ok,✎,30,,Go!;After,psw,Info;Control,psw,required,pattern=(?x3D.*d)(?x3D.*[A-Z])(?x3D.*[a-z]).{6x2C12};
...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{1x2C3}(.d{1x2c2})?$;...1234

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

...Fgen = new formGen("fg")$("Agree").addEventListener("click",function() {$('Start').disabled = !this.checked;},true);$('Start').disabled = true;...GB,Info,images/info.png,,infoPSW,Info;CKB,Agree,Consent cookies?,,I agree;B,Start;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 form	
	var aErrors = Fgen.check(frm);
	if (aErrors.length > 0) {aleet("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;...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脚本:

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;}
高级模式
论坛精选大家都在看24小时热帖7天热帖大家都在问最新回答

针对ZOL论坛您有任何使用问题和建议 您可以 联系论坛管理员查看帮助  或  给我提意见

快捷回复 APP下载 返回列表