A form verification error information prompting method, device and equipment

Abstract

The application discloses a form verification error information prompting method, device and equipment, and creates an observer instance observe to listen to a form verification error information prompting element; when it is listened that the form verification error information prompting element is changed and mounted, the text content of the form verification error information prompting element is acquired, and a pre-configured tooltip prompt box is opened to display the text content, form verification error information is prompted through the prompt box, the problem that the traditional form verification error prompt scheme is not beautiful in prompt effect is effectively solved, the original complex form verification rule logic is reserved, the expansibility and adaptability are strong, and the mainstream UI component library form component can be quickly matched.

Description

Technical Field

[0001] The present application relates to the field of computer technology, and in particular to a method, device and apparatus for prompting error messages for form verification. Background Art

[0002] Form validation is used to check whether the user has entered data in the correct format. If the validation fails, a form validation error message will be displayed on the page to prompt the user to enter data in the correct format, thereby ensuring that the entered data complies with specific formats, rules, and constraints, and reducing the submission of invalid or erroneous data.

[0003] Currently, the mainstream front-end development UI frameworks Element and Arco Design both use line breaks and red text to indicate form validation errors. However, this validation error message prompting solution has the following flaws:

[0004] First, when the space between the interface form element and the following interface element is not allowed to be occupied, such as in the table form scenario, the table has cells and the cells usually do not have a fixed height, and the increase in the height of each cell will increase the overall height of all cells in its column. In this case, if the form validation error prompt is triggered, the traditional red text prompt will occupy the form cell space, increase the height of the table cell, and then cause the height of the entire row of cells to increase. In this case, the cell content with the form validation error message prompt is still relatively full, but the cell without the form validation error message prompt will appear very empty, making the overall layout of the table inconsistent and unsightly. Moreover, as the error prompt text is displayed and hidden, the table may jitter, seriously affecting the user experience.

[0005] Secondly, when the space between the interface form element and the following interface element is relatively fixed and narrow, and the height of the fixed table form cell is fixed, once the form validation error prompt in the table cell is triggered, the traditional form validation error message prompt solution will cause the error prompt text marked in red to float between the upper and lower cells. Since the table cell has a border boundary, the validation error prompt text will overlap with the border of the table cell or the content of the next row of cells, causing visual confusion and unsightly appearance. Summary of the Invention

[0006] The present application provides a form verification error message prompt method, device and equipment, which can solve the technical problems in the prior art of the form verification error prompt scheme that the prompt effect is not aesthetically pleasing when the space between the interface form element and the following interface element is not allowed to be squeezed or the space between the interface form element and the following interface element is relatively fixed but relatively narrow.

[0007] In a first aspect, an embodiment of the present application provides a method for prompting a form verification error message, the method comprising:

[0008] Create an observer instance observe to monitor the form verification error message prompt element;

[0009] When it is monitored that the form verification error information prompt element changes and is mounted, the text content of the form verification error information prompt element is obtained, and a pre-configured tooltip prompt box is opened to display the text content.

[0010] In combination with the first aspect, in one embodiment, before creating an observer instance observe to monitor the form verification error message prompt element, the method further includes:

[0011] Wrap the form-item component in the UI component and retain the original properties, events, and methods of the form-item component;

[0012] Add a message type messageType attribute to the form-item component, and configure the normal parameter value and the tooltip prompt box parameter value for the messageType attribute.

[0013] It's worth noting that in common front-end UI component libraries, form components often include a form-item component. The form-item component is a form item definition, used to wrap individual form element components and implement logical encapsulation of form layout and validation rules. Wrapping the form-item component preserves its original properties, events, and methods, allowing you to maintain complex form validation logic.

[0014] The normal parameter value indicates that the original form validation error message prompt function of the form element is used, and the tooltip indicates that the newly expanded form validation error message prompt box function is enabled. The prompt box prompt function can also be called the bubble prompt function.

[0015] In one embodiment, configuring a tooltip parameter value for the messageType attribute further includes:

[0016] Add an invisible display:none style to the form validation error message prompt element.

[0017] The display:none style is a CSS property whose main function is to completely hide an HTML element and remove it from the page layout. Specifically, after using display:none, the element will not be displayed on the page and will not take up space, so it is completely invisible to the user, thus ensuring a simple and beautiful page.

[0018] In one embodiment, creating an observer instance observe to monitor the form validation error message prompt element includes:

[0019] When the form-item component is mounted, the observer instance observe is created through the mutation observer of the javascript system application programming interface api, thereby monitoring and hijacking the original form verification error message prompt element.

[0020] In one embodiment, after opening a pre-configured tooltip prompt box to display the text content, the method further includes:

[0021] When the form verification error message prompt element is uninstalled, the tooltip prompt box is hidden.

[0022] It is worth noting that when the form validation error message prompt element is uninstalled (that is, no longer displayed), if the tooltip prompt box is still displayed, it will cause information redundancy and confusion. Therefore, hiding the tooltip prompt box can avoid this redundancy and ensure a neat and clear interface.

[0023] In one embodiment, the method further comprises:

[0024] When the form-item component is uninstalled, the observer instance observe is destroyed.

[0025] Mounting a component or element refers to the process by which a component or element is first rendered into the DOM and rendered on the web page. When the component is initialized and its DOM element is created and inserted into the DOM tree, the component or element is said to be mounted. Unmounting a component or element refers to the process by which a component or element is removed from the DOM. When a component no longer needs to be rendered, its DOM element is deleted from the DOM tree.

[0026] In a second aspect, an embodiment of the present application provides a form verification error message prompting device, the form verification error message prompting device comprising:

[0027] The monitoring module is used to create an observer instance to observe the form verification error message prompt element;

[0028] The display module is used to obtain the text content of the form verification error information prompt element when it is monitored that the form verification error information prompt element has changed and is mounted, and open a pre-configured tooltip prompt box to display the text content.

[0029] In conjunction with the second aspect, in one embodiment, the device further includes:

[0030] A packaging module, which is used to package the form-item component in the UI component and retain the original properties, events and methods of the form-item component;

[0031] A configuration module is used to add a message type messageType attribute in the form-item component and configure a normal parameter value and a tooltip prompt box parameter value for the messageType attribute.

[0032] In one embodiment, the configuration module is further configured to:

[0033] Add an invisible display:none style to the form validation error message prompt element.

[0034] In one embodiment, the monitoring module is further configured to:

[0035] When the form-item component is mounted, the observer instance observe is created through the mutation observer MutationObserver of the javascript system application programming interface api.

[0036] In one embodiment, the display module is further used to:

[0037] When the form verification error message prompt element is uninstalled, the tooltip prompt box is hidden.

[0038] In one embodiment, the device is further configured to:

[0039] When the form-item component is uninstalled, the observer instance observe is destroyed.

[0040] In a third aspect, an embodiment of the present application provides a computer device, comprising a processor, a memory, and a form verification error message prompt program stored on the memory and executable by the processor, wherein when the form verification error message prompt program is executed by the processor, the steps of the form verification error message prompt method as described in any one of the above items are implemented.

[0041] The embodiments of the present application provide a method, apparatus and device for prompting a form verification error message, which creates an observer instance observe to monitor a form verification error message prompt element; when it is monitored that the form verification error message prompt element changes and is mounted, the text content of the form verification error message prompt element is obtained, and a pre-configured tooltip prompt box is opened to display the text content, thereby realizing prompting the form verification error message through a prompt box, effectively solving the problem of unsightly prompt effects of traditional form verification error prompt solutions, and retaining the original complex form verification rule logic, with strong scalability and adaptability, and the ability to quickly match mainstream UI component library form components. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 This is a flowchart of an embodiment of a method for prompting error information for application form verification;

[0043] Figure 2 This is a schematic diagram of the specific process of the error message prompt method for this application form verification;

[0044] Figure 3 This is a functional module diagram of an embodiment of the device for prompting error information of application form verification;

[0045] Figure 4 This is a schematic diagram of the hardware structure of the computer device involved in the embodiment of the present application. DETAILED DESCRIPTION

[0046] In order to enable those skilled in the art to better understand the present invention, the following will clearly and completely describe the technical solutions in the embodiments of the present invention in conjunction with the accompanying drawings. Obviously, the described embodiments are only part of the embodiments of the present invention, not all of the embodiments. Based on the embodiments of the present invention, all other embodiments obtained by ordinary technicians in this field without creative work are within the scope of protection of this application.

[0047] In order to make the objectives, technical solutions and advantages of this application clearer, the implementation methods of this application will be further described in detail below with reference to the accompanying drawings.

[0048] In a first aspect, an embodiment of the present application provides a method for prompting error information of a form verification.

[0049] In one embodiment, referring to Figure 1 , Figure 1 This is a flow chart of the first embodiment of the method for prompting error information of the application form verification. Figure 1 As shown, the form validation error message prompt method includes:

[0050] Step S101: Create an observer instance observe to monitor the form verification error message prompt element.

[0051] Step S102: When it is detected that the form verification error message prompt element is changed and mounted, the text content of the form verification error message prompt element is obtained, and a pre-configured tooltip prompt box is opened to display the text content.

[0052] It is worth noting that in this embodiment, the text content of the form verification error information prompt element is displayed through a pre-configured tooltip prompt box, which can also be called a bubble prompt. This prompt method no longer needs to occupy the space of the interface form element, and the prompt effect is beautiful.

[0053] In one embodiment, if Figure 2 As shown, before step S101, a tooltip prompt box is configured. Specifically, the following steps are included: packaging the form-item component in the UI component while retaining the original properties, events, and methods of the form-item component; expanding the form-item component to add a message type messageType attribute, and configuring the normal parameter value and the tooltip prompt box parameter value for the messageType attribute.

[0054] It's worth noting that a UI component library is a collection of components that can be directly used to create interactive illustrations and build pages during the regular interface design process. In common front-end UI component libraries, form components often have a form-item component. The form-item component defines a form item and is used to wrap individual form element components, implementing logical encapsulation of form layout and validation rules. Wrapping the form-item component preserves its original properties, events, and methods, allowing you to maintain complex form validation logic.

[0055] The normal parameter value indicates that the original form validation error message prompt function of the form element is used, and the tooltip indicates that the newly expanded form validation error message prompt box function is enabled. The prompt box prompt function can also be called the bubble prompt function.

[0056] In some optional embodiments, the tooltip prompt box parameter value is configured for the messageType attribute, including: adding an invisible display:none style to the form verification error message prompt element, so that the form verification error message prompt element is not displayed on the interface when actually mounted.

[0057] Explanation: The display:none style is a CSS property whose main function is to completely hide the HTML element and remove it from the page layout. Specifically, after using display:none, the element will not be displayed on the page and will not occupy space, so it is completely invisible to the user, thus ensuring a simple and beautiful page.

[0058] In one embodiment, in step S101, creating an observer instance observe to monitor the form verification error message prompt element specifically includes:

[0059] When the form-item component is mounted, the observer instance observe is created through the change observer MutationObserver of the javascript system application programming interface api, so as to monitor and hijack the original form verification error information prompt element.

[0060] Furthermore, after opening the pre-configured tooltip prompt box to display the text content in step S102, the method further includes: when the form verification error information prompt element is uninstalled, hiding the tooltip prompt box.

[0061] It is worth noting that when the form validation error message prompt element is uninstalled (that is, no longer displayed), if the tooltip prompt box is still displayed, it will cause information redundancy and confusion. Therefore, hiding the tooltip prompt box can avoid this redundancy and ensure a neat and clear interface.

[0062] As a preferred implementation, when the form-item component is uninstalled, the observer instance observe is destroyed, thereby preventing browser memory leakage and protecting user information security.

[0063] Explanation: Mounting a component or element refers to the process by which a component or element is rendered into the DOM for the first time and can be presented on a web interface. When the component is initialized and its DOM element is created and inserted into the DOM tree, the component or element is mounted. Unmounting a component or element is the process by which a component or element is removed from the DOM. When a component no longer needs to be rendered, its DOM element is deleted from the DOM tree.

[0064] The form verification error message prompt method provided in the embodiment of the present application is implemented by secondary encapsulation of the form component of the front-end UI component library commonly used on the market, and its solution for expanding the prompt box (bubble) prompt only adds a configurable UI display method for the form error message prompt, retaining the original complex form verification rule logic, simplifying the complex, and making the overall solution simple and reliable to implement. It effectively solves the problem that the traditional form verification error prompt solution has an unsightly prompt effect when the space between the interface form element and the immediately following interface element is not allowed to be occupied and the space between the interface form element and the immediately following interface element is relatively fixed but narrow. In addition, the implementation idea is simple, the scalability and adaptability are strong, and it can quickly match the mainstream UI component library form component.

[0065] In a second aspect, an embodiment of the present application further provides a form verification error message prompt device.

[0066] In one embodiment, referring to Figure 3 , Figure 3 This is a functional module diagram of an embodiment of the application form verification error information prompt device. Figure 3 As shown, the form verification error information prompt device includes:

[0067] The monitoring module is used to create an observer instance to observe the form verification error message prompt element;

[0068] The display module is used to obtain the text content of the form verification error information prompt element when it is monitored that the form verification error information prompt element has changed and is mounted, and open a pre-configured tooltip prompt box to display the text content.

[0069] Furthermore, in one embodiment, the form verification error message prompting device further includes:

[0070] A packaging module, which is used to package the form-item component in the UI component and retain the original properties, events and methods of the form-item component;

[0071] A configuration module is used to add a message type messageType attribute in the form-item component and configure a normal parameter value and a tooltip prompt box parameter value for the messageType attribute.

[0072] It's worth noting that in common front-end UI component libraries, form components often include a form-item component. The form-item component is a form item definition, used to wrap individual form element components and implement logical encapsulation of form layout and validation rules. Wrapping the form-item component preserves its original properties, events, and methods, allowing you to maintain complex form validation logic.

[0073] The normal parameter value indicates that the original form validation error message prompt function of the form element is used, and the tooltip indicates that the newly expanded form validation error message prompt box function is enabled. The prompt box prompt function can also be called the bubble prompt function.

[0074] Furthermore, in one embodiment, the configuration module is further configured to:

[0075] Add an invisible display:none style to the form validation error message prompt element.

[0076] Explanation: The display:none style is a CSS property whose main function is to completely hide the HTML element and remove it from the page layout. Specifically, after using display:none, the element will not be displayed on the page and will not occupy space, so it is completely invisible to the user, thus ensuring a simple and beautiful page.

[0077] Furthermore, in one embodiment, the monitoring module is further configured to:

[0078] When the form-item component is mounted, the observer instance observe is created through the mutation observer of the javascript system application programming interface api, thereby monitoring and hijacking the original form verification error message prompt element.

[0079] Furthermore, in one embodiment, the display module is further configured to:

[0080] When the form verification error message prompt element is uninstalled, the tooltip prompt box is hidden.

[0081] It is worth noting that when the form validation error message prompt element is uninstalled (that is, no longer displayed), if the tooltip prompt box is still displayed, it will cause information redundancy and confusion. Therefore, hiding the tooltip prompt box can avoid this redundancy and ensure a neat and clear interface.

[0082] Furthermore, in one embodiment, the device is also used for:

[0083] When the form-item component is uninstalled, the observer instance observe is destroyed, thereby preventing browser memory leakage and protecting user information security.

[0084] Explanation: Mounting a component or element refers to the process by which a component or element is rendered into the DOM for the first time and can be presented on a web interface. When the component is initialized and its DOM element is created and inserted into the DOM tree, the component or element is mounted. Unmounting a component or element is the process by which a component or element is removed from the DOM. When a component no longer needs to be rendered, its DOM element is deleted from the DOM tree.

[0085] In a third aspect, an embodiment of the present application provides a computer device, which may be a personal computer (PC), a laptop computer, a server, or other device with data processing capabilities.

[0086] Reference Figure 4 , Figure 4 Schematic diagram of the hardware structure of the computer device involved in the embodiment of the present application. In the embodiment of the present application, the computer device may include a processor, a memory, a communication interface and a communication bus.

[0087] The communication bus may be of any type and is used to interconnect the processor, memory, and communication interface.

[0088] Communication interfaces include input / output (I / O) interfaces, physical interfaces, and logical interfaces, which interconnect components within a computing device and connect the computing device to other devices (such as other computing devices or user devices). Physical interfaces can include Ethernet, fiber optic, and ATM interfaces; user devices can include displays and keyboards.

[0089] The memory can be various types of storage media, such as random access memory (RAM), read-only memory (ROM), non-volatile RAM (NVRAM), flash memory, optical storage, hard disk, programmable ROM (PROM), erasable PROM (EPROM), electrically erasable PROM (EEPROM), etc.

[0090] The processor may be a general-purpose processor that can call a computer program stored in a memory and execute the form verification error message prompting method provided in the embodiments of the present application. For example, the general-purpose processor may be a central processing unit (CPU). The method executed when the form verification error message prompting program is called can refer to the various embodiments of the form verification error message prompting method of the present application, and will not be repeated here.

[0091] Those skilled in the art will understand that Figure 4 The hardware structure shown in the figure does not constitute a limitation to the present application and may include more or fewer components than shown in the figure, or a combination of certain components, or a different arrangement of components.

[0092] Among them, the functional implementation of each module in the above-mentioned form verification error information prompting device corresponds to each step in the above-mentioned form verification error information prompting method embodiment, and its functions and implementation processes are no longer repeated here.

[0093] It should be noted that the serial numbers of the above-mentioned embodiments of the present application are for description only and do not represent the advantages or disadvantages of the embodiments.

[0094] The terms "including" and "having" and any variations thereof in the specification and claims of this application and the above-mentioned drawings are intended to cover non-exclusive inclusions. For example, a process, method, system, product or device that includes a series of steps or units is not limited to the listed steps or units, but optionally includes steps or units that are not listed, or optionally includes other steps or units inherent to these processes, methods, products or devices. The terms "first", "second" and "third" are used to distinguish different objects, etc., and do not represent a sequence, nor do they limit the "first", "second" and "third" to different types.

[0095] In the description of the embodiments of this application, the words "exemplary," "for example," or "for example" are used to indicate examples, illustrations, or descriptions. Any embodiment or design described as "exemplary," "for example," or "for example" in the embodiments of this application should not be construed as being preferred or advantageous over other embodiments or designs. Rather, the use of words such as "exemplary," "for example," or "for example" is intended to present the relevant concepts in a concrete manner.

[0096] In the description of the embodiments of the present application, unless otherwise specified, “ / ” means or, for example, A / B can mean A or B; “and / or” in the text is merely a description of the association relationship of associated objects, indicating that three relationships may exist, for example, A and / or B can mean: A exists alone, A and B exist at the same time, and B exists alone. In addition, in the description of the embodiments of the present application, “multiple” refers to two or more than two.

[0097] In some processes described in the embodiments of the present application, multiple operations or steps are included that appear in a specific order. However, it should be understood that these operations or steps may not be performed in the order in which they appear in the embodiments of the present application or may be performed in parallel. The sequence numbers of the operations are only used to distinguish between different operations, and the sequence numbers themselves do not represent any order of execution. In addition, these processes may include more or fewer operations, and these operations or steps may be performed in sequence or in parallel, and these operations or steps may be combined.

[0098] Through the description of the above implementation methods, those skilled in the art can clearly understand that the above-mentioned embodiment methods can be implemented by means of software plus the necessary general hardware platform, of course, it can also be implemented by hardware, but in many cases the former is a better implementation method. Based on this understanding, the technical solution of the present application, or the part that contributes to the prior art, can be embodied in the form of a software product, which is stored in a storage medium (such as ROM / RAM, magnetic disk, optical disk) as described above, and includes a number of instructions for enabling a terminal device to execute the methods described in each embodiment of the present application.

[0099] The above are only preferred embodiments of the present application and do not limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the description and drawings of this application, or directly or indirectly applied in other related technical fields, are also included in the patent protection scope of the present application.

Claims

1. A form verification error message prompt method, characterized in that: The form verification error message prompt method includes: Create an observer instance observe to monitor the form verification error message prompt element; When the form verification error message prompt element is detected to have changed and mounted, the text content of the form verification error message prompt element is obtained, and a pre-configured tooltip prompt box is opened to display the text content; Among them, element mounting refers to the process in which the element is rendered into the DOM for the first time and can be presented on the web page interface. When the element is created and inserted into the DOM tree, the element is mounted.

2. The form verification error message prompt method according to claim 1, characterized in that: Before creating the observer instance observe to listen to the form verification error message prompt element, it also includes: Wrap the form-item component in the UI component and retain the original properties, events, and methods of the form-item component; Add a message type messageType attribute to the form-item component, and configure the normal parameter value and the tooltip prompt box parameter value for the messageType attribute.

3. The form verification error message prompt method according to claim 2, characterized in that: Configuring the tooltip parameter value for the messageType attribute also includes: Add an invisible display: none style to the form validation error message prompt element.

4. The form verification error message prompt method according to claim 2, wherein: Create an observer instance observe to monitor form validation error message prompt elements, including: When the form-item component is mounted, the observer instance observe is created through the mutation observer MutationObserver of the javascript system application programming interface api.

5. The form verification error message prompt method according to claim 1, wherein: After opening the pre-configured tooltip prompt box to display the text content, it also includes: When the form verification error message prompt element is uninstalled, the tooltip prompt box is hidden.

6. The form verification error message prompt method according to claim 2, characterized in that: The method further includes: When the form-item component is uninstalled, the observer instance observe is destroyed.

7. A form verification error message prompt device, characterized in that: The form verification error information prompting device includes: The monitoring module is used to create an observer instance to observe the form verification error message prompt element; A display module is used to obtain the text content of the form verification error information prompt element when it is monitored that the form verification error information prompt element has changed and is mounted, and open a pre-configured tooltip prompt box to display the text content; Among them, element mounting refers to the process in which the element is rendered into the DOM for the first time and can be presented on the web page interface. When the element is created and inserted into the DOM tree, the element is mounted.

8. The form verification error message prompting device according to claim 7, wherein: The device also includes: A packaging module, which is used to package the form-item component in the UI component and retain the original properties, events and methods of the form-item component; A configuration module is used to add a message type messageType attribute in the form-item component and configure a normal parameter value and a tooltip prompt box parameter value for the messageType attribute.

9. The form verification error message prompting device according to claim 8, characterized in that: The configuration module is also used to: Add an invisible display: none style to the form validation error message prompt element.

10. A computer device, characterized in that: The computer device includes a processor, a memory, and a form verification error message prompt program stored in the memory and executable by the processor, wherein when the form verification error message prompt program is executed by the processor, the steps of the form verification error message prompt method according to any one of claims 1 to 6 are implemented.

Images