CN110598152A - 一种基于JavaScript的Form表单的事件扩展方法 - Google Patents

Abstract

本发明公开了一种基于Javascript的Form表单的事件扩展方法，本发明通过确定Form表单的事件类型，注册在html上，再通过定义一个绑定Form表单事件的基础对象A，然后再定义一个封装Form表单事件的方法B，该方法B基于基础对象A实例化为一个变量，以便在封装表单的方法中，根据事件流触发基础对象A中注册的change事件用来动态改变表单值，最后在js文件调用时，根据方法B实例化调用对象C，并传类型。此时完成了Form表单事件的注册、定义，在一个Form表单事件中，在提交表单与后台实现交互前，应用Form表单事件，能提高交互效率，不必等后台返回错误信息后再提示用户修改输入，同时可根据后台传回的数据，改变页面效果。

Description

一种基于JavaScript的Form表单的事件扩展方法

技术领域

本发明涉及计算机技术领域，具体的说，是一种基于Javascript的Form表单的事件扩展方法。

背景技术

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：

1、表单标签：这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法；

功能：用于申明表单，定义采集数据的范围，也就是<Form>和</Form>里面包含的数据将被提交到服务器或者电子邮件里。

2、表单域：包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等，其中：

文本框是一种让访问者自己输入内容的表单对象，通常被用来填写单个字或者简短的回答，如姓名、地址等；

多行文本框也是一种让访问者自己输入内容的表单对象，只不过能让访问者填写较长的内容；

密码框是一种特殊的文本域，用于输入密码。当访问者输入文字时，文字会被星号或其它符号代替，而输入的文字会被隐藏；

隐藏域是用来收集或发送信息的不可见元素，对于网页的访问者来说，隐藏域是看不见的。当表单被提交时，隐藏域就会将信息用你设置时定义的名称和值发送到服务器上；

复选框允许在待选项中选中一项以上的选项。每个复选框都是一个独立的元素，都必须有一个唯一的名称；

单选框用于需要访问者在单选项中选择唯一的答案时；

文件上传框用于用户需要上传自己的文件的时候，文件上传框看上去和其它文本域差不多，只是它还包含了一个浏览按钮。访问者可以通过输入需要上传的文件的路径或者点击浏览按钮选择需要上传的文件；注意：在使用文件域以前，请先确定你的服务器是否允许匿名上传文件。表单标签中必须设置ENCTYPE="multipart/Form-data"来确保文件被正确编码。另外，表单的传送方式必须设置成POST；

下拉选择框允许你在一个有限的空间设置多种选项。

3、表单按钮：包括提交按钮、复位按钮和一般按钮；用于将数据传送到服务器上的CGI脚本或者取消输入，还可以用表单按钮来控制其他定义了处理脚本的处理工作。

在系统应用中，经常会有一大堆由用户填写的Form表单元素组成的页面，通常Web页面的Form表单元素有input，select，textarea，checkbox等。要根据条件动态改变这些Form表单元素的样式、值，注册事件、触发事件时，往往操作繁复，会导致开发者做很多同样的操作，且代码质量不高。

发明内容

本发明的目的在于提供一种一种基于Javascript的Form表单的事件扩展方法，实现封装的表单事件处理方法、调用封装的方法、循环获得参数，增加其他额外样式、注册额外事件等的功能，具有减少开发者的工作量，提高了工作效率的效果。

本发明通过下述技术方案实现：

一种基于Javascript的Form表单的事件扩展方法，通过以下步骤来实现：

步骤一，确定Form表单的事件类型，注册在html标签元素上；

步骤二，定义一个绑定事件的基础对象A，该基础对象A包括一个适用于不同选择器的通用Form表单元素的change事件注册、以及该change事件的具体对应当前表单元素值的动态赋值改变；

步骤三，定义一个封装表单事件的方法B，该方法基于基础对象A实例化为一个变量，以便在封装表单的方法中，根据事件流触发基础对象A中注册的change事件用来动态改变表单值的方法；

步骤四，在页面js文件调用时，根据方法B实例化表单事件函数C：

步骤五，调用C，在一个Form表单事件中，在提交表单与后台实现交互前，应用Form表单事件，能提高交互效率，不必等后台返回错误信息后再提示用户修改输入，同时可根据后台传回的数据，改变页面效果。

为了更好的实现本发明，进一步地，所述的html标签元素是具有唯一性的Form表单元素的选择器，不同表单可以定义不同的选择器类型，或者同一表单也可定义不同的选择器类型。

为了更好的实现本发明，进一步地，所述的步骤二具体包括定义函数和注册message事件两个步骤：

所述的定义函数步骤，首先要传参数object_id，用于定义表单选择器类型，且构造元素属性名称data_attr，注册基于object_id的change事件和errror事件，元素在触发change事件的时候，手动触发一次message事件，传入参数data_attr的值（属性名）以及当前元素用户输入的值（以便在触发message事件的时候用于对元素赋值）；

所述的注册massage事件，由注册在文档流中的change事件的回调函数采用trigger()方法触发；注册massage事件的具体过程如下：用on()方法监听message事件，同时其回调函数传入event、属性名和元素值，根据表单中为元素统一命名的属性data-data_attr,通过each函数，给元素赋值。

如果是checkbox复选框，则需要根据它当前的value值来判定样式是否选中，如果值为1，则改变checkbox的样式为选中状态，同时改变它的值为0，为下一次点击改变做准备，为0的话则取消勾选，同时改变它的值为1。

具体示例代码如下：

pubSub.on( message, function( evt, prop_name, new_val )

{

jQuery( "[data-" + data_attr + "=" + prop_name + "]" ).each( function()

{

var $bound = jQuery( this );

if ($bound.is("input, textarea, select") )

{

if(this.type === "checkbox")

{

if( new_val === "1")

{

$bound.attr('checked', true); //勾选

new_val = "0"

}

Else

{

$bound.attr('checked', false); //取消勾选

new_val = "1"

}

}

$bound.val( new_val );

}

Else

{

$bound.html( new_val );

}

});

});

return pubSub;

}

为了更好的实现本发明，进一步地，步骤二所述的表单元素具体包括input、select、textarea、checkbox等。

为了更好的实现本发明，进一步地，步骤三所述的定义封装方法B具体包括：

1）以方法A实例化为变量binder，以便继承方法A的方法等；

2）定义对象item，里边分别对set、get、css、addcss、error、onevent等方法进行定义；

3）在item对象里，定义attributes对象；

4）调用set方法的时候把表单元素的属性值及对应的value值存在attribute对象里，便于get()方法获取元素value值。

实现方式：

1）set方法根据第四步调用时传入属性名对应的属性值以及value值，根据事件触发流触发A方法中的message事件，即可改变元素的值；

2）get方法只需传入attr_name属性名对应的属性值，即可取得该元素的值。get与set均可在一个循环中通过唯一的属性名（对应不同的属性值）来取到与设置元素的值；

3）css方法则为在表单页面需要额外临时加样式，而不用写入样式表时，采用此方法达到目的样式效果。同时需要传入属性值，类名，类名对应的值，如果需要对多个元素应用此样式，也可在循环中完成，而不必每个元素执行一次；

4)addcss方法通过传入属性值，类名，可以为元素应用样式表中的已有样式；

5)error方法传入属性值，以及要展示的值；

6)onevent方法根据传入的属性值，事件名，事件，对当前元素注册事件。

为了更好的实现本发明，进一步地，所述的步骤五的Form表单事件函数C包括获取表单元素值、提示参数错误、改变表单元素值、注册新表单事件、改变样式、增加样式，具体调用Form表单事件函数C的操作有：

1）获取表单元素值：通过循环地获取表单元素值构造传入后台的参数；

2）提示错误参数：通过提示参数错误，对输入错误的Form表单进行页面提示；

3）改变表单元素值：对于输入正确的Form表单，通过触发方法A中的message事件改变Form表单元素值，同时展示表单数据；

4）注册新表单事件：注册keyup事件，当用户在邮件输入框输入结束的时候，触发keyup事件，调用执行检测邮箱连通性事件；

5）增加样式：根据需要为页面增加一些额外的临时样式；

6）改变样式：根据获取页面数据的不同，动态改变页面内元素的样式。

本发明与现有技术相比，具有以下优点及有益效果：

（1）本发明实现页面表单的动态改变、参数检测及提示样式；

（2）本发明减少了开发者的工作量，提高了工作效率。

附图说明

图1为本方法操作流程图；

图2为调用函数C的具体流程图；

图3为本方法的概念流程图。

具体实施方式

为了更清楚地说明本发明实施例的技术方案，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，应当理解，所描述的实施例仅仅是本发明的一部分实施例，而不是全部的实施例，因此不应被看作是对保护范围的限定。基于本发明中的实施例，本领域普通技术工作人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例1：

本实施例的一种基于Javascript的Form表单的事件扩展方法，如图1所示，通过以下步骤来实现：

步骤一，确定Form表单的事件类型，注册在html标签元素上；

步骤二，定义一个绑定事件的基础对象A，该基础对象A包括一个适用于不同选择器的通用Form表单元素的change事件注册、以及该change事件的具体对应当前表单元素值的动态赋值改变；

步骤三，定义一个封装表单事件的方法B，该方法基于基础对象A实例化为一个变量，以便在封装表单的方法中，根据事件流触发基础对象A中注册的change事件用来动态改变表单值的方法；

步骤四，在页面js文件调用时，根据方法B实例化表单事件函数C：

具体可以这样操作：item = new Item( "item" )，以括号中的item代表form表单选择器，实例化Item方法，赋值给要应用的变量item，即完成了Form表单事件函数C的全部封装；或者item = new Item( "element" )，以element代表form选择器，实例化Item方法，赋值给item变量即完成了Form表单事件函数的全部封装；

步骤五，调用C，在一个Form表单事件中，在提交表单与后台实现交互前，应用Form表单事件，能提高交互效率，不必等后台返回错误信息后再提示用户修改输入，同时可根据后台传回的数据，改变页面效果。

实施例2：

本实施例在实施例1的基础上做进一步优化，所述的步骤二具体包括定义函数和注册message事件两个步骤：

所述的定义函数步骤，首先要传参数object_id，用于定义表单选择器类型，且构造元素属性名称data_attr，注册基于object_id的change事件和errror事件，元素在触发change事件的时候，手动触发一次message事件，传入参数data_attr的值（属性名）以及当前元素用户输入的值（以便在触发message事件的时候用于对元素赋值）；

所述的注册massage事件，由注册在文档流中的change事件的回调函数采用trigger()方法触发；注册massage事件的具体过程如下：用on()方法监听message事件，同时其回调函数传入event、属性名和元素值，根据表单中为元素统一命名的属性data-data_attr，通过each函数，给元素赋值。

本实施例的其他部分与实施例1相同，故不再赘述。

实施例3：

本实施例在上述实施例1或2的基础上做进一步优化，所述的注册massage事件步骤中，如果是checkbox复选框，则需要根据它当前的value值来判定样式是否选中，如果值为1，则改变checkbox的样式为选中状态，同时改变它的值为0，为下一次点击改变做准备，为0的话则取消勾选，同时改变它的值为1。

本实施例的其他部分与上述实施例1或2相同，故不再赘述。

实施例4：

本实施例在上述实施例1-3任一项的基础上做进一步优化，步骤二所述的表单元素具体包括input、select、textarea、checkbox等。

本实施例的其他部分与上述实施例1-3任一项相同，故不再赘述。

实施例5：

本实施例在上述实施例1-4任一项基础上，结合图2和图3做进一步优化，所述的步骤五的Form表单事件函数C包括获取表单元素值、提示参数错误、改变表单元素值、注册新表单事件、改变样式、增加样式，具体调用Form表单事件函数C的操作有：

1）获取表单元素值：通过循环地获取表单元素值构造传入后台的参数；

2）提示错误参数：通过提示参数错误，对输入错误的Form表单进行页面提示；

3）改变表单元素值：通过触发方法A中的message事件改变Form表单元素值，同时展示表单数据；

4）注册新表单事件：注册keyup事件，当用户在邮件输入框输入结束的时候，触发keyup事件，调用执行检测邮箱连通性事件；

5）增加样式：根据需要为页面增加一些额外的临时样式；

6）改变样式：根据获取页面数据的不同，动态改变页面内元素的样式。

工作原理：如图3所示，本方法首先要确定一个基础事件表单，然后对这个基础表单事件进行封装，以便后续进行调用，而具体的调用则包括获取表单元素值、提示参数错误、改变表单元素值、注册新表单事件、改变样式、增加样式，其中：获取表单元素可以采用item.get()循环得获取Form表单元素值，构造传入后台的参数；通过item.error()为输入错误的Form表单提供输入错误页面效果展示；在获取页面数据后，通过item.set()可以对表单元素值进行修改，并可展示表单数据；item.onevent()可用来注册新表单事件，如注册keyup事件，当用户在邮件输入框输入束的时候，触发keyup事件，调用执行检测邮箱连通性事件；在获取页面数据时，使用item.addcss()可以做到根据取到的值，动态改变页面内元素的样式，如网络连通性正常的时候显示绿色样式，中断显示灰色样式；当需要增加一些额外的临时新样式时，可以使用item.css()来实现，如使用item.css(‘submit-button’,‘disabled’)为Form表单提交请求的按钮提供禁用样式与事件，防止一次请求未完成，再次发起请求。

具体步骤如图2，首先提交表单，通过循环获取表单元素值；再判断表单元素输入是否正确，若不正确则弹出错误的页面提示，提示用户修改输入，若输入正确，则提交表单元素值至后台，再由后台回传数据；根据后台回传的数据，进行页面效果的改变。

本实施例的其他部分与上述实施例1-4任一项相同，故不再赘述。

以上所述，仅是本发明的较佳实施例，并非对本发明做任何形式上的限制，凡是依据本发明的技术实质对以上实施例所作的任何简单修改、等同变化，均落入本发明的保护范围之内。

Claims (6)

1.一种基于JavaScript的Form表单的事件扩展方法，其特征在于，通过以下步骤来实现：

步骤一，确定Form表单的事件类型，注册在html标签元素上；

步骤二，定义一个用于绑定Form表单事件的基础对象A，所述基础对象A包括一个适用于不同选择器的通用Form表单元素的change事件的注册、以及所述change事件具体对应的当前Form表单元素值的动态赋值改变；

步骤三，定义一个封装Form表单事件的方法B；

步骤四，根据方法B实例化表单事件函数C；

步骤五，调用Form表单事件函数C。

2.根据权利要求1所述的一种基于JavaScript的Form表单的事件扩展方法，其特征在于，所述的步骤二具体包括定义函数和注册message事件两个步骤：

所述的定义函数是指：首先要传参数object_id，用于定义表单选择器类型，且构造元素属性名称data_attr，注册基于object_id的change事件和errror事件，元素在触发change事件的时候，手动触发一次message事件，传入参数data_attr的值，即属性名，以及当前用户输入的元素值用于在触发message事件的时候对元素赋值；

所述的注册massage事件，由注册在文档流中的change事件的回调函数采用trigger()方法触发；注册massage事件的具体过程如下：用on()方法监听message事件，同时其回调函数传入event、属性名和元素值，根据表单中为元素统一命名的属性data-data_attr,通过each函数，给元素赋值。

3.根据权利要求2所述的一种基于JavaScript的Form表单的事件扩展方法，其特征在于，所述的注册massage事件步骤中，如果是checkbox，则需要根据它当前的value值来判定样式是否选中，如果value的值为1，则改变checkbox的样式为选中状态，同时改变它的值为0，为下一次点击改变做准备；如果当前value值为0，则取消勾选，同时改变value的值为1。

4.根据权利要求1所述的一种基于JavaScript的Form表单的事件扩展方法，其特征在于，步骤二所述的表单元素具体包括input、select、textarea、checkbox。

5.根据权利要求1所述的一种基于JavaScript的Form表单的事件扩展方法，其特征在于：步骤三所述的定义封装方法B具体包括以下步骤：

1）以方法A实例化为变量binder，以便继承方法A的方法；

2）定义对象item，在item里分别对set、get、css、addcss、error、onevent方法进行定义；

在item对象里，定义attribute对象；

3）调用set方法的时候把表单元素的属性值及对应的value值存在attribute对象里，便于get方法获取对应元素value值。

6.根据权利要求1所述的一种基于JavaScript的Form表单的事件扩展方法，其特征在于，所述的步骤五的Form表单事件函数C包括获取表单元素值、提示参数错误、改变表单元素值、注册新表单事件、改变样式、增加样式，具体调用Form表单事件函数C的操作有：

1）获取表单元素值：通过循环地获取表单元素值构造传入后台的参数；

2）提示错误参数：通过提示参数错误，对输入错误的Form表单进行页面提示；

3）改变表单元素值：通过触发方法A中的message事件改变Form表单元素值，同时展示表单数据；

4）注册新表单事件：注册keyup事件，当用户在邮件输入框输入结束的时候，触发keyup事件，调用执行检测邮箱连通性事件；

5）增加样式：根据需要为页面增加一些额外的临时样式；

6）改变样式：根据获取页面数据的不同，动态改变页面内元素的样式。