CN115344850A - Web front-end form verification optimization method and system - Google Patents

Abstract

The invention relates to the technical field of client form verification optimization, in particular to a web front-end form verification optimization method which comprises the following steps: defining a verification object stream; defining a check unit whether the check unit is empty in the stream; defining a verification unit I for detecting the mobile phone number in the string; defining a second verification unit for detecting the password length in the stream; defining an environment class Validator; the beneficial effects are that: after the web front-end form verification optimization method and the system provided by the invention use the design mode to reconstruct the form verification codes, a large number of conditional branch statements in the original program are eliminated, and the codes of the verification logic are separated. If the check type needs to be expanded, newly adding a definition in the check object can be used; if the implementation of a certain check needs to be modified, the corresponding check logic algorithm can be directly modified to take effect globally. The check rules can be reused anywhere in the program and can be conveniently transplanted to other projects in the form of plug-ins.

Description

Web front-end form verification optimization method and system

Technical Field

The invention relates to the technical field of client form verification optimization, in particular to a method and a system for verifying and optimizing a web front-end form.

Background

Early, forms were verified requiring a large number of round trips to the server. Thus, on the one hand, server overhead is increased; on the other hand, no refreshment technology exists at that time, the interaction of the server side is necessary to refresh the page, for the user, the form is filled, the user clicks to submit, after the processing of dozens of seconds, the server side returns that some fields do not accord with the regulations, the fields need to be refilled, and the efficiency is very low.

In the prior art, javaScript appeared in 1995, and the main purpose of the JavaScript is to process input verification instead of a server-side language. The client verifies that the feedback is real-time and the script can also locate the specific field with the filling error. Although the non-refreshing technology is already popularized, the delay of hundreds of milliseconds still exists only depending on the verification of a server side, the viscous feeling which is difficult to accept exists in the practical use, and the experience feeling is very poor. Client side verification is indispensable.

However, common check codes of the client have the problems of relatively large functions, poor elasticity of the functions, poor algorithm reusability and the like.

Disclosure of Invention

The invention aims to provide a web front-end form verification optimization method and a system, which are used for reconstructing codes by using a design mode, separating the use of an algorithm from the realization of the algorithm, optimizing the form verification codes, and obviously improving the development and maintenance efficiency so as to solve the problems of huge functions, poor function elasticity, poor algorithm reusability and the like when a client performs form verification.

In order to achieve the purpose, the invention provides the following technical scheme: a web front-end form verification optimization method comprises the following steps:

defining a verification object stream;

defining a check unit whether the check unit is empty in the stream;

defining a verification unit I for detecting the mobile phone number in the stream;

defining a second verification unit for detecting the password length in the stream;

an environment class Validator is defined.

Preferably, the checking unit detects whether the user inputs the mobile phone number, and transmits the value and the error prompt;

and if the value is empty, prompting an error prompt and ending.

Preferably, the first checking unit detects whether the input of the user is a mobile phone number, and also transmits the value and the error prompt;

and if the value transmitted by the user is not the mobile phone number, prompting an error prompt and ending.

Preferably, the second checking unit detects whether the length of the password input by the user meets the set minimum requirement on safety, and transmits the value, the minimum length and the error prompt word;

and if the value length transmitted by the user is not accordant, prompting an error prompt and ending.

Preferably, the environment class Validator accepts the request of the client, then entrusts the request to the corresponding check object, and if a certain value is wrong, a corresponding error prompt is popped up.

A web front-end form checking optimization system is composed of a definition module, a detection module, a checking module, a password checking module and a definition module;

the definition module is used for defining a verification object stream;

the detection module is used for defining whether a verification unit is empty in the stream;

the verification module is used for defining a verification unit I for detecting the mobile phone number in the string;

the password checking module is used for defining a second checking unit for detecting the password length in the string;

and the defining module is used for defining an environment class Validator.

Preferably, in the detection module, the verification unit detects whether the user inputs a mobile phone number, and transmits the value and the error prompt; and if the value is empty, prompting an error prompt and ending.

Preferably, in the verification module, a verification unit I detects whether the input of the user is a mobile phone number, and also transmits a value and an error prompt; and if the value transmitted by the user is not the mobile phone number, prompting an error prompt and ending.

Preferably, in the password checking module, a second checking unit detects whether the length of the password input by the user meets the set minimum requirement on safety, and transmits the value, the minimum length and the error prompt in the same way; and if the value length transmitted by the user is not accordant, prompting an error prompt and ending.

Preferably, in the definition module, the environment class Validator receives a request from a client, and then delegates the request to a corresponding check object, and if a certain value is wrong, a corresponding error prompt is popped up.

Compared with the prior art, the invention has the beneficial effects that:

after the web front-end form verification optimization method and the system provided by the invention use the design mode to reconstruct the form verification codes, a large number of conditional branch statements in the original program are eliminated, and the codes of the verification logic are separated. If the check type needs to be expanded, newly adding a definition in the check object can be used; if the implementation of a certain check needs to be modified, the corresponding check logic algorithm is directly modified to take effect globally. The check rules can be reused anywhere in the program and can be conveniently transplanted to other projects in the form of plug-ins. And the development and maintenance efficiency is obviously improved.

Drawings

FIG. 1 is a flow chart of the method of the present invention.

Detailed Description

In order to make the objects, technical solutions and advantages of the present invention clear and fully described, embodiments of the present invention will be further described in detail below with reference to the accompanying drawings. It should be understood that the specific embodiments described herein are illustrative of some, but not all, embodiments of the invention and are not to be construed as limiting the scope of the invention, as those skilled in the art will recognize and appreciate that many other embodiments can be made without inventive faculty.

In the description of the present invention, it should be noted that the terms "center", "middle", "upper", "lower", "left", "right", "inner", "outer", "top", "bottom", "side", "vertical", "horizontal", and the like indicate orientations or positional relationships based on those shown in the drawings, and are only for convenience of description and simplicity of description, but do not indicate or imply that the referred device or element must have a specific orientation, be constructed in a specific orientation, and be operated, and thus, should not be construed as limiting the present invention. Furthermore, the terms "first," "second," "third," "fourth," "fifth," and "sixth" are used for descriptive purposes only and are not to be construed as indicating or implying relative importance.

In the description of the present invention, it should be noted that, unless otherwise explicitly specified or limited, the terms "mounted," "connected," and "connected" are to be construed broadly, e.g., as meaning either a fixed connection, a removable connection, or an integral connection; can be mechanically or electrically connected; they may be connected directly or indirectly through intervening media, or they may be interconnected between two elements. The specific meanings of the above terms in the present invention can be understood in a specific case to those of ordinary skill in the art.

For the purposes of simplicity and explanation, the principles of the embodiments are described by referring mainly to examples. In the following description, numerous specific details are set forth in order to provide a thorough understanding of the embodiments. It will be apparent, however, to one skilled in the art that the embodiments may be practiced without these specific details. In some instances, well-known methods and structures have not been described in detail so as not to unnecessarily obscure the embodiments. In addition, all embodiments may be used in combination with each other.

Example one

Referring to fig. 1, the present invention provides a technical solution: a verification optimization method for a form at a WEB front end comprises the following steps:

defining a verification object strategy; the code is as follows: var stream = { };

defining a check unit whether the check unit is empty in the string; the checking unit detects whether a user inputs a mobile phone number or not and transmits a value and an error prompt; if the value is empty, prompting an error prompt and ending; the codes are as follows: funtion (value, errMsg) front opening

If(value＝＝＝”){

Return errMsg；

}

}

Defining a verification unit I for detecting the mobile phone number in the stream; the checking unit I detects whether the input of the user is a mobile phone number, and also transmits a value and an error prompt; if the value transmitted by the user is not the mobile phone number, an error prompt is prompted, and the operation is finished; the codes are as follows: function (value. Errmsg) ready pocket

if(！/(^1[3|4|5|7|8][0-9]{9}$)/.test(value)){

return errMsg；

}

}

Defining a second verification unit for detecting the password length in the stream; the second checking unit detects whether the length of the password input by the user meets the set minimum requirement on safety, and also transmits value, the minimum length and an error prompt; if the value length transmitted by the user is not accordant, an error prompt is prompted, and the operation is finished; the codes are as follows:

an environment class Validator is defined, and the environment class receives the request of the user and then delegates the request to the corresponding check object.

Step 1, defining an environment class Validator and defining a cache array to store the check rule.

var Validator＝function(){

this.cache＝[]

}。

And 2, creating an add method, and adding a check rule by using the add method when a user calls the add method.

And 3, establishing a start method, and starting verification by the start method when a user calls the method. If there is an error, an error message (errMsg) is returned.

And step 4, using by the user. The user creates a method, in the method, the verification rule of the user name, the mobile phone number and the password is added through add, and the verification is started through a start method. If the errMsg is returned, the check fails, an error prompt message pops up, and form submission is prevented.

Example two

A web front-end form checking optimization system is composed of a definition module, a detection module, a checking module, a password checking module and a definition module;

the definition module is used for defining a verification object strategy;

the detection module is used for defining whether a verification unit is empty in the stream; the checking unit detects whether a user inputs a mobile phone number or not and transmits a value and an error prompt; if the value is empty, prompting an error prompt and ending;

the verification module is used for defining a verification unit I for detecting the mobile phone number in the string; the checking unit I detects whether the input of the user is a mobile phone number, and also transmits a value and an error prompt; if the value transmitted by the user is not the mobile phone number, an error prompt is prompted, and the operation is finished;

the password checking module is used for defining a second checking unit for detecting the password length in the string; the second checking unit detects whether the length of the password input by the user meets the set minimum requirement on safety, and also transmits the value, the minimum length and an error prompt; if the value length transmitted by the user is not accordant, an error prompt is prompted, and the operation is finished;

and the defining module is used for defining an environment class Validator.

Although embodiments of the present invention have been shown and described, it will be appreciated by those skilled in the art that changes, modifications, substitutions and alterations can be made in these embodiments without departing from the principles and spirit of the invention, the scope of which is defined in the appended claims and their equivalents.

Claims (10)

1. A method for verifying and optimizing a form at a front end of a web is characterized by comprising the following steps: the web front-end form verification optimization method comprises the following steps:

defining a verification object stream;

defining a check unit whether the check unit is empty in the string;

defining a verification unit I for detecting the mobile phone number in the stream;

defining a second verification unit for detecting the length of the password in the stream;

an environment class Validator is defined.

2. The web front-end form verification optimization method of claim 1, wherein: the checking unit detects whether the user inputs the mobile phone number or not and transmits the value and the error prompt;

and if the value is empty, prompting an error prompt and ending.

3. The web front-end form verification optimization method according to claim 2, characterized in that: the first checking unit detects whether the mobile phone number is input by a user, and transmits a value and an error prompt in the same way;

and if the value transmitted by the user is not the mobile phone number, prompting an error prompt and ending.

4. The web front-end form verification optimization method according to claim 1, wherein: the second checking unit detects whether the length of the password input by the user meets the set minimum requirement on safety, and also transmits the value, the minimum length and an error prompt;

and if the value length transmitted by the user is not accordant, prompting an error prompt and ending.

5. The web front-end form verification optimization method according to claim 1, wherein: the environment class Validator receives the request of the client, then delegates the request to the corresponding check object, and if a certain value is wrong, a corresponding error prompt is popped up.

6. A web front end form verification optimization system as claimed in any one of claims 1 to 5, wherein: the system consists of a definition module, a detection module, a verification module, a password checking module and a definition module;

the definition module is used for defining a verification object strategy;

the detection module is used for defining whether a verification unit is empty in the stream;

the verification module is used for defining a verification unit I for detecting the mobile phone number in the string;

the password checking module is used for defining a second checking unit for detecting the password length in the string;

and the defining module is used for defining an environment class Validator.

7. The web front end form verification optimization system of claim 6, wherein: in the detection module, a verification unit detects whether a user inputs a mobile phone number or not and transmits a value and an error prompt;

and if the value is empty, prompting an error prompt and ending.

8. The web front end form verification optimization system of claim 7, wherein: in the verification module, a first verification unit detects whether the mobile phone number is input by a user, and transmits a value and an error prompt in the same way;

and if the value transmitted by the user is not the mobile phone number, prompting an error prompt and ending.

9. The web front end form verification optimization system of claim 8, wherein: in the password checking module, a second checking unit detects whether the length of the password input by the user meets the set minimum requirement on safety, and also transmits the value, the minimum length and an error prompt;

and if the value length transmitted by the user is not accordant, prompting an error prompt and ending.

10. The web front end form verification optimization system of claim 9, wherein: in the definition module, an environment class Validator receives a request of a client, then delegates the request to a corresponding check object, and if a certain value is wrong, a corresponding wrong prompt is popped up.

Images