Unlock instant, AI-driven research and patent intelligence for your innovation.

Form verification method and system based on vue.js

A verification method and form technology, applied in the verification field, can solve problems such as insufficient reusability, and achieve the effect of maintaining scalability, easy maintenance, and improving development efficiency

Active Publication Date: 2020-08-18
FUJIAN TIANQUAN EDUCATION TECH LTD
View PDF6 Cites 0 Cited by
  • Summary
  • Abstract
  • Description
  • Claims
  • Application Information

AI Technical Summary

Problems solved by technology

In the management background system, a large number of business scenarios of addition, deletion, modification and query still need to write a large number of html codes, and the reusability is still slightly insufficient

Method used

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
View more

Image

Smart Image Click on the blue labels to locate them in the text.
Viewing Examples
Smart Image
  • Form verification method and system based on vue.js
  • Form verification method and system based on vue.js
  • Form verification method and system based on vue.js

Examples

Experimental program
Comparison scheme
Effect test

Embodiment 1

[0091] Please refer to figure 2 , Embodiment one of the present invention is: a kind of form verification method, described method is based on the open source framework of Vue.js, comprises the following steps:

[0092] S101: Create a form element component; specifically, use the componentization feature of Vue.js to create a form element component.

[0093] S102: Preset verification rule information corresponding to the form element component; the verification rule may be a necessity verification, a length limit verification, a null verification, and the like.

[0094] S103: Determine whether the input value of a form element component has changed, and if so, execute step S104. The reason for the change may be due to user re-entry or other means.

[0095] S104: Verify the input value of the form element component according to the verification rule information corresponding to the form element component.

[0096] S105: Determine whether the input value conforms to the veri...

Embodiment 2

[0102] This embodiment is a further extension of Embodiment 1.

[0103] Such as image 3 As shown, after the form element component is created in step S101, the following steps are also included:

[0104] S201: Create a form container component and a form element adapter; specifically, also use the componentization feature of Vue.js to create. Among them, the form easy component provides two attribute input parameters, one is the configuration information parameter, and the required form element component is rendered according to the parameter information, such as error message, form element type name, etc., and can also include preset verification rule information; The other is the form initial data parameter, which is used to restore and display the saved form data.

[0105] S202: Register the form element component with the form container component through the form element adapter. The form element adapter uses the is attribute that comes with vue.js to dynamically rende...

Embodiment 3

[0121] This embodiment is a specific application scenario of the foregoing embodiments.

[0122] Based on the open source framework of Vue.js, create and register a form validation plug-in, which will identify a certain form container component through the validator attribute, and traverse all form element components under the form container component from top to bottom, in the init life of the component Periodically register a $validate method and $validation attribute for each form element component, and $validation is used to store the verification result.

[0123] Create a CFormCell component, that is, a form element adapter. The content of this component uses a component component with an is attribute, plus a span tag for displaying error information. The specific form element type is passed in from the outside, and the component component instantiates the specific component according to the type.

[0124] Create the CForm.vue component, which is the form container compo...

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

PUM

No PUM Login to View More

Abstract

The invention provides a Vue.js-based form verification method and system. The method comprises the steps of creating form element components; presetting verification rule information corresponding to the form element components; if an input value of a form element component changes, verifying the input value of the form element component according to the verification rule information corresponding to the form element component. By associating form elements with verification rules and error information, the performance of form verification can be greatly improved; compiling of html codes is basically not needed and forms can be created and a form verification function can be fulfilled only by defining simple Vue.js objects, so that the codes are easy to maintain and extendibility is maintained; form element components and verification rules can be defined by users, so that the development efficiency is greatly increased.

Description

technical field [0001] The invention relates to the technical field of verification, in particular to a Vue.js-based form verification method and system thereof. Background technique [0002] Most of the commonly used form validations are based on jQuery. There is a vue-validator (vue validator) based on Vue.js on the market. The core implementation of vue-validator is to bind the rules to the Vue.js instance, and check and report errors from the rules taken from the Vue.js instance. [0003] jQuery is a library for DOM operations, while Vue.js is data-driven. Vue.js' performance and componentization capabilities are stronger than jQuery. Vue-validator supports most form validation scenarios, but form elements, error messages, and validation rules are all independent. In the management background system, a large number of business scenarios of addition, deletion, modification and query still need to write a large number of html codes, and the reusability is still slightly...

Claims

the structure of the environmentally friendly knitted fabric provided by the present invention; figure 2 Flow chart of the yarn wrapping machine for environmentally friendly knitted fabrics and storage devices; image 3 Is the parameter map of the yarn covering machine
Login to View More

Application Information

Patent Timeline
no application Login to View More
Patent Type & Authority Patents(China)
IPC IPC(8): G06F8/38G06F40/12
CPCG06F8/38G06F40/12
Inventor 刘德建念秦王国栋方振华郭玉湖
Owner FUJIAN TIANQUAN EDUCATION TECH LTD