JavaScript Instance Tutorial (9) Verifying form validity

Source: Internet
Author: User
Tags mail return
javascript| Tutorial

Using JavaScript forms for validity testing

The validation of a form is a useful aspect of JavaScript. It can be used to check a given form and find any problems in the form, such as a blank input box or an invalid e-mail address, and then it notifies the user and does not pass the wrong form to the server to save time. In addition, some of the changes to the form label are similar to those of other types of scripts. The following example is a simple form, as shown in the following form. You can leave the Name box blank or enter an email address without the @ symbol, that is, input the wrong content, and see JavaScript is the validity of the form test.

Name:
E-Mail:


As a result you can see that if you forget to enter a particular type of data into the form, it warns you and cancels the submission to the server. It does not send the form to the server until you type the correct information.

Let's take a look at how the form is validated in JavaScript. One of the most important code in form validation is a time processor at the form label where the time processor (OnSubmit) submits the form when it must return a true value. The following is a detailed form code:

<form

NAME = "Theform"

ACTION = "mailto:"

method = "POST"

enctype = "Multipart/form-data"

>

When the submit button is pressed, the time processor is triggered and it then executes the function FormCheck (), which is used to check if there are no errors in the form.

The code for the FormCheck () function is as follows:

function FormCheck ()

{

if (Document.theform.user_name.value = "")

{

Alert ("Please put in a name.");

return false;

}

if (Document.theform.email.value.indexOf ("@") = = 1 | |

Document.theform.email.value = "")

{

Alert ("Please include a proper e-mail address.");

return false;

}

}

First, the FormCheck () function determines whether the user name is entered as null. If blank, it also warns the user and returns a value of false, which is not sent to the server. Then the FormCheck () function is to determine whether the email address input contains an @ symbol or is empty. If there is no either a @ symbol or NULL, it warns the user and returns a value of false so that the form is not sent to the server. None of the above errors will send the form to the server until the full form is filled out before the form is sent to the server.

The principle of the above program is to get the value of each element of the form, and then add whether it equals "= =" certain content, or the intrinsic content (such as email @).

You can expand its functionality by doing this, such as perfecting the email verification function, plus the address of the mail server after the "@" and a little "." The following figure:

You can also increase the verification of the contents of the letter. The added code is the value of the text box that gets the contents of the letter:
Document.theform. The text box name for the contents of the letter. Value = = ""



Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.