Form verification error information prompting method, device and equipment

Abstract

The invention discloses a form verification error information prompting method, device and equipment. The method comprises the following steps: monitoring form verification error information prompting elements by creating an observer instance observer; when it is monitored that the form verification error information prompt element is changed and 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, so that the form verification error information is prompted through the prompt box, and the user experience is improved. The problem that the prompting effect of a traditional form verification error prompting scheme is not attractive is effectively solved, original complex surface single verification rule logic is reserved, expansibility and adaptability are high, and mainstream UI component library form components can be rapidly matched.

Description

Technical Field

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

[0002] Form validation is used to verify whether the user has entered data in the correct format, and to display a form validation error message on the page if the validation fails, 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 prompt form validation error messages. However, this validation error message prompt solution has the following defects:

[0004] First, when the space between the interface form element and the immediately 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 increase the height of the entire row of cells. 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 form cell in the fixed table is fixed, once the form verification error prompt in the table cell is triggered, the traditional form verification error message prompt scheme will cause the error prompt red text to float between the upper and lower cells. However, the table cell has a border boundary. At this time, the verification 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 information prompt method, device and equipment, which can solve the technical problem that the form verification error prompt scheme in the prior art does not allow the space between the interface form element and the following interface element to be occupied, and the prompt effect is not beautiful when the space between the interface form element and the following interface element is relatively fixed but narrow.

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

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

[0009] When it is monitored that the form verification error information prompt element is changed and 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 implementation, before creating an observer instance observe to monitor the form verification error information prompt element, it also 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 a normal parameter value and a tooltip prompt box parameter value for the messageType attribute.

[0013] It is worth noting that in the commonly used front-end UI component library, the form component will have a form-item component. The form-item component is the definition of the form item, which is used to wrap a single form element component to implement the logic encapsulation of the form layout and validation rules. By wrapping the form-item component and retaining the original properties, events, and methods of the form-item component, the original complex form validation rule logic can be retained.

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

[0015] In one implementation, configuring a tooltip prompt box 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 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.

[0018] In one implementation, 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 MutationObserver of the javascript system application programming interface api, thereby monitoring and hijacking the original form verification error information prompt element.

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

[0021] When the form validation 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 (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 in which a component or element is rendered into the DOM for the first time and can be presented on the web page 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 refers to the process in 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 validation 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 is changed and 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 used to:

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

[0034] In one implementation, 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 for:

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

[0038] In one embodiment, the device is also used 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 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 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 extensibility and adaptability, and capable of quickly matching mainstream UI component library form components. BRIEF DESCRIPTION OF THE DRAWINGS

[0042] Figure 1 This is a flow chart of an embodiment of a method for prompting an error message for application form verification;

[0043] Figure 2 This is a specific flow chart of the error message prompt method for verifying this application form;

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

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

[0046] In order to enable those skilled in the art to better understand the solution of the present application, the technical solution in the embodiments of the present application will be clearly and completely described below in conjunction with the drawings in the embodiments of the present application. Obviously, the described embodiments are only part of the embodiments of the present application, not all of the embodiments. Based on the embodiments in the present application, 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 the present application clearer, the implementation methods of the present 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 a form verification error message.

[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 information prompt element.

[0051] Step S102: when it is monitored that the form verification error information prompt element is changed and 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.

[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 does not need 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, which specifically includes the following steps: packaging the form-item component in the UI component, and retaining the original properties, events and methods of the form-item component. Expanding and adding a message type messageType attribute in the form-item component, and configuring the normal parameter value and the tooltip prompt box parameter value for the messageType attribute.

[0054] It is worth mentioning that the UI component library is a collection of components that can be directly used to create interactive legends and build pages in the process of conventional interface design. In the commonly used front-end UI component library, the form component will have a form-item component. The form-item component is the definition of the form item, which is used to wrap a single form element component to implement the logical encapsulation of form layout and validation rules. By wrapping the form-item component and retaining the original properties, events, and methods of the form-item component, the original complex form validation rule logic can be retained.

[0055] The normal parameter value indicates that the original form validation error message prompt function of the form element is used, and tooltip indicates that the newly expanded form validation error message prompt box prompt function is enabled, where 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 during actual mounting.

[0057] Explanatory, 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 information 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 (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] Explanatory, 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 the 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 in the market, and the scheme of 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 complexity, and making the overall solution simple and reliable to implement. It effectively solves the problem that the traditional form verification error prompt scheme 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 extensibility 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 also 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 prompting device includes:

[0067] The monitoring module is used to create an observer instance to observe the form validation 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 is changed and mounted, and open a pre-configured tooltip prompt box to display the text content.

[0069] Furthermore, in one embodiment, the form verification error information 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 is worth noting that in the commonly used front-end UI component library, the form component will have a form-item component. The form-item component is the definition of the form item, which is used to wrap a single form element component to implement the logic encapsulation of the form layout and validation rules. By wrapping the form-item component and retaining the original properties, events, and methods of the form-item component, the original complex form validation rule logic can be retained.

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

[0074] Furthermore, in one embodiment, the configuration module is also used to:

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

[0076] Explanatory, 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 also used for:

[0078] 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, thereby monitoring and hijacking the original form verification error information prompt element.

[0079] Furthermore, in one embodiment, the display module is also used for:

[0080] When the form validation 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 (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] Explanatory, 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 the 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 a data processing function.

[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, the memory, and the communication interface.

[0088] Communication interfaces include input / output (I / O) interfaces, physical interfaces, and logical interfaces, which are used to interconnect components within a computing device, and interfaces used to interconnect a computer device with other devices (such as other computing devices or user devices). Physical interfaces can be Ethernet interfaces, optical fiber interfaces, ATM interfaces, etc.; user devices can be display screens, keyboards, etc.

[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, and the general-purpose processor may call a computer program stored in a memory and execute the form verification error message prompt method provided in the embodiment 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 prompt program is called may refer to the various embodiments of the form verification error message prompt 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 on the present application, and may include more or less components than shown in the figure, or combine certain components, or arrange the components differently.

[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 one by one.

[0093] It should be noted that the serial numbers of the above-mentioned embodiments of the present application are only for description 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 "first", "second" and "third" to different types.

[0095] In the description of the embodiments of the present application, "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 the present application should not be interpreted as being more preferred or more advantageous than other embodiments or designs. Specifically, the use of words such as "exemplary", "for example" or "for example" is intended to present related concepts in a specific way.

[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; the “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 that appear in a specific order are included, but it should be understood that these operations or steps may not be executed in the order in which they appear in the embodiments of the present application or in parallel, and the sequence number of the operation is only used to distinguish the different operations, and the sequence number itself does not represent any execution order. In addition, these processes may include more or fewer operations, and these operations or steps may be executed 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 a necessary general hardware platform, and of course by hardware, but in many cases the former is a better implementation method. Based on such an understanding, the technical solution of the present application is essentially 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, disk, CD) as described above, and includes a number of instructions for 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 are not intended to limit the patent scope of the present application. Any equivalent structure or equivalent process transformation made using the contents of the present application specification and drawings, 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 information prompt method, characterized in that: The form verification error information prompt method includes: Create an observer instance observe to monitor the form validation error message prompt element; When it is monitored that the form verification error information prompt element is changed and 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.

2. The form verification error information prompt method according to claim 1, characterized in that: Before creating the observer instance observe to listen to the form validation 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 a normal parameter value and a tooltip prompt box parameter value for the messageType attribute.

3. The form verification error information prompt method according to claim 2, characterized in that: Configuring the tooltip prompt box 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 information prompt method according to claim 2, characterized in that: Create an observer instance to observe the form validation error message prompt element, 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 information prompt method according to claim 1, characterized in that: After opening the pre-configured tooltip prompt box to display the text content, it also includes: When the form validation error message prompt element is uninstalled, the tooltip prompt box is hidden.

6. The form verification error information 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 information prompting device, characterized in that: The form verification error information prompting device comprises: The monitoring module is used to create an observer instance to observe the form validation error message prompt element; 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 is changed and mounted, and open a pre-configured tooltip prompt box to display the text content.

8. The form verification error information prompting device according to claim 7, characterized in that: 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 information 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 as described in any one of claims 1 to 6 are implemented.

Images