CN111338746A - 基于vue的校验表单组件实现方法 - Google Patents

Abstract

本发明公开了一种基于VUE的校验表单组件实现方法。将表单提交的接口和数据校验的接口整合，通过前端和后端开发的协议来制定校验机制以及校验过后的错误信息提示，从而实现单次请求同时完成表单提交和异步校验操作。本发明的方法消除了前后端校验的不一致性，大大增加了开发的效率，提升了用户体验。

Description

基于VUE的校验表单组件实现方法

技术领域

本发明涉及前端开发技术领域，具体是一种以vue为基础框架，利用后台接口实现提交请求和校验、显示错误信息一体化的表单组件实现方法。

背景技术

表单校验是前端发开过程中一个十分重要的环节，通常讲表单校验由前端的校验和后端的校验两部分构成，前端的校验主要负责做基本的类型校验以及错误信息提示等，后端的校验主要负责校验数据的合法性、过滤非法字符和用户的权限以及数据之间的一致性等问题。通过前后端的校验机制，基本实现了用户交互的友好性和数据的一致性。

但是，这种前后端的校验也存在着许多的问题。第一点，由于前段和后端的校验规则是由前端和后端的开发人员单独编写的，有可能会出现前端和后端校验规则不一致的问题，虽然最终的校验是由后台来完成的，不会造成数据错误的问题，但是会对用户体验造成非常严重的影响。第二点，前端和后端要有相应的文档来约定校验的规则，增加了沟通成本，也降低了开发的效率。

目前拥有的异步校验方案，主要是通过在相应的输入框或者选择框内通过监听事件，来将数据提交给单独的后端接口，根据后端返回值来判断数据是否合法。这种做法不仅增加了服务器的负担，也给开发增加了很多工作量。

发明内容

本发明的目的在于提供一种基于VUE的校验表单组件实现方法。

实现本发明目的的技术解决方案为：一种基于VUE的校验表单组件实现方法，表单组件初始化时定义表单的绑定数据formdata，表单的子组件设置需要校验的数据的key值；用户数据完数据后，通过HTTP请求将数据提交给后端；若数据校验通过，执行相应的操作，并将执行结果返回给前端；若数据校验未通过，则向前端返回错误的键值名称以及错误的信息；前端收到后台返回的结果，若成功则提示操作成功；如果失败，则根据响应的状态码来显示错误信息；如果状态码不为400，则直接显示后台返回的报错信息；如果状态码为400，则根据后台返回的JSON数据将所有的错误信息根据键值显示到相应的表单对象旁。

本发明与现有技术相比，其显著优点：(1)提高了开发效率，减少了开发时前后端人员的沟通成本。(2)避免了前后端分别校验产生的不一致性问题。(3)将异步的校验和提交表单数据两次请求整合为一次请求，降低了服务端的开销，有利于服务端性能的提升和服务端的稳定性。

附图说明

图1是表单组件的结构图。

图2是父子组件的内部结构图。

具体实施方式

本发明将表单提交的接口和数据校验的接口整合，通过前端和后端开发的协议来制定校验机制以及校验过后的错误信息提示，从而实现单次请求同时完成表单提交和异步校验操作。

下面结合说明书附图对本发明作进一步说明。

本发明一种基于vue的校验表单组件实现方法，在表单组件初始化时定义表单的绑定数据formdata，表单的子组件设置需要校验的数据的key值。用户数据完数据后，通过HTTP请求将数据提交给后端。若数据校验通过，执行相应的操作，并将执行结果返回给前端；若数据校验未通过，则向前端返回错误的键值名称以及错误的信息。前端收到后台返回的结果，若成功则提示操作成功。如果失败，则根据响应的状态码来显示错误信息。如果状态码不为400，则直接显示后台返回的报错信息；如果状态码为400，则根据后台返回的JSON数据将所有的错误信息根据键值显示到相应的表单对象旁。表单组件的整体结构如图1所示。

具体步骤如下：

步骤1，在vue项目的入口文件main.js中通过import命令引入检验表单组件，并用vue.use方法将组件注入到vue实例中。

步骤2，在需要用到校验表单的部分调用表单组件，并且设置好相应的数据等。

步骤3，用户输入数据后点击“提交”按钮，将数据和请求一起提交给后台，等待后台返回请求的结果。

步骤4，后台返回结果后，根据返回的状态码和内容将成功或失败的信息以不同的方式显示给用户。

步骤1的具体实现方法为：

1.1新建vue组件，编写表单组件的父组件，作为整个表单组件的整体容器，包括表单的整体布局，子组件默认插槽的位置，以及样式规则，需要绑定的表单数据等。

1.2新建vue组件，编写表单组件的子组件，作为表单的单个数据校验项，需要绑定的数据为父组件中表单数据对应的键值名称。并在子组件中定义默认插槽的位置，以及错误信息显示标签，以及相应的样式等。

1.3在main.js中分别导入父组件和子组件，并将组件注入到vue实例中。

步骤2的具体实现方法为：

2.1在需要用到表单的组件中，先调用步骤1中所属的父组件，并在属性中将表单需要绑定的数据通过v-bind:value绑定，之后再设置相应的样式和其他需要设置的内容。

2.2父组件属性设定完成之后，在父组件内部通过默认插槽调用子组件，将子组件的v-bind:validate-key设置为该表单项所需要校验的数据键值名称，设置完成后在子组件内部编写需要展示的表单项内容，表单项组件绑定的数据v-model需与子组件属性中设置的validate-key指向同一键值。

步骤3的具体实现方法为：

3.1当用户点击“提交”按钮时，表单组件首先判断每个表单项有无错误信息，若有，则直接返回，不向后台提交请求，若没有错误，则向后端发起请求。同时将组件设为“loading”状态，禁止用户在后台数据返回之前修改表单的各项的信息，避免后台返回的错误信息和当前表单项内容不一致的问题。

3.2后端返回数据后，将表单的“loading”状态取消，并允许用户对表单内容进行编辑。

步骤4的具体实现方法为：

4.1后台返回结果后，调用表单组件的setResult()方法，根据后台的返回值来显示不同的信息。

4.2如果后台返回的状态码为“200”，则提示用户本次表单提交成功，并调用数据刷新函数更新视图。如果后台返回的状态码为“400”，则表明用户输入的表单中有数据项未通过后台的校验，则根据后台返回数据的键值，将表单组件中对应键值的错误信息显示出来，提示用户重新输入或选择后再尝试提交。如果后台返回的状态码为其他，则将后台返回的错误信息直接显示到表单最上边的公共错误显示区域来提示用户。

4.3当用户修改了某一项有错误信息的表单项数据时，无论用户输入的内容错误与否，都将该表单项的错误信息清空，当用户再次提交表单时，再根据4.2中的规则进行视图的更新操作。

该vue组件的实现方法是由父组件和子组件组成的，父组件负责表单的整体框架结构，子组件负责定义具体每一个表单项的数据的校验，标签和内容的格式，以及错误信息提示的位置和样式等。

父子组件的内部结构图如图2所示，父组件的实现过程为：

1、新建vue组件文件，在根节点放入form标签，定义公共的form样式，并在form标签内部放入默认的插槽标签slot。

2、定义组件的props属性，该属性决定了用户调用组件时可传入的数据。父组件的props属性包含的参数如下：

3、定义组件的setResult()方法，该方法接收表单提交的http请求的返回结果response，根据后台的返回结果对表单视图进行不同的操作。如果后台返回的状态码为“200”，则提示用户本次表单提交成功，并调用数据刷新函数更新视图。如果后台返回的状态码为“400”，则表明用户输入的表单中有数据项未通过后台的校验，则根据后台返回数据的键值，将表单组件中对应键值的错误信息显示出来，提示用户重新输入或选择后再尝试提交。如果后台返回的状态码为其他，则将后台返回的错误信息直接显示到表单最上边的公共错误显示区域来提示用户。

4、定义组件的reset()方法，该方法将表单绑定的所有属性值清空，并清空所有的校验信息。

5、定义组件的validate()方法，该方法用于用户点击提交按钮时对表单的错误信息进行校验，如果校验失败则阻止本次http请求。

子组件的实现过程为：

1、新建vue组件文件，定义子组件的布局架构和样式规则，定义子组件的表单项内容插槽位置，并插入slot标签。

2、定义子组件的props属性，子组件的props属性参数如下：

3、定义子组件的监听器，即vue组件中的“watch”方法。watch方法监听组件的“error-message”属性，若“error-message”属性有了错误信息，则将子组件的错误信息按照参数中设置的显示方法展现给用户。

4、定义子组件的onChange()方法，该方法在监听到用户更改表单项的数据时，将该表单项的错误信息清空。

综上所述，本发明用vue实现了一个异步校验的表单组件，可以根据提交表单的接口返回的信息来决定校验的成功与否，消除了前后端校验的不一致性，大大增加了开发的效率，提升了用户体验。

Claims (8)

1.一种基于VUE的校验表单组件实现方法，其特征在于：表单组件初始化时定义表单的绑定数据formdata，表单的子组件设置需要校验的数据的key值；用户输入完数据后，通过HTTP请求将数据提交给后端；若数据校验通过，执行相应的操作，并将执行结果返回给前端；若数据校验未通过，则向前端返回错误的键值名称以及错误的信息；前端收到后台返回的结果，若成功则提示操作成功；如果失败，则根据响应的状态码来显示错误信息；如果状态码不为400，则直接显示后台返回的报错信息；如果状态码为400，则根据后台返回的JSON数据将所有的错误信息根据键值显示到相应的表单对象旁。

2.根据权利要求1所述的基于vue的校验表单组件实现方法，其特征在于，具体步骤如下：

步骤1，在vue项目的入口文件main.js中通过import命令引入检验表单组件，并用vue.use方法将组件注入到vue实例中；

步骤2，在需要用到校验表单的部分调用表单组件，并且设置好相应的数据；

步骤3，输入数据后将数据和请求一起提交给后台，等待后台返回请求的结果；

步骤4，后台返回结果后，根据返回的状态码和内容将成功或失败的信息以不同的方式显示给用户。

3.根据权利要求1所属的基于vue的校验表单组件实现方法，其特征在于，步骤1的具体实现方法为：

1.1新建vue组件，编写表单组件的父组件，作为整个表单组件的整体容器，包括表单的整体布局，子组件默认插槽的位置，以及样式规则，需要绑定的表单数据；

1.2新建vue组件，编写表单组件的子组件，作为表单的单个数据校验项，需要绑定的数据为父组件中表单数据对应的键值名称；并在子组件中定义默认插槽的位置，以及错误信息显示标签，以及相应的样式；

1.3在main.js中分别导入父组件和子组件，并将组件注入到vue实例中。

4.根据权利要求1所属的基于vue的校验表单组件实现方法，其特征在于，步骤2的具体实现方法为：

2.1在需要用到表单的组件中，先调用步骤1中所述的父组件，并在属性中将表单需要绑定的数据通过v-bind:value绑定，之后再设置相应的样式和其他需要设置的内容；

2.2父组件属性设定完成之后，在父组件内部通过默认插槽调用子组件，将子组件的v-bind:validate-key设置为该表单项所需要校验的数据键值名称，设置完成后在子组件内部编写需要展示的表单项内容，表单项组件绑定的数据v-model需与子组件属性中设置的validate-key指向同一键值。

5.根据权利要求1所属的基于vue的校验表单组件实现方法，其特征在于，步骤3的具体实现方法为：

3.1表单组件首先判断每个表单项有无错误信息，若有，则直接返回，不向后台提交请求，若没有错误，则向后端发起请求；同时将组件设为“loading”状态，禁止用户在后台数据返回之前修改表单的各项的信息；

3.2后端返回数据后，将表单的“loading”状态取消，并允许用户对表单内容进行编辑。

6.根据权利要求1所述的基于vue的校验表单组件实现方法，其特征在于，步骤4的具体实现方法为：

4.1后台返回结果后，调用表单组件的setResult()方法，根据后台的返回值来显示不同的信息；

4.2如果后台返回的状态码为“200”，则提示本次表单提交成功，并调用数据刷新函数更新视图；如果后台返回的状态码为“400”，则表明用户输入的表单中有数据项未通过后台的校验，则根据后台返回数据的键值，将表单组件中对应键值的错误信息显示出来，提示重新输入或选择后再尝试提交；如果后台返回的状态码为其他，则将后台返回的错误信息直接显示到表单的公共错误显示区域；

4.3当修改了某一项有错误信息的表单项数据时，无论输入的内容错误与否，都将该表单项的错误信息清空，当再次提交表单时，再根据4.2中的规则进行视图的更新操作。

7.根据权利要求1所述的基于vue的校验表单组件实现方法，其特征在于，所述父组件的实现方法为：

1）新建vue组件文件，编写组件的标签，定义组件的块级划分；

2）定义组件各个块的样式以及class；

3）定义组件的默认插槽，用于给子组件以及其他的组件提供渲染出口；

4）定义具名“error”插槽，用于显示表单提交后服务器返回的非字段校验错误，使得用户可以通过具名插槽“error”自定义显示错误信息；若未指定该插槽所在位置渲染的组件，则默认显示表单提交失败时服务器返回的默认错误信息；

5）定义组件的双向绑定数据v-model，将整个表单的每一项的值通过key-value的形式绑定到组件中，使得子组件可以通过key值来查找到每一项对应的数据并进行校验；

6）将组件封装导出。

8.根据权利要求1所述的基于vue的校验表单组件实现方法，其特征在于，所述子组件的实现方法为：

1）校验表单的子组件，需要显示表单每一项的内容，定义组件的块级容器标签；

2）定义组件的默认插槽“slot”，用于显示组件的内容；

3）定义组件的具名插槽“error”，用于显示该表单项是否有错误信息及错误的具体内容；

4）定义组件的prop参数“validate-field”，该字段用来标识组件中需要校验的参数的KEY值，当用户提交表单时通过该字段来获取值进行校验，同时服务器返回结果后也通过该字段来将错误信息显示到相应的位置。

Images