Shulou(Shulou.com)05/31 Report--

This article will explain in detail what is the method of making form verification for native js. The content of the article is of high quality, so the editor will share it with you for reference. I hope you will have a certain understanding of the relevant knowledge after reading this article.

Form validation is one of the most common functions of web front-end, and it also belongs to the basic skills of front-end development. Completing the development of a form validation on your own also helps to deepen your understanding of string processing and regular expressions.

Basic form verification includes: letter verification, number verification, letter and number verification, Chinese character verification, password verification, date verification, mobile phone verification, mailbox verification, password verification and so on.

Now let's finish writing the verification code, first let's see how the letters are verified. First write the required html code, create a form element with id as formContainer, add text boxes and buttons that need to verify the English letters, and a span element is needed to store prompt text at the back of the text box. As follows:

English alphabet:

When developing, analyze the function step by step and then realize it, you can maintain a clear train of thought.

1. Get the form elements and text box elements, as follows:

Var eFormContainer = document.getElementById ('formContainer'); var eVerifyEn = document.getElementById (' verifyEn')

two。 Bind the submit event to the form element for validation when the submit button is clicked.

EFormContainer.addEventListener ('submit',function (event) {})

This example requires that when the verification is passed, the pop-up prompt passes the verification; if the verification fails, the cursor is located in the text box and a prompt of validation failure is displayed behind the text box. Next, let's take a look at how to do this in the submit event function.

3. First declare the relevant variables in the function and get the value of the text box. The bPass variable is used to determine whether it is validated; the sPrompt variable is the prompt text; and the sValue variable is the value of the text box. As follows:

EFormContainer.addEventListener ('submit',function (event) {var bPass = false; var sPrompt ='; var sValue = eVerifyEn.value;})

4. Empty text boxes are not allowed. Determine whether the sValue is an empty string, if so, display a prompt after the text box, activate the text box, and block subsequent operations and default behavior, as shown in the following code:

EFormContainer.addEventListener ('submit',function () {/ *... * / if (sValue.trim () = ='') {/ / modify the prompt text sPrompt = 'English letters cannot be empty!'; / / locate the cursor to the alphabet text box eVerifyEn.focus (); / / display the prompt text behind the text box / / get the text box parent element let eParent = eVerifyEn.parentElement / / get the span element let eSpan = eParent.getElementsByTagName ('span') [0] where the prompt is stored; / / add the prompt eSpan [XSS _ clean] = sPrompt; / / prevent form submission event.preventDefault () in the span element; / / prevent the execution of subsequent code return;}})

5. Determine whether the value entered conforms to the rules, that is, only the English alphabet and no other characters. Declare a regular expression here to determine whether it is all English letters or not. As follows:

EFormContainer.addEventListener ('submit',function () {/ *... * / declares regular and determines whether the strings are all letters let reg = / ^ [a-zA-Z] + $/; bPass = reg.test (sValue);})

6. Based on the regular judgment result, the execution passes or blocks the submission.

EFormContainer.addEventListener ('submit',function () {/ *... * / if (bPass) {/ / pop-up prompt alert (' passed verification');} else {/ / modify prompt text sPrompt = 'only enter English letters!'; / / position the cursor to the alphabetical text box eVerifyEn.focus (); / / display prompt text behind the text box / / get the text box parent element let eParent = eVerifyEn.parentElement / / get the span element let eSpan = eParent.getElementsByTagName ('span') [0] where the prompt is stored; / / add the prompt to the span element eSpan [XSS _ clean] = sPrompt; / / prevent form submission event.preventDefault ();}})

7. When entering content in the text box, you should delete the following prompt, as shown below:

/ / bind the input event to the eFormContainer element and delegate all the input events of the text box to the eFormContainer element. / / the advantage of this is that there is no need to add events to each text box. EFormContainer.addEventListener ('input',function (event) {/ / get the current text box let eInput = event.target; / / get the text box parent element let eParent = eInput.parentElement; / / get the span element let eSpan = eParent.getElementsByTagName (' span') [0]; / / clear the prompt eSpan [XSS _ clean] =';})

The complete javascript code at this point is as follows:

Function fnFormVerify () {/ / get form element var eFormContainer = document.getElementById ('formContainer'); / / get validation letter text box var eVerifyEn = document.getElementById (' verifyEn'); / / bind submit event eFormContainer.addEventListener to form element ('submit',function () {/ / declare bPass variable to determine whether to validate var bPass = false; / / declare sPrompt variable to prompt the text var sPrompt ='' / / get the value of the alphabetic text box to make sure it is not empty, and then determine whether the value contains non-English letters. The code is as follows: var sValue = eVerifyEn.value; / / make sure it is not equal to empty if (sValue.trim () = ='') {/ / modify the prompt text sPrompt = 'English letters cannot be empty!'; / / position the cursor to the alphabetic text box eVerifyEn.focus () / / display prompt text after the text box / / get the parent element of the text box let eParent = eVerifyEn.parentElement; / / get the span element let eSpan = eParent.getElementsByTagName ('span') [0] where the prompt is stored; / / add the prompt eSpan [XSS _ clean] = sPrompt; / / prevent the form from submitting event.preventDefault () in the span element; / / prevent the execution of subsequent code return } / / declare regular and determine whether the strings are all letters let reg = / ^ [a-zA-Z] + $/; bPass = reg.test (sValue); if (bPass) {/ / pop-up prompt alert ('verified');} else {/ / modify prompt text sPrompt = 'only English letters!'; / / locate the cursor to the alphabet text box eVerifyEn.focus () / / display prompt text after the text box / / get the text box parent element let eParent = eVerifyEn.parentElement; / / get the span element let eSpan = eParent.getElementsByTagName ('span') [0] where the prompt is stored; / / add the prompt eSpan [XSS _ clean] = sPrompt; / / prevent form submission event.preventDefault () in the span element;}}) / / bind the input event to the eFormContainer element and delegate all the input events of the text box to the eFormContainer element. / / the advantage of this is that there is no need to add events to each text box. EFormContainer.addEventListener ('input',function (event) {/ / get current text box let eInput = event.target; / / get text box parent element let eParent = eInput.parentElement; / / get span element let eSpan = eParent.getElementsByTagName (' span') [0]; / / clear prompt eSpan [XSS _ clean] =';} fnFormVerify () On the native js form verification method is shared here, I hope that the above content can be of some help to you, can learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.