CN112749365A - React-based form creation method with automatic arrangement layout rendering and verification - Google Patents
React-based form creation method with automatic arrangement layout rendering and verification Download PDFInfo
- Publication number
- CN112749365A CN112749365A CN202110070930.4A CN202110070930A CN112749365A CN 112749365 A CN112749365 A CN 112749365A CN 202110070930 A CN202110070930 A CN 202110070930A CN 112749365 A CN112749365 A CN 112749365A
- Authority
- CN
- China
- Prior art keywords
- verification
- layout
- elements
- data
- presetting
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Withdrawn
Links
- 238000012795 verification Methods 0.000 title claims abstract description 92
- 238000000034 method Methods 0.000 title claims abstract description 35
- 238000009877 rendering Methods 0.000 title claims abstract description 34
- 238000012545 processing Methods 0.000 claims description 8
- 230000008569 process Effects 0.000 claims description 6
- 230000001960 triggered effect Effects 0.000 claims description 6
- 238000013524 data verification Methods 0.000 claims description 4
- 238000010586 diagram Methods 0.000 description 6
- 230000008859 change Effects 0.000 description 5
- 238000011161 development Methods 0.000 description 3
- 230000007547 defect Effects 0.000 description 2
- 238000005516 engineering process Methods 0.000 description 2
- 238000012544 monitoring process Methods 0.000 description 2
- 230000000694 effects Effects 0.000 description 1
- 238000012423 maintenance Methods 0.000 description 1
- 230000007246 mechanism Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 108090000623 proteins and genes Proteins 0.000 description 1
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Databases & Information Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Software Systems (AREA)
- Data Mining & Analysis (AREA)
- Human Computer Interaction (AREA)
- Management, Administration, Business Operations System, And Electronic Commerce (AREA)
Abstract
A form creating method based on React and having automatic arrangement layout rendering and verification is characterized in that different form layout pages can be rendered through configuration layout, form elements, initial values, verification rules and error information display when verification fails are associated, the whole form data is submitted and returned through a whole form data callback function, different forms with custom layout can be created by defining React components, so that the form pages with different layouts can be generated quickly, repeated reading of codes is greatly reduced, and the method has strong maintainability and expansibility.
Description
Technical Field
The invention relates to the technical field of forms, in particular to a form creating method with automatic arrangement layout rendering and verification based on React.
Background
The form is an element which exists in a large quantity and has various forms in a website, namely the form which is used as a plurality of search condition boxes or the form which is displayed and submitted. The number of elements repeated therein is relatively large. At present, when a plurality of form pages are generated, most of the form pages are written with independent form elements, and the layout of each form page needs to be written independently. At this time, rendering the form control with automatic arrangement layout and verification function according to different business requirements is very important.
When a form page is generated and a checking function is performed on the current market, the following defects are present: 1. at present, when a plurality of form pages are generated, independent form elements are written, and the layout of each form page needs to be written independently. Thus, many times, some form pages with little variability have to be written in multiple copies. Even the same form, when placed inside different page layouts, must be rewritten. This is not only code redundancy, but also inconvenient to maintain and expand. 2. At present, most of forms on the market are checked based on jQuery, which is based on DOM operation, so that the checking during data change needs to be performed on each independent form element one by one. Moreover, the performance and reusability of pages based on DOM operations is poor.
The present inventors have completed the present invention by combining the read technique and the form technique based on an understanding of both techniques. The invention is implemented based on React, because when a component is defined based on React, the parameters that the component needs to enter can be customized. In the React, the self-defined assembly is the same as the ordinary html tag, the self-defined React assembly (namely the React control) can be used anywhere in a page, only the automatic layout needs to be packaged in the self-defined React assembly, and only the corresponding configuration needs to be transmitted when the self-defined React assembly is used. Thus, the code reusability is high, and the maintenance and the expansion are more convenient. The fact is based on data driving, the form component is taken as a controlled component, the change of form data is controlled by the fact that the fact is controlled by the fact, when the input value of the form element changes, monitoring can be conducted on the form element, and then data can be further processed (escape, verification, error prompt information display and the like), so that the verification rule and the error information display can be independently separated. This eliminates the need for a large amount of code to process and optimizes the performance of the page. The form creating method with automatic arrangement layout rendering and verification based on React can enable form pages with different layouts to be generated quickly, has efficient verification and submission functions, can greatly reduce repeated reading of codes, and has strong maintainability and expansibility.
Disclosure of Invention
Aiming at the defects or shortcomings in the prior art, the invention provides a form creating method with automatic arrangement layout rendering and verification based on React, different form layout pages can be rendered through configuration layout, error information display is associated when form elements, initial values, verification rules and verification fail, the whole form data is submitted and the whole form data callback function is returned, different forms with self-defined layout can be created by defining a React component, so that the form pages with different layouts can be quickly generated, the repeated reading of codes is greatly reduced, and the form creating method has strong maintainability and expansibility.
The technical solution of the invention is as follows:
the form creation method with automatic arrangement layout rendering and verification based on React is characterized by comprising the following steps of using a React component, wherein the React component comprises the following form function configuration items: presetting default layout of the unit elements of the whole body surface; presetting the layout of exclusive row of table unit elements; presetting an integral initial value of the table element; presetting an independent initial value of the table element; presetting the type and the editable or not of the table element; presetting a check rule of the table element; checking an input value; submitting the form data to a background; and acquiring form data.
In the form creation, one of the following overall functions is realized by selecting and using several items in the form function configuration items: automatically arranging the layout forms; displaying data; data verification; submitting form data; and acquiring and processing form data.
In the form creation, different form layout pages are rendered by displaying and associating form elements, initial values, check rules and error information when the check fails.
And the form data is submitted to the background in a mode of configuring the submitUrl attribute value of the React component as the url address of the background so as to carry out direct submission.
And the step of submitting the form data to the background comprises the step of triggering a callback function to return the whole form data.
The acquiring the form data comprises configuring an onSubmit attribute of the React component as an incoming function so that the form data is incoming as a parameter of the function.
The form function configuration item of the checking input value comprises the following steps of automatically triggering a checking process: step A1, judging whether the input value of the table element changes, if so, automatically triggering verification; step A2, verifying the input value of the form element according to the preset verification rule of the form element; step A3, judging whether the verification passes, if not, displaying error information that the verification fails on the table element.
The form creation method comprises the following steps: step B1, creating a React component of the form; step B2, presetting layout, and setting a plurality of table elements of each default line and whether a certain form has an exclusive line; step B3, presetting the check rule and initial value of each form, including setting an initial value of the whole form corresponding to an integral object or an independent initial value of each form element; step B4, automatically rendering the overall layout form and the necessary filling mark; step B5, when the input value of a form element changes, automatically triggering verification, verifying the value input by the form with the corresponding verification rule, and if the verification fails, displaying error information; and step B6, when the form is submitted, all elements of the form and the corresponding check rules are checked, error information of the elements is displayed on all the elements which do not pass the check, and if all the elements pass the check, the elements are submitted to the configured background address and a callback function is triggered to return the whole form data.
The checking rule has a certain filling attribute which is set independently, and automatically generates a certain filling mark and an error prompt matched with default prompt information in the configured form element.
The invention has the following technical effects: the form creating method based on React and having the functions of automatic arrangement layout rendering and verification can automatically arrange layout rendering and verification for forms and automatically submit and acquire form data, and has the advantages of high development efficiency, high code expansibility and high maintainability compared with the conventional compiling of compiling form pages. Compared with the existing technologies of table element data acquisition and monitoring of table element input data change through Dom operation of jQuery, the table component based on a data driving mode directly binds the state data of the component to the state data of the component, the change of the table data directly affects the state data change of the component, and the state data of the component is fed back to a page for display. Therefore, the transmitted initial object data, the form data displayed on the page, the check when the form input is changed, the error information display when the check fails, the finally submitted background data and the returned form data are relatively independent and are connected in series through the data, and the performance and the development efficiency are greatly improved. In addition, by using the invention, html codes are hardly required to be written, and only a simple React component is required to be defined, and the configuration of corresponding functions is carried out, so that a form page with automatic arrangement layout rendering and verification functions can be realized.
The invention has the following characteristics: 1. and (4) automatic arrangement layout rendering of the form and an algorithm thereof. 2. And (4) presetting a check rule (a plurality of check rules are built in), and automatically triggering check and displaying error information. 3. The initial values of the form and some common characteristics are directly preset. 4. And automatically submitting the form data to a background and returning the whole form data through a callback function.
Drawings
FIG. 1 is a schematic diagram of React components used in implementing the React-based form creation method with automatic arrangement layout rendering and verification of the present invention. The reach component in fig. 1 includes the following form function configuration items: presetting default layout of the unit elements of the whole body surface; presetting the layout of exclusive row of table unit elements; presetting an integral initial value of the table element; presetting an independent initial value of the table element; presetting the type and the editable or not of the table element; presetting a check rule of the table element; checking an input value; submitting the form data to a background; and acquiring form data. These form function configuration items can form different React components through different combinations, for example, 1, S101 → S104/S105 → S106, and the form element is set in the non-editable state, and the form component is a component for purely displaying data. E.g., 2, S101 → S107 → S108, where the form component is a component purely for verification. E.g., 3, S101 → S106 → S109, when the form component is a pure form submission component. E.g., 4, S101 → S106 → S110, when the form component is a pure form filling and processing component.
Fig. 2 is a flowchart of automatic triggering verification under form function configuration items such as the verification rule and the verification input value of the preset form element in fig. 1. FIG. 2 includes step A1, determining whether the input value of the form element changes, if yes, automatically triggering the verification; step A2, verifying the input value of the form element according to the preset verification rule of the form element; step A3, judging whether the verification passes, if not, displaying error information that the verification fails on the table element.
FIG. 3 is a flow diagram of creating a form with automatic arrangement layout rendering and verification using the form function configuration item of the React component. FIG. 3 includes step B1, creating the React component of the form; step B2, presetting layout, and setting a plurality of table elements of each default line and whether a certain form has an exclusive line; step B3, presetting the check rule and initial value of each form, and setting an integral object corresponding to all the initial values of the whole form or the independent initial value of each form element; step B4, automatically rendering the overall layout form and the necessary filling mark; step B5, when the input value of a form element changes, automatically triggering verification, verifying the value input by the form with the corresponding verification rule, and if the verification fails, displaying error information; and step B6, when the form is submitted, all elements of the form and the corresponding check rules are checked, error information of the elements is displayed on all the elements which do not pass the check, and if all the elements pass the check, the elements are submitted to the configured background address and a callback function is triggered to return the whole form data.
FIG. 4 is a diagram showing the configuration of the form functions of the React component. FIG. 4 includes the React component < Autoform > </Autoform >, including numByRow ═ 2// setting the default two form elements per row between < Autoform and > </Autoform >; data-name: and, gene der: age: weight: and/presetting an initial value of the whole form; forms// configure all the Table elements: label: name/gender/male/female/age/weight// field description; name: name/generator/age/weight// field name; isRequire: true// if padding is necessary; type: select// epi-cytokine type; enum: // the enumerated value of the drop-down form element (the value inside the drop-down selection box corresponding to the drop-down selection box); and (3) rules: // check rule (type: number, message: please not to enter a non-number; maxlength:3, message: age cannot exceed 3 digits); initialvalvalue: 70kg// an independently set initial value.
Detailed Description
The invention is explained below with reference to the figures (fig. 1-4) and the examples.
FIG. 1 is a schematic diagram of React components used in implementing the React-based form creation method with automatic arrangement layout rendering and verification of the present invention. Fig. 2 is a flowchart of automatic triggering verification under form function configuration items such as the verification rule and the verification input value of the preset form element in fig. 1. FIG. 3 is a flow diagram of creating a form with automatic arrangement layout rendering and verification using the form function configuration item of the React component. FIG. 4 is a diagram showing the configuration of the form functions of the React component. Referring to fig. 1 to 4, a method for creating a form with automatic arrangement layout rendering and verification based on fact includes using a fact component, and the fact component includes the following form function configuration items: presetting default layout of the unit elements of the whole body surface; presetting the layout of exclusive row of table unit elements; presetting an integral initial value of the table element; presetting an independent initial value of the table element; presetting the type and the editable or not of the table element; presetting a check rule of the table element; checking an input value; submitting the form data to a background; and acquiring form data. In the form creation, one of the following overall functions is realized by selecting and using several items in the form function configuration items: automatically arranging the layout forms; displaying data; data verification; submitting form data; and acquiring and processing form data. In the form creation, different form layout pages are rendered by displaying and associating form elements, initial values, check rules and error information when the check fails. And the form data is submitted to the background in a mode of configuring the submitUrl attribute value of the React component as the url address of the background so as to carry out direct submission. And the step of submitting the form data to the background comprises the step of triggering a callback function to return the whole form data. The acquiring the form data comprises configuring an onSubmit attribute of the React component as an incoming function so that the form data is incoming as a parameter of the function.
The form function configuration item of the checking input value comprises the following steps of automatically triggering a checking process: step A1, judging whether the input value of the table element changes, if so, automatically triggering verification; step A2, verifying the input value of the form element according to the preset verification rule of the form element; step A3, judging whether the verification passes, if not, displaying error information that the verification fails on the table element. The form creation method comprises the following steps: step B1, creating a React component of the form; step B2, presetting layout, and setting a plurality of table elements of each default line and whether a certain form has an exclusive line; step B3, presetting the check rule and initial value of each form, including setting an initial value of the whole form corresponding to an integral object or an independent initial value of each form element; step B4, automatically rendering the overall layout form and the necessary filling mark; step B5, when the input value of a form element changes, automatically triggering verification, verifying the value input by the form with the corresponding verification rule, and if the verification fails, displaying error information; and step B6, when the form is submitted, all elements of the form and the corresponding check rules are checked, error information of the elements is displayed on all the elements which do not pass the check, and if all the elements pass the check, the elements are submitted to the configured background address and a callback function is triggered to return the whole form data. The checking rule has a certain filling attribute which is set independently, and automatically generates a certain filling mark and an error prompt matched with default prompt information in the configured form element.
For the sake of understanding, the present invention and related art to which the present invention relates will be described below.
First, noun interpretation: the terms mentioned in the present application will be briefly explained as follows.
1.1React frame: a set of frameworks that use js and xml technologies to build a composable user interface.
1.2React component: a module similar to html tags and capable of integrating multiple UIs (user interfaces) into a whole functional type is used like html tags, is directly wrapped by a component name and has custom attributes and methods. The component representations are used directly below.
1.3 component Properties (Props): when the component is used, a custom attribute used by parameters/callbacks and the like is transmitted to the interior of the component.
1.4 component status: the state mechanism of the component, when the state is modified, triggers the responsive rendering, and the component itself and its subcomponents are re-rendered, thereby displaying the new partially changed page.
1.5 epi-monolysin: the elements in the form for inputting data are commonly used as an input box, a single selection/multiple selection box, a pull-down selection box, a time selection and the like.
Secondly, the process of implementing the form automatic arrangement layout rendering and checking control based on React and the system thereof of the present invention is shown in fig. 3, and includes:
2.1 creating a React component of the form, wherein the component is the self-defined React component < AutoForm > </AutoForm >;
2.2, presetting layout, and setting a plurality of table elements of each line as default and whether a certain form has an exclusive line;
2.3 the priority of the independent initial value of the table element is higher than that of the whole object, if the initial value of the table element is set, the final displayed initial value of the table element is the independent initial value of the element;
2.4 when the input value of a form element changes, automatically triggering verification, verifying the value input by the form with a corresponding verification rule, and displaying error information if the verification fails;
2.5 when the form is submitted, all elements of all forms and the corresponding verification rules are verified, error information of all the elements of the form which are not verified is displayed on all the elements of the form which are not verified, if all the elements are verified, the elements are submitted to a configured background address, a callback function is triggered to return the whole form data, if the background address is not configured, the elements are not submitted to the background, and the elements can be submitted to the background in the callback function.
Thirdly, the following is further explained for some cases of the above process:
3.1 the "React component for creating a form" specifically includes: and automatically showing the corresponding table elements from left to right from top to bottom on the page according to all the configured table elements, aligning all the table elements at the left side, and setting the same width.
3.2 the "presetting layout, setting default several form elements per line and whether a form has an exclusive line", further includes: when the table elements displayed in one row reach the preset default number of the table elements in each row, or when a certain table element is configured to monopolize one row, the rest table elements are automatically displayed from the next row, and the rest table elements are automatically displayed in a rendering manner by repeating the steps. And exclusive list of a line, the width of the element is the width of the whole line, which is convenient for inputting and displaying data with more characters.
3.3 said "presetting the check rule and initial value of each form, and setting all the initial values of the whole form corresponding to an integral object or the independent initial values of each form element" specifically is:
3.3.1 check rules with individually settable attributes will automatically generate the required fill flag and error prompt matching with default prompt information in the configured form element, for example, an input box form element requesting to fill in the user name, if it is required, it will automatically display red on the form element to indicate it is required, and if it is submitted without inputting task information in the input box, it will display the user name to be filled in under the form element.
3.3.2 Preset initial values of the form to set an integral object, the fields in the object correspond to the name and check fields of the form elements one to one, and to the fields of the final returned object. Thus, each form element can correspond to all relevant data by only configuring a field name.
3.3.3 also sets the initial value of a table element alone, where the value displayed by the table element is no longer the value inside the whole object, but the value set by the table element alone. Therefore, the values of some form elements can be specially processed, such as form elements for displaying provinces, the value in the object is a number, and the value can be converted into the corresponding province name for displaying. Next, when there is no value of a corresponding table element in the whole object, an initial value may be independently assigned.
3.4 said "when the input value of a form element changes, automatically triggering verification, verifying the value input by the form with the corresponding verification rule, and if the verification fails, displaying error information", specifically:
when the input value of a single element is changed, an onChange event is triggered, the changed value is transmitted to a bound function, the changed value is verified with a preset verification rule corresponding to the form in the function, a verification result is fed back to the state of the component, and if the verification fails, the form component is locally rendered again, and error prompt information is displayed on the table element. And when the verification is passed, triggering the local rendering again, and displaying the normal table elements without error prompt information. As shown in fig. 2.
Referring to fig. 1, an embodiment of the present invention is: a form control and its system, this control is an open source frame based on React, and have automatic layout, automatic display initial value, automatic verification, submit to the function such as the backstage supporter automatically, including the following steps:
1, S101: creating a React component of the form; specifically, importing the provided packaged fact component: auto form, and use the assembly in the appropriate page position: < Autoform > </Autoform >.
2, S102: presetting default layout of the unit elements of the whole body surface; the value of the attribute numByRow of the component is set, which represents the number of form elements per row.
3, S103: presetting the layout of exclusive row of table unit elements; when some form element needs to monopolize a line in order to input more data, the attribute isAlone is set to true for the form element.
4, S104: presetting an integral initial value of the table element; setting the value of the attribute data of the component, wherein the value is an integral object value, such as: as set in FIG. 4 { name: 'jack', gender:0, age:12, weight:70} the values of form elements corresponding to name, gender, age, weight in the form can be set, respectively.
5, S105: presetting an independent initial value of the table element; when there is no value in the whole initial value or an initial value that requires special processing, the initial value of the element may be set separately, and the value of the attribute initial value is set for the table element, so that the finally displayed value of the element is the value of the attribute value.
6, S106: presetting the type and the editable or not of the table element; the default type of form element is input box: input. If other types of form elements, such as a drop-down selection box, a date selection box, etc., are required, the attribute type of the form element needs to be set. If the attribute isedit of a form element is set to true, the form element cannot be edited, and only the initial value of the form element can be displayed.
7, S107: presetting a check rule of the table element; for the necessity or non-necessity of filling, the table cell element has an attribute isRequire, the setting of true is necessary filling, and the setting of false is non-necessity filling. If the must-fill is set, then the table element will have a red color as the must-fill flag on it when rendered. For other check rules, the attribute rules is set for the table element, and one or more check rules can be introduced as the overall check rule of the table element.
8, S108: checking an input value; when the input value of a certain table element is changed, if a verification rule is configured, whether the input value accords with the verification rule or not is judged, and if not, corresponding error prompt information is displayed. When the form is submitted, all the form elements configured with the verification rules and the corresponding values are verified, if the form elements fail to pass the verification, the corresponding error prompt information is displayed on all the form elements which fail to pass the verification, and if all the form elements pass the verification, S109 and S110 are executed.
9, S109: submitting the form data to a background; and if the form data needs to be directly submitted to the background, configuring the value of the submitUrl attribute of the form component as the url address of the background.
10, S110: acquiring form data; if the form data is needed or submitted, the onSubmit attribute of the form component is configured, a function is transmitted, and the form data can be transmitted as a parameter of the function.
Different form layout pages can be rendered through configuration layout, form elements, initial values, check rules and error information display when the check fails are associated, and the whole form data is submitted and returned through a whole form data callback function; only one simple React object component needs to be defined, the form with the custom layout can be created, and the form verification function and the functions of form data submission and form data return for further processing are achieved, so that the development efficiency and the expansibility of the codes are greatly improved, and the codes are easier to maintain.
The steps comprising all the functions can form an embodiment of the whole function, different embodiments can be formed by combining different steps, and some configurable simple combinations are as follows:
1, S101 → S104/S105 → S106: when the form element is set to the non-editable state, the form component is a component for purely displaying data.
2, S101 → S107 → S108: the form component is now a component that is purely used for verification.
3, S101 → S106 → S109: the form component is now a pure form submission component.
4, S101 → S106 → S110: the form component is now a pure form filling and processing component.
Through the integrated steps, the overall functions of the invention include: automatically arranging the layout forms; displaying data; data verification; submitting form data; and acquiring and processing form data.
Sixth, referring to fig. 4, we use the configuration of the fact component of the form and its attributes to briefly introduce the following embodiments in which the steps containing all functions can form the overall function, and different embodiments can be formed by combining different steps, some simple combinations of which can be configured as follows:
numByRow: the default number of table elements per row is set.
Data: presetting an initial value of the whole form; the values of "name", "vendor", "age", and "weight" respectively correspond to the values of the name configured in the table element, for example, the first field is preset with the name ", and the initial value of the field with the name" specification is "jack".
3, for: configuring all the table elements; an array is configured, and each element in the array is an tableelement. Part of the information that each element can be configured is shown in the figure, and the following brief description is given:
label: a field description; the meaning of the form of the table element is shown in the form of the table element.
5, name: a field name; the unique identifier of the form element corresponds to a field of an initial value of a preset integral form or a field corresponding to a finally submitted form.
isRequire: whether filling is necessary; if set to true, then the must-fill check rule is added and the table element appears red as the must-fill flag.
Type 7: a form element type; by default, a drop-down selection box, a radio box, a multiple selection box, a time selection box, etc. may be provided.
Enum: the value inside the drop-down selection box corresponding to the drop-down selection box.
A rules: checking rules; multiple check rules and their corresponding prompt messages can be configured.
Initialvalvalue: an independently set initial value; this initial value is used as the initial value to be finally displayed on the table element.
Other configurations, such as addresses submitted to the background, callback functions at the time of form submission, etc., are relatively simple and are not described in detail herein.
Those skilled in the art will appreciate that the invention may be practiced without these specific details. It is pointed out here that the above description is helpful for the person skilled in the art to understand the invention, but does not limit the scope of protection of the invention. Any such equivalents, modifications and/or omissions as may be made without departing from the spirit and scope of the invention may be resorted to.
Claims (9)
1. The form creation method with automatic arrangement layout rendering and verification based on React is characterized by comprising the following steps of using a React component, wherein the React component comprises the following form function configuration items: presetting default layout of the unit elements of the whole body surface; presetting the layout of exclusive row of table unit elements; presetting an integral initial value of the table element; presetting an independent initial value of the table element; presetting the type and the editable or not of the table element; presetting a check rule of the table element; checking an input value; submitting the form data to a background; and acquiring form data.
2. The reach-based form creation method with automatic arrangement layout rendering and verification according to claim 1, wherein in form creation, one of the following overall functions is realized by selecting and using several of the form function configuration items: automatically arranging the layout forms; displaying data; data verification; submitting form data; and acquiring and processing form data.
3. The reach-based form creation method with automatic arrangement layout rendering and verification functions as claimed in claim 1, wherein in the form creation, different form layout pages are rendered by displaying and associating form elements, initial values, verification rules and error information when verification fails.
4. The reach-based form creation method with auto-arrange layout rendering and verification as claimed in claim 1, wherein the submission of the form data to the background includes a way to configure a submitUrl attribute value of the reach component to a url address of the background for direct submission.
5. The reach-based form creation method with automatic arrangement layout rendering and verification as claimed in claim 1, wherein the submission of the form data to the background includes triggering a callback function to return the entire form data.
6. The reach-based form creation method with auto-arrange layout rendering and verification as claimed in claim 1, wherein the obtaining form data includes configuring an onSubmit attribute of the reach component as an incoming function to have the form data incoming as a parameter of the function.
7. The reach-based form creation method with automatic arrangement layout rendering and verification as claimed in claim 1, wherein the form function configuration item of the verification input value includes the following steps of automatically triggering a verification process: step A1, judging whether the input value of the table element changes, if so, automatically triggering verification; step A2, verifying the input value of the form element according to the preset verification rule of the form element; step A3, judging whether the verification passes, if not, displaying error information that the verification fails on the table element.
8. The reach-based form creation method with automatic arrangement layout rendering and verification according to claim 1, wherein the form creation method comprises the steps of: step B1, creating a React component of the form; step B2, presetting layout, and setting a plurality of table elements of each default line and whether a certain form has an exclusive line; step B3, presetting the check rule and initial value of each form, including setting an initial value of the whole form corresponding to an integral object or an independent initial value of each form element; step B4, automatically rendering the overall layout form and the necessary filling mark; step B5, when the input value of a form element changes, automatically triggering verification, verifying the value input by the form with the corresponding verification rule, and if the verification fails, displaying error information; and step B6, when the form is submitted, all elements of the form and the corresponding check rules are checked, error information of the elements is displayed on all the elements which do not pass the check, and if all the elements pass the check, the elements are submitted to the configured background address and a callback function is triggered to return the whole form data.
9. The reach-based form creation method with automatic arrangement layout rendering and verification as claimed in claim 1, wherein the verification rule has a required fill attribute separately set, and automatically generates a required fill flag and an error prompt matching the default prompt information in the configured form element.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110070930.4A CN112749365A (en) | 2021-01-19 | 2021-01-19 | React-based form creation method with automatic arrangement layout rendering and verification |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110070930.4A CN112749365A (en) | 2021-01-19 | 2021-01-19 | React-based form creation method with automatic arrangement layout rendering and verification |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN112749365A true CN112749365A (en) | 2021-05-04 |
Family
ID=75652528
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110070930.4A Withdrawn CN112749365A (en) | 2021-01-19 | 2021-01-19 | React-based form creation method with automatic arrangement layout rendering and verification |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112749365A (en) |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113723905A (en) * | 2021-08-05 | 2021-11-30 | 中核武汉核电运行技术股份有限公司 | Nuclear power plant system selection display method, device, equipment and readable storage medium |
| CN117873600A (en) * | 2024-01-18 | 2024-04-12 | 北京庭宇科技有限公司 | Method for automatically generating customized Web form based on data specification |
Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106990952A (en) * | 2017-02-28 | 2017-07-28 | 福建天泉教育科技有限公司 | Form validation method and its system based on Vue.js |
| CN107341141A (en) * | 2017-07-24 | 2017-11-10 | 上海网易小额贷款有限公司 | List management method, device, medium and computing device |
| CN108363573A (en) * | 2018-01-11 | 2018-08-03 | 山东浪潮通软信息科技有限公司 | A kind of efficient mobile form design and rendering intent |
| CN110825371A (en) * | 2019-08-06 | 2020-02-21 | 杭州美创科技有限公司 | Method for creating, rendering and interacting button group control based on React |
| CN111104635A (en) * | 2019-12-23 | 2020-05-05 | 上海众源网络有限公司 | Table webpage generation method and device |
| CN111736835A (en) * | 2020-06-30 | 2020-10-02 | 腾讯科技（深圳）有限公司 | Form processing method and device and storage medium |
-
2021
- 2021-01-19 CN CN202110070930.4A patent/CN112749365A/en not_active Withdrawn
Patent Citations (6)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106990952A (en) * | 2017-02-28 | 2017-07-28 | 福建天泉教育科技有限公司 | Form validation method and its system based on Vue.js |
| CN107341141A (en) * | 2017-07-24 | 2017-11-10 | 上海网易小额贷款有限公司 | List management method, device, medium and computing device |
| CN108363573A (en) * | 2018-01-11 | 2018-08-03 | 山东浪潮通软信息科技有限公司 | A kind of efficient mobile form design and rendering intent |
| CN110825371A (en) * | 2019-08-06 | 2020-02-21 | 杭州美创科技有限公司 | Method for creating, rendering and interacting button group control based on React |
| CN111104635A (en) * | 2019-12-23 | 2020-05-05 | 上海众源网络有限公司 | Table webpage generation method and device |
| CN111736835A (en) * | 2020-06-30 | 2020-10-02 | 腾讯科技（深圳）有限公司 | Form processing method and device and storage medium |
Cited By (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113723905A (en) * | 2021-08-05 | 2021-11-30 | 中核武汉核电运行技术股份有限公司 | Nuclear power plant system selection display method, device, equipment and readable storage medium |
| CN117873600A (en) * | 2024-01-18 | 2024-04-12 | 北京庭宇科技有限公司 | Method for automatically generating customized Web form based on data specification |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US6668354B1 (en) | Automatic display script and style sheet generation | |
| US8578265B2 (en) | Methods and apparatus for generating a dynamic document | |
| US6871198B2 (en) | Composing and cataloging item configuration data | |
| US8713419B2 (en) | Electronic product design | |
| CN104156307B (en) | A kind of browser compatibility detection method and system | |
| US8783553B2 (en) | Method and system for mass production of variable shaped products | |
| CN112749365A (en) | React-based form creation method with automatic arrangement layout rendering and verification | |
| CN104020988B (en) | Customize the graphic user interface of manufacturing enterprise's solution screen | |
| CN105607880A (en) | Printing method and device for examined and approved documents | |
| CN108536658B (en) | Method and device for generating custom tag data | |
| CN110968317B (en) | Method and system for automatically generating vue page assembly through UCI/USI configuration file | |
| CN101271477A (en) | Enterprise portal desktop system providing personalized customization function | |
| US20070024906A9 (en) | Ratioing algorithm for a label printing system using plates | |
| CN114816404A (en) | Method and device for dynamically rendering view page, computer equipment and storage medium | |
| JP2008052603A (en) | Table editing device and table editing method | |
| US8745050B2 (en) | Definitions in master documents | |
| CN113641719A (en) | Data processing method, data processing device, computer and storage medium | |
| CN109376343A (en) | The automatic generation method and electronic equipment of a kind of list under programming platform | |
| CN111078337B (en) | Style adjustment method, system and computer readable storage medium | |
| CN114706580A (en) | Front-end webpage development method and device, storage medium and electronic equipment | |
| CN108228688B (en) | Template generation method, system and server based on XBRL | |
| CN102880550A (en) | Memory formatting method based on constraint verification | |
| JP2014059666A (en) | Task input screen customization system | |
| CN112631580B (en) | Data processing method and device and computing equipment | |
| CN117435487A (en) | Error checking method, device, equipment and medium for low code platform page definition |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| WW01 | Invention patent application withdrawn after publication |
Application publication date: 20210504 |
|
| WW01 | Invention patent application withdrawn after publication |