Form asynchronous verification method and device based on Vue component, electronic equipment and storage medium

Abstract

This application relates to a method, apparatus, electronic device, and storage medium for asynchronous form validation based on Vue components, comprising: obtaining an asynchronous form validation task, wherein the asynchronous form validation task is obtained by parsing and constructing a schema configuration file through Vue components in the Vue.js architecture; obtaining multiple fields of the form to be validated asynchronously in the form validation task, and constructing a Promise chain for each field to be validated that has dependencies; performing asynchronous validation on the form validation task based on the Vue.js architecture, wherein when the asynchronous validation process reaches the asynchronous validation of each field to be validated that has dependencies, the field validation operation is performed through the Promise chain of each field to be validated that has dependencies; and determining the asynchronous validation result of the form validation task based on the asynchronous validation result of each field to be validated. The above method can decouple the validation rules from the Vue components.

Description

Technical Field

[0001] This application relates to the field of form validation processing technology, and in particular to a method, apparatus, electronic device, and storage medium for asynchronous form validation based on Vue components. Background Technology

[0002] Traditional asynchronous form validation, when the validation rules are tightly coupled with the template, directly embeds the asynchronous validation logic into the form component's `rules` property or `methods`. This asynchronous validation logic is directly defined in the Vue component instance, strongly bound to the component's template, lifecycle, data, and other rendering logic. This makes the validation logic unreusable, untestable, and unmanageable. Furthermore, linked validation in complex forms requires waiting for all dependent fields to update, resulting in validation timing issues. Summary of the Invention

[0003] Therefore, it is necessary to provide a method, device, electronic device, and storage medium for asynchronous form validation based on Vue components to address the aforementioned technical issues. This method can decouple validation rules from Vue components and implement timing control of dependent fields through a Promise chain.

[0004] According to a first aspect of certain exemplary embodiments of this application, a method for asynchronous form validation based on Vue components is provided, comprising: in response to a task validation operation, obtaining an asynchronous form validation task, wherein the asynchronous form validation task is obtained by parsing a Schema configuration file through a Vue component of the Vue.js architecture and constructing it based on the parsing result, the Schema configuration file containing asynchronous form validation rules; obtaining multiple fields of the form to be validated in the form validation task, and constructing a Promise chain for each field to be validated that has field dependencies; performing asynchronous validation on the form validation task based on the Vue.js architecture, wherein when the asynchronous validation process reaches the asynchronous validation of each field to be validated that has field dependencies, a field validation operation is performed through the Promise chain of each field to be validated that has field dependencies; and determining the asynchronous validation result of the form validation task based on the asynchronous validation result of each field to be validated.

[0005] Preferably, the asynchronous form validation rules in the Schema configuration file include basic rules for asynchronous form validation and cross-field dependency rules; wherein, the Promise chain of each field to be asynchronously validated that has field dependencies is constructed based on the cross-field dependency rules.

[0006] Preferably, the basic rules for asynchronous form validation include rules for validation fields and configuration rules for UI components. The rules for validation fields are used to specify multiple fields in the form to be validated asynchronously, as well as the asynchronous validation rules for each field. The configuration rules for UI components are used to specify the component properties and placeholder text of the Vue.js architecture, so that the Vue.js architecture can identify Vue components based on component properties and construct the asynchronous form validation task through Vue components and placeholder text.

[0007] Preferably, a method for asynchronous form validation based on Vue components further includes: responding to a user's construction operation of an asynchronous form validation task, identifying the user event corresponding to the construction operation; obtaining a schema configuration file based on the user event; constructing an asynchronous form validation task based on the schema configuration file and using Vue components in the Vue.js architecture; confirming the priority of the asynchronous form validation task based on the user event; adding the asynchronous form validation task to the corresponding priority queue based on the priority of the asynchronous form validation task; and obtaining the asynchronous form validation task, including: obtaining the asynchronous form validation task from the corresponding priority queue based on the task scheduler.

[0008] Preferably, the asynchronous form validation task is added to the corresponding priority queue based on its priority, including: if the asynchronous form validation task has a high priority, it is added to the high priority queue; if the asynchronous form validation task has a normal priority, it is added to the normal priority queue; if the asynchronous form validation task has a low priority, it is added to the low priority queue; wherein, high priority, normal priority, and low priority are pre-configured in descending order based on task priority; the task scheduler obtains the asynchronous form validation task from any of the high priority, normal priority, and low priority queues based on the task priority.

[0009] Preferably, obtaining multiple fields to be asynchronously validated in the form validation task includes: collecting multiple fields to be validated in the form validation task; filtering one or more unmodified fields from the multiple fields to be validated, and obtaining multiple fields to be validated after filtering; and obtaining multiple fields to be asynchronously validated from the multiple fields to be validated.

[0010] Preferably, asynchronous validation of form validation tasks based on the Vue.js architecture includes: using concurrency control to process multiple asynchronous validation subtasks of fields to be asynchronously validated in parallel, configuring the execution status of each asynchronous validation subtask of each field to be asynchronously validated based on the asynchronous validation progress of each field to be asynchronously validated, and synchronizing the execution status of each asynchronous validation subtask of each field to be asynchronously validated through Vuex, so that multiple components in the Vue.js architecture can identify the execution status of each asynchronous validation subtask of each field to be asynchronously validated.

[0011] According to a second aspect of certain exemplary embodiments of this application, an asynchronous form validation apparatus based on Vue components is provided, comprising: a validation task acquisition module, configured to acquire an asynchronous form validation task in response to a task validation operation, wherein the asynchronous form validation task is obtained by parsing a Schema configuration file using Vue components of the Vue.js architecture and constructing it based on the parsing result, and the Schema configuration file contains asynchronous form validation rules; an asynchronous validation field acquisition module, configured to acquire multiple fields to be asynchronously validated in the form to be validated in the form validation task, and construct a Promise chain for each field to be asynchronously validated that has field dependencies; a task asynchronous validation module, configured to perform asynchronous validation on the form validation task based on the Vue.js architecture, and when the asynchronous validation process reaches the asynchronous validation of each field to be asynchronously validated that has field dependencies, execute the field validation operation through the Promise chain of each field to be asynchronously validated that has field dependencies; and a form asynchronous validation result determination module, configured to determine the asynchronous validation result of the form validation task based on the asynchronous validation result of each field to be asynchronously validated.

[0012] According to a third aspect of certain exemplary embodiments of this application, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the computer program to implement the steps of any of the above methods.

[0013] According to a fourth aspect of certain exemplary embodiments of this application, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the steps of any of the methods described above.

[0014] The aforementioned method, apparatus, electronic device, and storage medium for asynchronous form validation based on Vue components include: responding to a task validation operation by obtaining an asynchronous form validation task, wherein the asynchronous form validation task is constructed by parsing a Schema configuration file using Vue components within the Vue.js architecture, and the Schema configuration file contains asynchronous form validation rules; obtaining multiple fields of the form to be validated in the form validation task, and constructing a Promise chain for each field that has dependencies on the asynchronously validated fields; performing asynchronous validation on the form validation task based on the Vue.js architecture, and when the asynchronous validation process reaches the asynchronous validation of each field that has dependencies on the asynchronously validated fields, executing the field validation operation through the Promise chain of each field that has dependencies on the asynchronously validated fields; and determining the asynchronous validation result of the form validation task based on the asynchronous validation result of each field that has been asynchronously validated. Therefore, by configuring asynchronous form validation rules through a Schema configuration file, and having the Vue components within the Vue.js architecture parse and construct the asynchronous form validation task, the validation rules are decoupled from the Vue components. Furthermore, the timing control of dependent fields is achieved through the Promise chain. Attached Figure Description

[0015] Figure 1 This is a flowchart illustrating an asynchronous form validation method based on Vue components, as shown in some exemplary embodiments of this application. Figure 2 This is a flowchart illustrating the verification execution logic for multiple fields to be verified in some exemplary embodiments of this application; Figure 3 This is a flowchart illustrating an asynchronous form validation method based on Vue components in some specific embodiments of this application; Figure 4 This is a flowchart illustrating the validation logic of an asynchronous form validation task in some exemplary embodiments of this application; Figure 5 This is a structural block diagram of an asynchronous form validation device based on Vue components in some other exemplary embodiments of this application; Figure 6 This is a diagram of the internal structure of an electronic device in some other exemplary embodiments of this application. Detailed Implementation

[0016] To make the objectives, technical solutions, and advantages of this application clearer, the following detailed description is provided in conjunction with the accompanying drawings and embodiments. It should be understood that the specific embodiments described herein are merely illustrative and not intended to limit the scope of this application.

[0017] The following detailed descriptions are provided to aid the reader in gaining a comprehensive understanding of the methods, apparatus, electronic devices, storage media, and / or computer program products described herein. However, after understanding the disclosure of this application, various changes, modifications, and equivalents of the methods, apparatus, storage media, and / or computer program products described herein will become apparent. For example, the order of operations described herein is merely illustrative and is not limited to those orders set forth herein, but may be changed as will become clear after understanding the disclosure of this application, except for operations that must occur in a specific order. Furthermore, for clarity and conciseness, descriptions of features known in the art may be omitted.

[0018] The features described herein may be implemented in different forms and should not be construed as limited to the examples described herein. Rather, the examples described herein are provided only to illustrate some of the many feasible ways of implementing the methods, electronic devices, and / or storage media described herein, many of which will become clear upon understanding this application.

[0019] The terminology used herein is for the purpose of describing various examples only and is not intended to limit disclosure. Unless the context clearly indicates otherwise, the singular form is intended to include the plural form as well. The terms “comprising,” “including,” and “having” indicate the presence of the described features, quantities, operations, components, elements, and / or combinations thereof, but do not exclude the presence or addition of one or more other features, quantities, operations, components, elements, and / or combinations thereof. Unless otherwise stated, “ / ” means “or,” for example, A / B can mean A or B; “and / or” in the text is merely a description of the relationship between related objects, indicating that three relationships can exist, for example, A and / or B can mean: A alone, A and B simultaneously, and B alone. Furthermore, in the description of embodiments of the invention, “multiple” means two or more.

[0020] Unless otherwise defined, all terms used herein (including technical and scientific terms) shall have the same meaning as commonly understood by one of ordinary skill in the art to which this application pertains upon understanding this application. Unless expressly defined herein, terms (such as those defined in a general dictionary) shall be interpreted as having a meaning consistent with their meaning in the context of the relevant field and in this application, and shall not be interpreted in an idealized or overly formalistic manner.

[0021] It should be noted that the terms "first," "second," etc., used in the specification, claims, and accompanying drawings of this application are used to distinguish similar objects and are not necessarily used to describe a specific order or sequence. It should be understood that such data can be interchanged where appropriate so that the embodiments of this application described herein can be implemented in orders other than those illustrated or described herein. The embodiments described in some of the following exemplary embodiments do not represent all embodiments consistent with this application. Rather, they are merely examples of apparatuses and methods consistent with some aspects of this application as detailed in the appended claims.

[0022] Furthermore, in the description of the examples, detailed descriptions of well-known related structures or functions will be omitted when it is believed that such detailed descriptions would lead to a vague interpretation of this application.

[0023] In the following description, embodiments will be described in detail with reference to the accompanying drawings. However, embodiments may be implemented in various forms and are not limited to the examples described herein.

[0024] Definitions of abbreviations and key terms: JSON Schema: A declarative language based on the JSON format for describing and validating the structure and content of JSON data. It is itself a JSON document that uses a series of predefined keywords to define the constraints, formats, and relationships that data should satisfy.

[0025] Promise chaining: A programming pattern that sequentially links multiple asynchronous operations together by calling the `.then()`, `.catch()`, or `.finally()` methods. The return value of each method in the chain becomes the input of the next method.

[0026] Debouncing: A programming technique used to limit the frequency of function execution. Its core principle is that when an event is frequently triggered, the function does not execute immediately, but waits for a predetermined delay after the event stops triggering. If the event is not triggered again within this time, the function is executed one last time. If the event is triggered again within this time, the timer is reset.

[0027] In some exemplary embodiments of this application, an asynchronous form validation method based on Vue components is provided. For example... Figure 1 This illustrates an asynchronous form validation method based on Vue components, comprising the following steps: Step S101: In response to the task validation operation, obtain the form asynchronous validation task. The form asynchronous validation task is obtained by parsing the Schema configuration file through the Vue component of the Vue.js architecture and constructing it based on the parsing result. The Schema configuration file contains the form asynchronous validation rules.

[0028] In this embodiment, Vue components are the core building blocks of the Vue.js architecture, essentially reusable and independent code blocks. Specifically, a Vue component consists of three parts: a template layer, a logic layer, and a style layer. The logic for asynchronous form validation is mainly defined in the logic layer, while view interactions are implemented in the template layer. The core of complex form asynchronous validation is: defining rules for validation → binding form data to the model → triggering validation via `validate()`. Here, `rules` is essentially an object that defines the validation conditions (required, length, format, etc.) for each field in the form (such as username and password). `model` refers to the data bound to the template. <el-form>The `:model` property is a reactive object that stores the real-time values ​​of all input fields in the form. It serves as the "validation object" for form validation, where validation rules apply to the fields within this object. `validate()` is a built-in method provided by the form instance, i.e., the validation method. In this embodiment, a JSON-formatted schema configuration file describes the asynchronous form validation rules. The Vue component within the Vue.js architecture parses the schema configuration file and constructs the asynchronous form validation task based on the parsing results, thus decoupling the validation rules from the UI components.

[0029] In one example of this embodiment, the asynchronous form validation rules in the schema configuration file include basic rules for asynchronous form validation and cross-field dependency rules; wherein, the Promise chain of each field to be asynchronously validated that has field dependencies is constructed based on the cross-field dependency rules.

[0030] Furthermore, the basic rules for asynchronous form validation include rules for validating fields and configuration rules for UI components. The rules for validating fields are used to specify multiple fields in the form to be validated asynchronously, as well as the asynchronous validation rules for each field. The configuration rules for UI components are used to specify the component properties and placeholder text in the Vue.js architecture, so that the Vue.js architecture can identify Vue components based on component properties and construct asynchronous form validation tasks through Vue components and placeholder text.

[0031] In this example, a JSON-formatted schema configuration file is used to describe the asynchronous form validation rules. These rules include basic rules, dynamic rule extensions, and cross-field dependency rules, thereby achieving a non-intrusive binding between the validation rules and UI components through a dynamic adaptation layer. Specifically, the basic rules are defined as follows: { / / Validation field; "username": { / / Field data type; "type": "string", / / Perform validation using regular expressions; "pattern": "^[a-z0-9_]{4,16}$", / / Error message text; "messages": { / / Required field. If the value is an empty string, empty array, undefined, or null, an error message will be displayed if the validation fails. "required": "Username cannot be empty", / / Prompt when regular expression validation fails; "pattern": "must be 4-16 lowercase letters or numbers", }, / / UI-related configurations; "ui": { / / UI components; "component": "ElInput", / / Component properties; "props": { / / Placeholder text; "placeholder": "Please enter your username", / / Can it be cleared? "clearable": true } } } }

[0032] The dynamic rule extension is defined as follows: { "password": { / / Dynamic rules; "dynamic": { / / JS expression; "when": "formType === 'register'", "then": { "minLength": 8, "required": true }, "else": { "required": false } } } }

[0033] Cross-field dependency rules are defined as follows: { "confirmPassword": { / / Function validation; "validator": "equalsField", "params": { / / Referencing other fields; "field": "password" }, / / Explicitly declare dependencies; "dependencies": ["password"] } }

[0034] Furthermore, in one example of this embodiment, before step S101, the steps include: in response to the user's construction operation of the asynchronous form validation task, identifying the user event corresponding to the construction operation; obtaining the Schema configuration file based on the user event; constructing the asynchronous form validation task based on the Schema configuration file and using Vue components of the Vue.js architecture; confirming the priority of the asynchronous form validation task based on the user event; adding the asynchronous form validation task to the corresponding priority queue based on the priority of the asynchronous form validation task; wherein, obtaining the asynchronous form validation task includes: obtaining the asynchronous form validation task from the corresponding priority queue based on the task scheduler.

[0035] Furthermore, based on the priority of the asynchronous form validation task, the asynchronous form validation task is added to the corresponding priority queue, including: if the priority of the asynchronous form validation task is high priority, then the asynchronous form validation task is added to the high priority queue; if the priority of the asynchronous form validation task is normal priority, then the asynchronous form validation task is added to the normal priority queue; if the priority of the asynchronous form validation task is low priority, then the asynchronous form validation task is added to the low priority queue; wherein, high priority, normal priority, and low priority are pre-configured in descending order based on task priority; the task scheduler obtains the asynchronous form validation task from any of the high priority, normal priority, and low priority queues based on the task priority.

[0036] In this example, if the asynchronous form validation task is an immediate interactive validation task, its priority is high. If the asynchronous form validation task is a network-dependent validation task, its priority is low. Specifically, configure the asynchronous validation task queue. Priority queue: Immediate interactive validation (input / change event) enters the high-priority queue. Normal validation (blur event) enters the normal priority queue. Network-dependent validation (submit / manually triggered) enters the low-priority queue.

[0037] Step S102: Obtain multiple fields of the form to be validated asynchronously in the form validation task, and construct a Promise chain for each field that has a field dependency.

[0038] In this embodiment, the form to be validated in the form validation task contains multiple fields to be validated, and each field can be validated synchronously or asynchronously. For fields that are to be validated asynchronously and have field dependencies, a corresponding Promise chain is constructed, thereby achieving timing control of the dependent fields through the Promise chain.

[0039] In one example of this embodiment, obtaining multiple fields to be asynchronously validated in a form validation task includes: collecting multiple fields that need to be validated in the form validation task; filtering one or more unmodified fields from the multiple fields that need to be validated, and obtaining multiple fields to be validated after filtering; and obtaining multiple fields to be asynchronously validated from the multiple fields to be validated.

[0040] This example employs a partial validation caching strategy to skip duplicate validations of unchanged fields. In complex form applications, with numerous fields and intricate validation rules, especially when asynchronous remote validation is involved, traditional full validation methods can lead to performance issues. This example significantly improves the validation performance of complex forms by intelligently skipping duplicate validations of unchanged fields by recording field modification status.

[0041] Step S103: Asynchronous validation of form validation tasks is performed based on the Vue.js architecture. When the asynchronous validation process reaches the asynchronous validation of fields that have field dependencies, the field validation operation is performed through the Promise chain of each field that has field dependencies.

[0042] In this embodiment, when performing asynchronous validation of form validation tasks based on the Vue.js architecture, each field in the form to be validated is validated asynchronously. For fields that have dependencies on each other and require asynchronous validation, the field validation operation is performed through their corresponding Promise chain. Specifically, a Promise array can also be configured to store each field that has dependencies on each other and requires asynchronous validation. The fields that have dependencies on each other and require asynchronous validation are read through the Promise array, and then the asynchronous validation operation of the fields is initiated based on the Promise chain.

[0043] Specifically, when performing asynchronous validation on a form validation task, the validation execution logic for multiple fields to be validated is as follows: Figure 2 As shown, when performing field validation, the process first checks if the field has been modified. If not, the validation result is returned from the cache. If so, the validation type is further determined. If it's synchronous validation, the validation rules are executed directly, and the cached validation result is updated. If it's asynchronous validation, an API request is initiated to asynchronously retrieve the field value, thereby executing the corresponding validation rules and updating the cached validation result. Finally, the UI error status of the Vue.js architecture is updated based on the updated cache.

[0044] In one example of this embodiment, asynchronous validation of form validation tasks is performed based on the Vue.js architecture. This includes: using concurrency control to process multiple asynchronous validation subtasks of fields to be asynchronously validated in parallel, configuring the execution status of each asynchronous validation subtask of each field to be asynchronously validated based on the asynchronous validation progress of each field to be asynchronously validated, and synchronizing the execution status of each asynchronous validation subtask of each field to be asynchronously validated through Vuex, so that multiple components in the Vue.js architecture can identify the execution status of each asynchronous validation subtask of each field to be asynchronously validated.

[0045] Specifically, when performing asynchronous validation on form validation tasks, each field to be asynchronously validated is configured with an asynchronous validation subtask. Multiple asynchronous validation subtasks for fields to be asynchronously validated are processed in parallel using concurrency control. Furthermore, the number of concurrent requests is limited, for example, to 5, and a request deduplication mechanism is configured, automatically merging incomplete validations of the same field. In addition, the execution status of each asynchronous validation subtask for each field to be asynchronously validated is configured using a state machine, defining four states: PENDING, VALID, INVALID, and TIMEOUT. PENDING indicates pending processing (validation in progress / suspended), specifically meaning the asynchronous validation request has been sent and is awaiting the result. VALID indicates valid (validation passed / valid), specifically meaning the data conforms to the validation rules. INVALID indicates invalid (validation failed / illegal), specifically meaning the data does not conform to the validation rules. TIMEOUT indicates timeout (validation timeout), specifically meaning the asynchronous validation request has exceeded the time limit and has not responded. Furthermore, cross-component state sharing is achieved through Vuex, allowing multiple components in the Vue.js architecture to recognize the execution status of each asynchronous validation subtask for each field to be asynchronously validated.

[0046] Step S104: Determine the asynchronous validation result of the form validation task based on the asynchronous validation results of each field to be asynchronously validated.

[0047] In this embodiment, the asynchronous validation result of each field to be asynchronously validated can be either validation passed or validation failed. When the asynchronous validation results of all fields to be asynchronously validated are valid, the asynchronous validation result of the form validation task is valid. When the asynchronous validation result of any field to be asynchronously validated is invalid, the asynchronous validation result of the form validation task is invalid.

[0048] The aforementioned asynchronous form validation method based on Vue components includes: responding to a task validation operation by obtaining an asynchronous form validation task, wherein the asynchronous form validation task is constructed by parsing a Schema configuration file using Vue components within the Vue.js architecture, and the Schema configuration file contains asynchronous form validation rules; obtaining multiple fields of the form to be validated in the form validation task, and constructing a Promise chain for each field that has dependencies on the asynchronously validated fields; performing asynchronous validation on the form validation task based on the Vue.js architecture, and when the asynchronous validation process reaches the asynchronous validation of each field that has dependencies on the asynchronously validated fields, executing the field validation operation through the Promise chain of each field that has dependencies on the asynchronously validated fields; and determining the asynchronous validation result of the form validation task based on the asynchronous validation results of each field that has been asynchronously validated. Therefore, by configuring asynchronous form validation rules through a Schema configuration file, and having Vue components within the Vue.js architecture parse and construct the asynchronous form validation task, the validation rules are decoupled from the Vue components. Furthermore, the timing control of dependent fields is achieved through the Promise chain.

[0049] The following is a detailed implementation process for the asynchronous form validation method based on Vue components described above: like Figure 3 As shown, after an asynchronous form validation task is triggered, it is queued according to its priority. The task scheduler retrieves asynchronous form validation tasks from the priority queue for processing based on task priority, a queue-jumping mechanism, or a sequential mechanism. Simultaneously, multiple tasks in the priority queue are processed using concurrency control. Furthermore, the asynchronous form validation task is state-managed, with its initial state configured as PENDING. Then, the validation task is executed. This can be done synchronously or asynchronously. After validation, the state of the asynchronous form validation task is determined based on the validation result. If successful, the asynchronous form validation task is configured with a VALID state. If it fails, the asynchronous form validation task is configured with an INVALID state. If it times out, the asynchronous form validation task is configured with a TIMEOUT state. Finally, state sharing of the asynchronous form validation task is achieved through Vuex state synchronization.

[0050] The validation logic for the asynchronous form validation task is as follows: Figure 4 As shown. Specifically, during task validation, when the validation type is determined to be form validation, the fields that need to be validated in the form to be validated in the asynchronous form validation task are collected, and unmodified fields are filtered out, and then a validation Promise array is initiated. After all validations are completed, a comprehensive result is returned based on the validation results. When the validation type is determined to be field change validation, the field is marked as modified, and debouncing single-field validation is performed.

[0051] In summary, an asynchronous form validation method based on Vue components can achieve the technical effects shown in the table below:

[0052] It should be understood that although the steps in the flowchart are shown sequentially according to the arrows, these steps are not necessarily executed in the order indicated by the arrows. Unless explicitly stated herein, there is no strict order constraint on the execution of these steps, and they can be executed in other orders. Moreover, at least some steps in the flowchart may include multiple sub-steps or multiple stages. These sub-steps or stages are not necessarily completed at the same time, but can be executed at different times. The execution order of these sub-steps or stages is not necessarily sequential, but can be performed alternately or in turn with other steps or at least some of the sub-steps or stages of other steps.

[0053] In some exemplary embodiments of this application, such as Figure 5 As shown, an asynchronous form validation device based on Vue components is provided, including a validation task acquisition module 501, an asynchronous validation field acquisition module 502, an asynchronous task validation module 503, and an asynchronous form validation result determination module 504. The validation task acquisition module 501 is used to obtain asynchronous form validation tasks in response to task validation operations. These tasks are constructed by parsing the Schema configuration file using Vue components within the Vue.js architecture, and the Schema configuration file contains asynchronous form validation rules. The asynchronous validation field acquisition module 502 is used to obtain multiple fields to be asynchronously validated in the form to be validated in the form validation task, and constructs a Promise chain for each field that has dependencies on the asynchronously validated fields. The asynchronous task validation module 503 is used to perform asynchronous validation on the form validation task based on the Vue.js architecture. When the asynchronous validation process reaches the asynchronous validation of each field that has dependencies on the asynchronously validated fields, it executes the field validation operation through the Promise chain of each field that has dependencies on the asynchronously validated fields. The asynchronous form validation result determination module 504 is used to determine the asynchronous validation result of the form validation task based on the asynchronous validation results of each field that has dependencies on the asynchronously validated fields.

[0054] Preferably, the asynchronous form validation rules in the Schema configuration file include basic rules for asynchronous form validation and cross-field dependency rules; wherein, the Promise chain of each field to be asynchronously validated that has field dependencies is constructed based on the cross-field dependency rules.

[0055] Preferably, the basic rules for asynchronous form validation include rules for validation fields and configuration rules for UI components. The rules for validation fields are used to specify multiple fields in the form to be validated asynchronously, as well as the asynchronous validation rules for each field. The configuration rules for UI components are used to specify the component properties and placeholder text of the Vue.js architecture, so that the Vue.js architecture can identify Vue components based on component properties and construct the asynchronous form validation task through Vue components and placeholder text.

[0056] Preferably, an asynchronous form validation device based on Vue components further includes a task building module, used to respond to the user's construction operation of the asynchronous form validation task, identify the user event corresponding to the construction operation; obtain the schema configuration file based on the user event; construct the asynchronous form validation task based on the schema configuration file and through Vue components of the Vue.js architecture; confirm the priority of the asynchronous form validation task based on the user event; add the asynchronous form validation task to the corresponding priority queue based on the priority of the asynchronous form validation task; obtaining the asynchronous form validation task includes: obtaining the asynchronous form validation task from the corresponding priority queue based on the task scheduler.

[0057] Preferably, the asynchronous form validation task is added to the corresponding priority queue based on its priority, including: if the asynchronous form validation task has a high priority, it is added to the high priority queue; if the asynchronous form validation task has a normal priority, it is added to the normal priority queue; if the asynchronous form validation task has a low priority, it is added to the low priority queue; wherein, high priority, normal priority, and low priority are pre-configured in descending order based on task priority; the task scheduler obtains the asynchronous form validation task from any of the high priority, normal priority, and low priority queues based on the task priority.

[0058] Preferably, obtaining multiple fields to be asynchronously validated in the form validation task includes: collecting multiple fields to be validated in the form validation task; filtering one or more unmodified fields from the multiple fields to be validated, and obtaining multiple fields to be validated after filtering; and obtaining multiple fields to be asynchronously validated from the multiple fields to be validated.

[0059] Preferably, asynchronous validation of form validation tasks based on the Vue.js architecture includes: using concurrency control to process multiple asynchronous validation subtasks of fields to be asynchronously validated in parallel, configuring the execution status of each asynchronous validation subtask of each field to be asynchronously validated based on the asynchronous validation progress of each field to be asynchronously validated, and synchronizing the execution status of each asynchronous validation subtask of each field to be asynchronously validated through Vuex, so that multiple components in the Vue.js architecture can identify the execution status of each asynchronous validation subtask of each field to be asynchronously validated.

[0060] For specific limitations regarding the asynchronous form validation device based on Vue components, please refer to the limitations of the asynchronous form validation method based on Vue components mentioned above, which will not be repeated here. Each module in the aforementioned asynchronous form validation device based on Vue components can be implemented entirely or partially through software, hardware, or a combination thereof. These modules can be embedded in or independent of the processor in an electronic device, or stored in the memory of an electronic device in software form, so that the processor can call and execute the corresponding operations of each module.

[0061] In some exemplary embodiments of this application, an electronic device is provided, which may be a server, and its internal structure diagram may be as follows: Figure 6 As shown, this electronic device includes a processor, memory, network interface, and database connected via a system bus. The processor provides computing and control capabilities. The memory includes non-volatile storage media and internal memory. The non-volatile storage media stores the operating system, computer programs, and database. The internal memory provides the environment for the operation of the operating system and computer programs stored in the non-volatile storage media. The database stores data related to asynchronous form validation. The network interface communicates with external terminals via a network connection. When executed by the processor, the computer program implements an asynchronous form validation method based on Vue components.

[0062] Those skilled in the art will understand that Figure 6 The structure shown is merely a block diagram of a portion of the structure related to the present application and does not constitute a limitation on the electronic device to which the present application is applied. The specific electronic device may include more or fewer components than those shown in the figure, or combine certain components, or have different component arrangements.

[0063] In some exemplary embodiments of this application, an electronic device is provided, including a memory, a processor, and a computer program stored in the memory and executable on the processor. When the processor executes the computer program, it implements the steps of an asynchronous form validation method based on Vue components as described in any of the exemplary embodiments above.

[0064] In some exemplary embodiments of this application, a computer-readable storage medium is provided having a computer program stored thereon, which, when executed by a processor, implements the steps of an asynchronous form validation method based on a Vue component as described in any of the exemplary embodiments above.

[0065] Those skilled in the art will understand that all or part of the processes in the methods of the above embodiments can be implemented by a computer program instructing related hardware. The computer program can be stored in a non-volatile computer-readable storage medium. When executed, the computer program can include the processes of the embodiments of the above methods. Any references to memory, storage, databases, or other media used in the embodiments provided in this application can include non-volatile and / or volatile memory. Non-volatile memory may include read-only memory (ROM), programmable ROM (PROM), electrically programmable ROM (EPROM), electrically erasable programmable ROM (EEPROM), or flash memory. Volatile memory may include random access memory (RAM) or external cache memory. By way of illustration and not limitation, RAM is available in a variety of forms, such as static RAM (SRAM), dynamic RAM (DRAM), synchronous DRAM (SDRAM), dual data rate SDRAM (DDRSDRAM), enhanced SDRAM (ESDRAM), synchronous link DRAM (SLDRAM), RAMbus direct RAM (RDRAM), direct memory bus dynamic RAM (DRDRAM), and memory bus dynamic RAM (RDRAM), etc.

[0066] The technical features of the above embodiments can be combined in any way. For the sake of brevity, not all possible combinations of the technical features in the above embodiments are described. However, as long as there is no contradiction in the combination of these technical features, they should be considered to be within the scope of this specification.

[0067] The embodiments described above are merely illustrative of several implementation methods of this application, and while the descriptions are relatively specific and detailed, they should not be construed as limiting the scope of the invention patent. It should be noted that those skilled in the art can make various modifications and improvements without departing from the concept of this application, and these all fall within the protection scope of this application. Therefore, the protection scope of this patent application should be determined by the appended claims.

Claims

1. An asynchronous form validation method based on Vue components, characterized in that, The method includes: In response to the task validation operation, an asynchronous form validation task is obtained. The asynchronous form validation task is obtained by parsing the Schema configuration file through Vue components of the Vue.js architecture and constructing it based on the parsing result. The Schema configuration file contains asynchronous form validation rules. Obtain multiple fields of the form to be validated asynchronously in the form validation task, and construct a Promise chain for each field that has a field dependency. The form validation task is performed asynchronously based on the Vue.js architecture. When the asynchronous validation process reaches the asynchronous validation of fields that have field dependencies, the field validation operation is performed through the Promise chain of each field that has field dependencies. The asynchronous validation result of the form validation task is determined based on the asynchronous validation result of each field to be asynchronously validated.

2. The method according to claim 1, characterized in that, The asynchronous form validation rules in the Schema configuration file include basic rules for asynchronous form validation and cross-field dependency rules. The Promise chain for each field that has a field dependency and is to be asynchronously validated is constructed based on the cross-field dependency rule.

3. The method according to claim 2, characterized in that, The basic rules for asynchronous form validation include rules for validating fields and configuration rules for UI components; The rules for the validation fields are used to provide multiple fields in the form to be validated asynchronously, as well as the asynchronous validation rules for each field to be validated asynchronously; The configuration rules for the UI components are used to provide component properties and placeholder text for the Vue.js architecture, so that the Vue.js architecture can confirm the Vue component based on the component properties and construct an asynchronous form validation task through the Vue component and the placeholder text.

4. The method according to claim 1, characterized in that, The method further includes: In response to the user's asynchronous form validation task construction operation, identify the user event corresponding to the construction operation; Obtain the schema configuration file based on the user events; Based on the aforementioned schema configuration file, an asynchronous form validation task is constructed using Vue components within the Vue.js framework; The priority of the asynchronous form validation task is determined based on the user event. The asynchronous form validation task is added to the corresponding priority queue based on its priority. The process of obtaining the asynchronous form validation task includes: obtaining the asynchronous form validation task from the corresponding priority queue based on the task scheduler.

5. The method according to claim 4, characterized in that, The step of adding the asynchronous form validation task to the corresponding priority queue based on the priority of the asynchronous form validation task includes: If the asynchronous form validation task has a high priority, then the asynchronous form validation task is added to the high priority queue. If the asynchronous form validation task has a normal priority, then the asynchronous form validation task is added to the normal priority queue. If the asynchronous form validation task has a low priority, then the asynchronous form validation task is added to the low priority queue. The high priority, the normal priority, and the low priority are pre-configured in descending order based on task priority; The task scheduler obtains the asynchronous form validation task from any of the priority queues among the high priority, normal priority, and low priority queues based on the task priority.

6. The method according to claim 1, characterized in that, The step of obtaining multiple fields of the form to be validated asynchronously in the form validation task includes: Collect multiple fields that need to be validated in the form to be validated in the form validation task; Filter one or more unmodified fields from the multiple fields that need to be verified, and obtain multiple fields to be verified after filtering; Retrieve multiple fields to be asynchronously validated from multiple fields to be validated.

7. The method according to claim 1, characterized in that, The asynchronous validation of the form validation task based on the Vue.js architecture includes: The asynchronous validation subtasks of multiple fields to be asynchronously validated are processed in parallel using a concurrent control approach. The execution status of each asynchronous validation subtask is configured based on the asynchronous validation progress of each field to be asynchronously validated. The execution status of each asynchronous validation subtask is synchronized through Vuex, so that multiple components in the Vue.js architecture can identify the execution status of each asynchronous validation subtask of the fields to be asynchronously validated.

8. An asynchronous form validation device based on Vue components, characterized in that, The device includes: The verification task acquisition module is used to obtain asynchronous form verification tasks in response to task verification operations. The asynchronous form verification tasks are obtained by parsing the Schema configuration file through Vue components in the Vue.js architecture and constructing it based on the parsing results. The Schema configuration file contains asynchronous form verification rules. The asynchronous validation field acquisition module is used to acquire multiple fields to be asynchronously validated in the form validation task, and construct a Promise chain for each field to be asynchronously validated that has field dependencies. The asynchronous task validation module is used to perform asynchronous validation of the form validation task based on the Vue.js architecture. When the asynchronous validation process reaches the asynchronous validation of fields that have field dependencies, the field validation operation is performed through the Promise chain of each field that has field dependencies. The form asynchronous validation result determination module is used to determine the asynchronous validation result of the form validation task based on the asynchronous validation results of each field to be asynchronously validated.

9. An electronic device comprising a memory, a processor, and a computer program stored in the memory and executable on the processor, characterized in that, When the processor executes the computer program, it implements the steps of the method according to any one of claims 1 to 7.

10. A computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the steps of the method according to any one of claims 1 to 7.

Images