CN113886777B - Configuration method and execution method for Form verification - Google Patents
Configuration method and execution method for Form verification Download PDFInfo
- Publication number
- CN113886777B CN113886777B CN202110996468.0A CN202110996468A CN113886777B CN 113886777 B CN113886777 B CN 113886777B CN 202110996468 A CN202110996468 A CN 202110996468A CN 113886777 B CN113886777 B CN 113886777B
- Authority
- CN
- China
- Prior art keywords
- function
- item
- verification
- server
- plug
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F21/00—Security arrangements for protecting computers, components thereof, programs or data against unauthorised activity
- G06F21/30—Authentication, i.e. establishing the identity or authorisation of security principals
- G06F21/31—User authentication
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/957—Browsing optimisation, e.g. caching or content distillation
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
- G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Engineering & Computer Science (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Computer Security & Cryptography (AREA)
- Data Mining & Analysis (AREA)
- Computer Hardware Design (AREA)
- Stored Programmes (AREA)
Abstract
The invention provides a configuration method and an execution method for Form verification, which are used for solving the problem of convenience in development, and the configuration method comprises the following steps: JavaScript code is configured that includes the following functions: declaring and registering an Element UI component based on the VUE, and initializing an instance of a first plug-in the mount life cycle of the VUE; declaring a form inspection function; html code is configured with the following functions: configuring the value of the prop attribute of each Form-Item in the Form; for each Form-Item in the Form: the value of the prop property is different from the values of the prop properties of other Form-items in the Form, and the Form verification rules of the Form are respectively bound with a third function of the first plug-in instance; the Form check function triggered when the submit button of the configuration Form is clicked to submit. The scheme can reduce the code development amount of research personnel, thereby reducing the research and development time.
Description
Technical Field
The invention belongs to the field of front-end development, in particular to the field of front-end development of Element UI based on VUE.
Background
The Form is a functional module in the web page, and it is common to submit the information input by the user through the Form (Form), and fig. 5-1 shows a common Form, which is used to prompt and guide the user to input when the user registers. The part realizes the collection, verification, prompt and the like of user registration information through the matching of html, css and js.
The page function logic is generally as shown in fig. 5-2. Generally, research and development personnel need to write corresponding input verification codes and corresponding codes for each input box of a Form (Form) from zero, so as to realize the functions of the Form as shown in fig. 5-2, in this functional scenario, different Form elements (for example, input boxes) and prompt elements (for example, prompts corresponding to the input boxes) need to be linked, and different Form elements need to have different verification requirements (for example, some input boxes need to require input data within 1-100, so that a verification method needs to detect a data range and prompt a user to correct input according to the data range input by the user), and meanwhile, the linkage of program logic and the style of the Form elements needs to be considered, and the code amount required to be written by the programmer is very large.
The Element UI is a Web front-end open source component library based on VUE2.0, when a front-end project constructed by the VUE2.0 is used, a beautiful website style can be more easily laid out by importing the Element UI component library, and a plurality of basic components such as buttons, forms, input boxes, drop-down boxes, selection boxes, popup windows and the like are built in the Element UI, so that the time spent by research personnel for unifying different Element styles is reduced. After the native Element UI is introduced to accelerate the development of the website style, 2 methods are available for realizing the form verification function, namely:
the method comprises the following steps: performing the verification locally by the browser;
the method 2 comprises the following steps: and sending the data input by the user in the form items to the server one by one for verification (namely only 1 form item is sent at a time).
The difference of the 2 methods is that the js script of the check function in the method 1 is executed locally by the browser, while the js script of the check function in the method 2 sends data input by the user to the server, and prompts the verification result returned by the server to the user through an alert prompt box or the message of the Element UI component.
The methods 1 and 2 can obtain good native support of the Element UI component by configuring the validator function pointed by the rules of the input box, and then performing local rule check (for example, checking whether a mobile phone number is in accordance with a rule formed by 11 digits) by supporting the js script executed in the validator function, or completing an asynchronous request in the rules function of the current table Element to check (by requesting to specify api to check whether a single field is in accordance with a certain rule), without writing extra complex logic processing.
However, since the user name at the time of registration (for example, to ensure that the registered user name is not used) or some specific forms need to be checked, when we submit all our parameters to the server end uniformly, the server end checks the received data to ensure the validity of the user input, and when the server checks, if some fields (corresponding to Form-Item) are wrong, an error message is returned, and the browser throws out the error message. When there are more Form items (Form-items), we prefer to suggest more friendliness by mapping the corresponding error under the corresponding Form Item (refer to fig. 5-3). In some projects, the server cannot make the browser cache data in advance for verifying whether the user input meets the requirements (for example, a user name cannot be provided to the browser, and a user name registered in a website cannot be provided to the browser) for the reason of preventing information leakage, so that it is necessary to verify the user input information in the server in some forms.
In addition, as the server processes http requests, the following steps are required: the method comprises the steps of starting a link (tcp/ip three-time handshake process), sending a request, waiting (network delay and server processing time), downloading data and returning processing result data, and the number of http requests which need to be responded and processed by a large website is very large, so that the reduction of the number of http requests initiated by the same webpage (which is equivalent to the reduction of concurrency) is very helpful for improving the performance optimization of the server, and after the performance of the server is improved, the server can serve more users or the time for a single user to wait for http response is shorter, so that more economic values are generated. Therefore, for Form requests, in order to guarantee the performance of the server, the components in each Form usually do not submit http requests to initiate Form data verification to the server, but send all the filled data in the Form to the server after the user clicks to send or confirm. And the server returns all verification results after verification. Therefore, the currently preferred approach is:
the method 3 comprises the following steps: all user input information in the form (or at least 2 items of information input by the user and requiring server authentication) is sent to the server for authentication. However, if the method 3 is adopted, a large amount of codes are written by the developer to map the received data one by one under the corresponding table element (as shown in fig. 4-1). Therefore, a plug-in with small multiplexing difficulty and low code writing amount during multiplexing needs to be developed.
Disclosure of Invention
Therefore, on one hand, a Form verification configuration method needs to be provided, which comprises the following steps:
registering an Element UI component based on the VUE, declaring a first variable, initializing the first variable as an instance of a first plug-in the mount life cycle of the VUE, and storing verified data and a result in the instance; the instance of the first plug-in at least comprises a first function for triggering the interface to display the verification result, a second function for returning data and updating the page prompt according to the data by the parsing server, and a third function for obtaining the prop attribute of the Form-Item;
for each Form-Item component in the Form, the value of the prop property of the Form-Item component is different from the values of the prop properties of other Form-Item components in the Form, and the attribute of the Form verification rule is respectively bound with a third function of the first plug-in instance pointed by the first variable;
the submit button configured with Form triggers the Form verification function, where in the Form verification function: and sending data input by a user in each Form-Item to a server for verification, storing a verification result returned by the server in a plug-in instance pointed to by a first variable through a second function, matching page prompt information to be updated of the corresponding Form-Item according to the value of the prop attribute of each Form-Item component and a verification result returned by the server through the first function, and updating the corresponding Form-Item.
Optionally, the data input by the user in each Form-Item is sent to the server for verification, specifically, the data input by the user in each Form-Item is asynchronously sent to the server for verification.
Optionally, configuring a check rule of the at least one Form-Item to further point to a local check function of the browser, wherein the local check function and the third function are transferred in an array Form.
Optionally, the method includes configuring: after the trigger event of the Form-Item component is activated, the content of the trigger cleaning input box is also included.
Optionally, the method further includes a step of configuring and cleaning prompt information corresponding to each Form-item component in the Form verification function.
In a second aspect, the inventor provides a method for executing Form verification, including the steps of:
the method comprises the steps that a webpage script is loaded by a browser, Element UI components based on a VUE are registered, and a first variable is initialized to be an example of a first plug-in unit in the mount life cycle of the VUE;
the instance is used for storing verified data and results, and the instance of the first plug-in at least comprises a first function for triggering an interface to display the verified results and a second function for analyzing the data returned by the server and updating page prompts according to the data; a third function for obtaining the prop property of Form-Item;
when a user defined event of a certain Form-Item in a Form is triggered, triggering a third function to obtain a prop value corresponding to the Form-Item; for each Form-Item component in a Form, its prop property value is a value that is distinct from the other Form-Item prop properties in the Form;
triggering a check function when a submit button of Form is clicked;
wherein in the check function:
sending data input by a user in each Form-Item to a server for verification;
storing the verification result returned by the server in the plug-in instance pointed to by the first variable through a second function;
matching the page prompt information to be updated of the corresponding Form-Item according to the prop attribute value of each Form-Item component and the check result returned by the server through a first function, and updating the corresponding Form-Item.
Optionally, the data input by the user in each Form-Item is sent to the server for verification, and the data input by the user in each Form-Item is asynchronously sent to the server for verification.
Optionally, when a user-defined event of a certain Form-Item in the Form is triggered, a browser local check function corresponding to the Form-Item is also triggered, where the browser local check function is used to detect an input format of the Form-Item.
Optionally, after the trigger event of the Form-Item component is activated, a post-trigger clears the contents of the input box.
Optionally, the method further includes a step of executing a clean-up operation on the hint information corresponding to each Form-item component in the check function.
In a third aspect, the present invention provides a Form verification server, including:
a memory; and
one or more processors in communication with the memory;
the one or more processors are configured to:
generating page content according to a user request, or sending corresponding page content to a browser;
the memory stores one or more page contents therein, including:
a page of JavaScript code that includes the following functions:
declare registration the Element UI component based on VUE,
initializing an instance of a first plug-in a mount lifecycle of the VUE;
declaring a form inspection function;
a page of html code comprising the following functions:
configuring the value of the prop attribute of each Form-Item in the Form; for each Form-Item in the Form: the value of the prop property is different from the values of the prop properties of other Form-items in the Form, and the Form verification rules of the Form are respectively bound with a third function of the first plug-in instance;
configuring a Form check function triggered by a submission button of a Form when the submission button is clicked;
wherein:
the instance of the first plug-in at least comprises a first function for triggering the interface to display the verification result, a second function for analyzing the data returned by the server and triggering and updating the page prompt according to the data, and a third function for obtaining the value of the prop attribute of the Form-Item;
code in the form verification function that invokes the following functions: sending data input by a user in at least two Form-items to a server for verification; after the server returns the verification result, calling a second function, storing the verification result returned by the server in the plug-in instance pointed by the first variable through the second function, and then triggering the first function; and matching the value of the prop attribute of the Form-Item with the key value of the corresponding field in the verification result returned by the server through the first function, and correspondingly updating the page prompt information of the Form-Item according to the result obtained by matching.
Compared with the prior art, the method in the technical scheme has the advantages that the code quantity required to be developed by developers is small, the developers can use the method conveniently, and the logic of the method is clear and convenient for the developers to understand and master.
Drawings
FIG. 1 is a configuration method for Form validation as disclosed herein;
FIG. 2 is a diagram of steps performed in a check function disclosed herein;
3-1 and 3-2 are schematic diagrams of codes developed by developers in an embodiment, wherein FIG. 3-1 and FIG. 3-2 show code segments of the same case;
4-1, 4-2 are schematic diagrams of a developer using prior art code development and maintenance, wherein code segments in the same case are shown in FIGS. 4-1, 4-2;
FIG. 5-1 is a schematic diagram of a form;
FIG. 5-2 is a timing diagram of a form interaction process;
5-3 are a form prompt message display for facilitating interaction.
Detailed Description
To explain technical contents, structural features, and objects and effects of the technical solutions in detail, the following detailed description is given with reference to the accompanying drawings in conjunction with the embodiments.
In this context, an element refers to an HTML tag and an attribute refers to an attribute in the HTML tag. Attributes provide more information about HTML elements, for example, the following code < a href ═ http:// www.w3school.com.cn "> This is a link >, where a is an element and href is an attribute; in the following code < form-item prop { { a.rule, trigger, 'blank' } }/>, form-item is an element, prop, rule are attributes thereof, and a value corresponding to the attribute is equal-sign content. Binding, in this context, has the meaning of an assignment, i.e., is
The Element UI is a set of component library realized by taking VUE2.0 as a basic framework, and a set of component library prepared for developers, designers and product managers provides matched design resources to help rapid development of websites.
The developer can introduce the entire Element or only a portion of the components in the component library as needed. For example, the Form and button components can be partially introduced. As known to those skilled in the art, the introduction of the element ui is introduced by adding an import statement to the js code.
The Form component consists of controls such as an input frame, a selector, a radio frame, a multi-selection frame and the like, and is used for collecting, verifying and submitting data. In the Form components, each Form field is composed of a Form-Item component, and various types of Form controls (also called Form-Item components in the Element UI) including Input, Select, Checkbox, Radio, Switch, DatePicker, and TimePicker can be placed in the Form field.
It should be noted that the configuration method disclosed in the present application corresponds to a usage method of the AsyncErrorStore plug-in (i.e. how the developer uses the plug-in the development process, which belongs to a usage method of a product, specifically, a usage method of a computer software product), and has technical features defined by functions or technical features understandable by those skilled in the art. The Form verification data method disclosed in the application corresponds to an execution method of a computer program and also has corresponding technical characteristics. The above methods are all objects of patent protection.
In the method of the present application, a developer helps a programmer to conveniently develop a Form function required by a user by using a plug-in provided by the present solution, and the configuration method (a configuration process using the plug-in, refer to fig. 3-1 and 3-2) includes:
JavaScript code is configured that includes the following functions:
the first plug-in (AsyncErrorStore) is declared introduced. Declare registration of Element UI components based on the VUE;
configured in mount lifecycle of VUE2.0, initialize an instance of the first plugin, see code asyncErrorStore ═ new asyncErrorStore (this, $ refs. formrefbar in fig. 3-1; where asyncErrorStore is a first variable that, after being assigned, is used to refer to an instance of a first plug-in.
Declare form verification functions (including configuring JavaScript code executed in form verification functions);
the instance of the first plug-in at least comprises a first function (valid, the mode of calling the first function in the code is asyncerrorstore. valid) for triggering the UI interface to display the verification result, a second function (push) for analyzing the data returned by the server and updating the page prompt according to the data triggering, and a third function (rules) for obtaining the value of the prop attribute of the Form-Item;
html code is configured with the following functions:
configuring a value of a prop attribute of each Form-Item in the Form (see prop-xxx in fig. 3-2); for each Form-Item in the Form: the value of the prop property is different from the values of the prop properties of other Form-items in the Form, and the Form verification rule (rule) binds a third function (i.e. binding async error store. rule) belonging to the first plug-in to which the first variable points.
Configuring a Form check function (submitFunction) triggered by a submit button of a Form when being clicked for submission;
the Form check rule (rule) is one of the attributes of Form-Item, and binds the third function (async error store. rule) pointed to by the Form check rule (rule) attribute of the Form-Item component in each Form field, i.e. see the html related lines of similar code in fig. 3-2: rules { [ { validator: async ErrorStore.rules, trigger: 'change' }. After binding a rule method of a rule (rule) attribute of a Form-Item Form as an instance (AsyncErrorStore instance) pointed by a first variable, when a user clicks or modifies the content of the Form-Item, the first instance can obtain the data input by the user in the Form-Item and the value of a prop attribute; the values of the prop attribute of different Form-items are different, which is the basis for implementing the following functions: and after the check error returned by the server is entrusted to the instance pointed by the first variable, updating the prompt information of the corresponding Form-Item according to the prop information data.
The submission button for configuring Form triggers the Form verification function (submitFunction) including: and binding the submit button with a form check function (submitFunction) corresponding to the first variable (specifically, referring to the code: < el-button onClick: { submitFunction () } > submit </el-button > -in fig. 3-2).
The js code in which the following functions are called within the form check function (submiteFunction):
sending data (this. Form. data) input by a user in at least two Form-items to a server for verification;
when the server returns the verification result, calling a second function (async error store. push), so that the verification result returned by the server is stored in the plug-in instance pointed to by the first variable through the second function, and then triggering the first function (async error store. valid); and matching the value of the prop attribute of the Form-Item with the key value of the corresponding field in the verification result returned by the server through the first function, and correspondingly updating the page prompt information of the Form-Item according to the result obtained by matching.
Since the working mechanism of the Element UI is unknown to the non-front-end developer, and the non-front-end developer cannot easily understand what function description defined by the text is converted into the corresponding code (for example, it is not clear what function is executed for each sentence of the code in fig. 3-1 and 3-2, for example, it is not clear which code in 3-1 and 3-2 corresponds to the code description), reading the text alone is likely to result in the impression that the code development amount of the present invention is large, but in reality, when the developer reuses the plug-in, the corresponding code development amount is small, and the illusion impression is generated due to 3 reasons, namely, the limitations of the text character description technology itself, the limitations of the text writing time and the text language ability boundary of the descriptor, and when the developer has not developed the technology in the corresponding field reads the related text, the comprehension ability is marginal and cannot be used as if the technical content of the scheme is quickly, directly and accurately understood through related terms after the technology of the corresponding field is pursued. Since the development process (i.e., the method of using the plug-in) that the text may describe is too abstract, a specific example is provided for understanding, as shown in fig. 3-1 and 3-2, when developing different Form contents, the code that the developer is required to repeatedly develop based on, for example, using the present plug-in, is a darkened, bolded portion, whereas for a code that does not employ the methods disclosed herein, the corresponding code development amount and complexity are shown as the boxed parts in figures 4-1 and 4-2, compared with the plug-in using method disclosed in the application and shown in the figures 3-1 and 3-2 and the method which does not adopt the scheme and is shown in the figure 4-2, the method in the application has the advantages that the code quantity required to be developed by developers is obviously less, the use of the developers is convenient, and the logic of the method is clear and is convenient for the developers to understand and master.
In addition, the method in the application does not need to submit the server verification to each component in the form respectively, reduces the concurrency of the server, enables the server to serve more users or enables the time for a single user to wait for http response to be shorter, and accordingly generates more economic values.
Specifically, in the invention, by using the first plug-in, the collection of the value of the prop attribute of each Form-Item in the Form is realized in the first plug-in, and in some other embodiments, the data input by the user in the Form-Item can also be obtained; and analyzing data returned by the browser through a second function (push) function, so that the corresponding Form-Item is triggered to display a corresponding server verification result through a first function (valid). Based on the above mechanism of the plug-in, the amount of code developed by the developer in the present invention is less than that in the prior art.
It should be understood that, due to the rapid development of the technology, the applicant understands that in the technical field referred to herein, there are some cases where no specific and stable chinese terms or concepts are used to describe some technical features of the present application, and in practice often times the use of code description plug-ins is the most common way for developers to accurately communicate and propagate plug-ins, so there is a great difficulty in converting code into chinese language to describe the scheme. In describing technical features and relationships thereof in the present application, although the language is often organized in a manner of function definition, although the writer has great strength to overcome possible ambiguities, the description is still insufficient, and the reader needs to repeatedly understand the meaning and scope of the content of the chinese part in the text in combination with the context and part of the public codes.
According to the functional description, it can be known that examples of the first plug-in include a plurality of methods (valid, push, clear, rule, etc., the methods in the plug-in are also referred to as functions), and the functions include at least a first function (valid) for triggering the interface to display the verification result and a second function (push) for parsing the server to return data and updating the page prompt according to the data; and the user obtains a third function (rules) of the prop property of the Form-Item; the clear method is used for clearing the prompt information corresponding to each Form-item component. The skilled person knows the function and implementation of the function in the corresponding first plug-in from the corresponding functional description, but knows the specific implementation of the function comprised in the first plug-in, and therefore this skilled person knows how the first plug-in is implemented, and therefore the disclosure herein for the first plug-in is sufficient.
The execution process of the code is also different from the prior art, and the difference is mainly that the number of times of requesting the server is reduced, the analysis and the UI mapping of the result of the server verification are entrusted to the instance of the first plug-in, and the first plug-in manages the check result returned by the server and realizes the update to the corresponding form-item.
Specifically, referring to fig. 1 and 2, the execution process of the code is as follows: in the process of loading the webpage, the browser loads a webpage script, and in a mount life cycle of the VUE2.0, initializes a first variable to be an instance of a first plug-in (an instance AsyncErrorStore of the AsyncErrorStore), wherein the first variable instance (AsyncErrorStore) comprises a plurality of methods (valid, push, clear, and run.), for example, a first function (valid) for triggering an interface to display a check result and a second function (push) for analyzing server to return data and updating a page prompt according to the data, and a third function (run) for obtaining a value of a prop attribute of the Form-Item;
a check method (async error store. rules) of the first plug-in instance pointed by the check rule (rules) of the Form-Item component in each Form field, namely a rule method that the local validator function bound with the Form-Item component is the first variable instance (async error store), so that the purpose of transmitting the value of the prop of the Form-Item to the async error store is realized, and when the check result returned by the server, the corresponding Form-Item can be found according to the prop information data, thereby correctly updating the prompt information of the corresponding Form-Item. The submission button is bound with a form verification function (submitFunction), and the execution in the form verification function comprises the following steps: clearing error prompt information (optional) corresponding to each Form-item component; and asynchronously calling a server check interface through the instance, returning a processing result by the analysis server, and updating the page by a validate method in the instance pointed by the first variable. And updating the prompt information of the corresponding Form-Item according to the prop information data after the check error returned by the server is delegated to the first variable instance.
When a user-defined event of a certain Form-Item in a Form is triggered (the user-defined event can be triggered after data is input by a user or after the input data is modified), triggering a third function to obtain a value of a prop attribute corresponding to the Form-Item; for each Form-Item in a Form, the value of its prop attribute is a value that is distinct from the prop attributes of the other Form-items in the Form;
when a user clicks a submit button (which usually occurs after the user inputs data in a Form), the execution of the submit button is triggered to trigger a Form verification function (submitFunction), and the steps executed in the Form verification function include:
sending the data input by the user to a server for verification; when the server returns the verification result, calling a second function, storing the verification result returned by the server in the plug-in instance pointed by the first variable through the second function, and then triggering the first function; therefore, the value of the prop attribute of the Form-Item is matched with the key value of the corresponding field in the verification result returned by the server through the first function, and the page prompt information of the Form-Item is correspondingly updated according to the result obtained through matching.
In some embodiments, the server check interface is asynchronously called in the form check function (submitFunction), so that the blocking of the page is reduced, and the fluency of the user network experience is increased.
In some embodiments, the method further comprises emptying the form to input content or error prompt information before the configuration is checked by the submission server. The method also specifies another function (called herein as a second check function of the Form-Item) for locally checking the Form-Item by specifying in the rule of the Form-Item, besides the asyncerrorltore. In the execution phase, if a user-defined event triggers (e.g., the user defines that the content of a Form-Item changes as a trigger event), the function pointed to by the array of rules passed to the Form-Item is executed sequentially.
In some embodiments, the Form check function (submitFunction) is configured to clear error prompt information corresponding to each Form-item component.
The method can be realized by adding a clear function in the submitFunction and can also be realized by transferring a corresponding empty check result to the push method of the first plug-in.
When the user-defined event of the first Form-Item in the Form is triggered, a fourth function corresponding to the Form-Item is also triggered, and the fourth function is executed locally in the browser, so that whether the input format of the Form-Item conforms to a specified format in the fourth function is detected. Local execution means that no interface to the requesting third party needs to be invoked. It is understood that any Form-Item in the Form can be the first Form-Item.
It should be noted that, although the above embodiments have been described herein, the invention is not limited thereto. Therefore, based on the innovative concepts of the present invention, the technical solutions of the present invention can be directly or indirectly applied to other related technical fields by making changes and modifications to the embodiments described herein, or by using equivalent structures or equivalent processes performed in the content of the present specification and the attached drawings, which are included in the scope of the present invention.
Claims (11)
1. A configuration method for Form verification comprises the following steps:
JavaScript code is configured that includes the following functions:
declare registration the Element UI component based on VUE,
during the mount lifecycle of the VUE, an instance of the first plug-in is initialized,
declaring a form inspection function;
html code is configured with the following functions:
configuring the value of the prop attribute of each Form-Item in the Form, wherein for each Form-Item in the Form, the value of the prop attribute is different from the values of the prop attributes of other Form-items in the Form, the Form verification rules of the Form respectively bind the third function of the first plug-in instance,
configuring a Form check function triggered by a submission button of a Form when the submission button is clicked;
wherein:
the example of the first plug-in at least comprises a first function, a second function and a third function, wherein the first function is used for triggering an interface to display a verification result, the second function is used for analyzing the data returned by the server and updating the page prompt according to the data, and the third function is used for obtaining the value of the Prop attribute of the Form-Item;
code in the form verification function that invokes the following functions: sending data input by a user in at least two Form-items to a server for verification; and after the server returns the verification result, calling a second function, storing the verification result returned by the server in the plug-in instance pointed by the first variable through the second function, then triggering the first function, matching the value of the prop attribute of the Form-Item with the key value of the corresponding field in the verification result returned by the server through the first function, and correspondingly updating the page prompt information of the Form-Item according to the matched result.
2. The method according to claim 1, wherein the data input by the user in the at least two Form-items is sent to the server for verification, and specifically, the data input by the user in the at least two Form-items is asynchronously sent to the server for verification.
3. The method of claim 1, further comprising configuring a Form validation rule binding fourth function for at least one of the Form-items, the fourth function being executed locally by the browser.
4. The method of claim 1, comprising configuring JavaScript code that includes:
in declaring the Form verification function, after the trigger event of the Form-Item component is activated, data triggering the cleaning of user input in the Form-Item is also included.
5. The method of claim 1, comprising configuring JavaScript code that includes: cleaning the prompt information corresponding to each Form-item assembly in the Form check function;
the instance of the first plug-in includes at least a fourth function;
and the fourth function and the third function are transmitted to the form verification rule of the form-Item through a corresponding interface in an array form.
6. A method for executing Form verification comprises the following steps:
loading a webpage script by a browser, registering an Element UI component based on the VUE, and initializing an instance of a first plug-in unit in the mount life cycle of the VUE;
the instance of the first plug-in comprises at least a first function for triggering the interface to display a verification result, a second function for parsing the data returned by the server and updating the page prompt according to the data, and a third function for obtaining the value of the prop attribute of the Form-Item;
when a user defined event of a first Form-Item in a Form is triggered, triggering a third function to obtain a value of a prop attribute corresponding to the first Form-Item; for each Form-Item in a Form, the value of its prop attribute is distinct from the values of the prop attributes of the other Form-items in the Form;
when a submit button of Form is clicked, triggering a Form check function;
thereby triggering the execution of the JavaScript code in the form check function: sending the data input by the user to a server for verification; when the server returns the verification result, calling a second function, and storing the verification result returned by the server in the instance of the first plug-in through the second function; and after the instance of the first plug-in obtains the verification result, triggering a first function, so that the value of the prop attribute of the Form-Item is matched with the key value of the corresponding field in the verification result returned by the server through the first function, and the page prompt information of the Form-Item is correspondingly updated according to the result obtained by matching.
7. The method of claim 6, wherein the sending the user-entered data to the server is configured to asynchronously send the user-entered data in each Form-Item to the server for verification.
8. The method of claim 6, wherein when the user-defined event of the first Form-Item in the Form is triggered, a fourth function corresponding to the Form-Item is also triggered, and the fourth function is executed locally in the browser for detecting whether the input format of the Form-Item conforms to a specified format in the fourth function.
9. The method of claim 6, comprising the step of triggering the cleaning of user-entered data in a Form-Item upon activation of a trigger event in the Form-Item component.
10. The method of claim 6, further comprising the step of performing a clean-up procedure for the hint information associated with each Form-Item component in the verification function.
11. A server for Form validation, comprising:
a memory; and
one or more processors in communication with the memory;
the one or more processors are configured to:
generating page content according to a user request, or sending corresponding page content to a browser;
the memory stores one or more page contents therein, including:
a page of JavaScript code that includes the following functions:
declare registration of the VUE-based Element UI component,
initializing an instance of a first plug-in during a mount lifecycle of the VUE;
declaring a form inspection function;
a page of html code comprising the following functions:
configuring the value of the prop attribute of each Form-Item in the Form; for each Form-Item in the Form: the value of the prop property is different from the values of the prop properties of other Form-items in the Form, and the Form verification rules of the Form are respectively bound with a third function of the first plug-in instance;
configuring a Form check function triggered by a submission button of a Form when the submission button is clicked;
wherein:
the instance of the first plug-in at least comprises a first function, a second function and a third function, wherein the first function is used for triggering the interface to display the verification result, the second function is used for analyzing the data returned by the server and updating the page prompt according to the data, and the third function is used for obtaining the value of the Prop attribute of the Form-Item;
code in the form verification function that invokes the following functions: sending data input by a user in at least two Form-items to a server for verification; after the server returns the verification result, calling a second function, storing the verification result returned by the server in the plug-in instance pointed by the first variable through the second function, and then triggering the first function; and matching the value of the prop attribute of the Form-Item with the key value of the corresponding field in the verification result returned by the server through the first function, and correspondingly updating the page prompt information of the Form-Item according to the result obtained by matching.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110996468.0A CN113886777B (en) | 2021-08-27 | 2021-08-27 | Configuration method and execution method for Form verification |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110996468.0A CN113886777B (en) | 2021-08-27 | 2021-08-27 | Configuration method and execution method for Form verification |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113886777A CN113886777A (en) | 2022-01-04 |
| CN113886777B true CN113886777B (en) | 2022-06-07 |
Family
ID=79011193
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110996468.0A Active CN113886777B (en) | 2021-08-27 | 2021-08-27 | Configuration method and execution method for Form verification |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113886777B (en) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106990952A (en) * | 2017-02-28 | 2017-07-28 | 福建天泉教育科技有限公司 | Form validation method and its system based on Vue.js |
| CN108959211A (en) * | 2017-05-18 | 2018-12-07 | 北京京东尚科信息技术有限公司 | The method and apparatus of form validation |
| CN110555025A (en) * | 2019-08-29 | 2019-12-10 | 中邮科通信技术股份有限公司 | method and system for realizing WEB form custom field |
| CN110598152A (en) * | 2019-09-11 | 2019-12-20 | 成都安恒信息技术有限公司 | JavaScript-based Form event extension method |
| CN111338746A (en) * | 2019-12-31 | 2020-06-26 | 南京控维通信科技有限公司 | VUE-based method for realizing single component of check meter |
| CN111832272A (en) * | 2020-07-20 | 2020-10-27 | 苏州易卖东西信息技术有限公司 | Method for realizing form nesting form function based on element-ui |
| CN112835578A (en) * | 2021-01-28 | 2021-05-25 | 观脉科技(北京)有限公司 | Bundle file generation method and storage medium |
| CN113051170A (en) * | 2021-04-01 | 2021-06-29 | 深圳市特游网文化技术有限公司 | Verification system and method for webpage form control |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102413162A (en) * | 2011-07-29 | 2012-04-11 | 互动在线（北京）科技有限公司 | Website front-end verification method and device |
| CN109783751A (en) * | 2018-12-14 | 2019-05-21 | 平安普惠企业管理有限公司 | Form validation method and terminal device |
-
2021
- 2021-08-27 CN CN202110996468.0A patent/CN113886777B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106990952A (en) * | 2017-02-28 | 2017-07-28 | 福建天泉教育科技有限公司 | Form validation method and its system based on Vue.js |
| CN108959211A (en) * | 2017-05-18 | 2018-12-07 | 北京京东尚科信息技术有限公司 | The method and apparatus of form validation |
| CN110555025A (en) * | 2019-08-29 | 2019-12-10 | 中邮科通信技术股份有限公司 | method and system for realizing WEB form custom field |
| CN110598152A (en) * | 2019-09-11 | 2019-12-20 | 成都安恒信息技术有限公司 | JavaScript-based Form event extension method |
| CN111338746A (en) * | 2019-12-31 | 2020-06-26 | 南京控维通信科技有限公司 | VUE-based method for realizing single component of check meter |
| CN111832272A (en) * | 2020-07-20 | 2020-10-27 | 苏州易卖东西信息技术有限公司 | Method for realizing form nesting form function based on element-ui |
| CN112835578A (en) * | 2021-01-28 | 2021-05-25 | 观脉科技(北京)有限公司 | Bundle file generation method and storage medium |
| CN113051170A (en) * | 2021-04-01 | 2021-06-29 | 深圳市特游网文化技术有限公司 | Verification system and method for webpage form control |
Non-Patent Citations (4)
| Title |
|---|
| vue elementui form表单验证的实现;大象的脖子很长;《https://www.jb51.net/article/150581.htm》;20181111;全文 * |
| vue/element ui form validation;stack overflow;《https://stackoverflow.com/questions/55011675/vue-element-ui-form-validation》;20190306;全文 * |
| Vue+Elementui+Echarts在项目管理平台中的应用;王志文;《山西科技》;20201120;第35卷(第6期);第45-47页 * |
| 二：Vue之ElementUI Form表单校验;常强君;<https://www.cnblogs.com/liaochangqiang/p/11543675.html>;20190918;全文 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113886777A (en) | 2022-01-04 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10592319B2 (en) | API notebook tool | |
| US8150939B1 (en) | Method and system for wrapping and componentizing javascript centric widgets using java components | |
| CN110806863A (en) | Interface document generation method and device, electronic equipment and storage medium | |
| CN105872083A (en) | Method and system supporting server access by different types of clients as well as server | |
| US8490052B2 (en) | Declarative programming model for authoring and execution control and data flow for resource oriented system | |
| US7788341B1 (en) | Displaying results of server-side form validations without page refresh | |
| US8533666B2 (en) | Interactive design environments to visually model, debug and execute resource oriented programs | |
| US10148794B1 (en) | Methods, systems, and articles of manufacture for configuration-based client-side resource resolution framework for customizable user experience | |
| EP2580677B1 (en) | Web site implementation by mapping expression evaluation | |
| US20080098028A1 (en) | Method and apparatus for generating a dynamic web page | |
| US7509584B2 (en) | Dynamic ECMAScript class loading | |
| US8863083B2 (en) | Presenting user interfaces based on messages | |
| US9602329B1 (en) | Dynamic remote procedure call | |
| US20160246702A1 (en) | Using emulation to disassociate verification from stimulus in functional test | |
| Ricca et al. | Construction of the system dependence graph for web application slicing | |
| US20090210748A1 (en) | Methods and systems to test airline information systems | |
| CN113886777B (en) | Configuration method and execution method for Form verification | |
| Gómez et al. | Profiling the publish/subscribe paradigm for automated analysis using colored Petri nets | |
| CN115408009A (en) | Code file generation method, device, equipment and storage medium | |
| CN111399842A (en) | Code compiling method and device | |
| Maezawa et al. | Automated verification of pattern-based interaction invariants in Ajax applications | |
| Brunner | JSP: Practical Guide for Programmers | |
| Gupta | Accelerated GWT: Building Enterprise Google Web Toolkit Applications | |
| Balat | Rethinking traditional web interaction: Theory and implementation | |
| WO2004109503A2 (en) | System and method for asynchronous resource management |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20220928 Address after: 226004 Room 1201, Building 13A, Zilang Science and Technology City, No. 60 Chongzhou Avenue, Xiaohai Street, Development Zone, Nantong City, Jiangsu Province Patentee after: Guanmai Interactive Technology (Nantong) Co.,Ltd. Address before: Room 407, 4 / F, building 2, No.1 and 3, Qinglong Hutong, Dongcheng District, Beijing Patentee before: Guanmai Technology (Beijing) Co.,Ltd. |
|
| TR01 | Transfer of patent right |