Home > Developer > JavaScript

Details about form verification in JavaScript

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Details about form verification in JavaScript
This article mainly introduces Form Verification in JavaScript, which is an important knowledge of JS communication between the frontend and the server. For more information, see

 

 

Form Verification occurs on the server. The client has entered all necessary data and then pressed the submit button. If some input client data has been lost in an incorrect format or simply, the server sends all required data back to the client, and resubmit the request in the form of correct information. This is a long process that will increase the burden on the server.

JavaScript provides a way to verify data on the client's computer before sending it to the web server. Form Verification is usually performed in two ways.

  1. Basic verification-first, the table must be checked to ensure that each of its form fields is required for data input. This will only need to loop through each field in the table and check the data.
  2. Data format verification-second, the entered data must be checked for correct format and value. This requires more logic to test data correctness.

Let's take an example to understand the verification process. The following is a simple form:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

<Html>

<Head>

<Title> Form Validation </title>

<Script type = "text/javascript">

<! --

// Form validation code will come here.

// -->

</Script>

</Head>

<Body>

<Form action = "/cgi-bin/test. cgi" name = "myForm"

Onsubmit = "return (validate ();">

<Table cellspacing = "2" cellpadding = "2" border = "1">

<Tr>

<Td align = "right"> Name </td>

<Td> <input type = "text" name = "Name"/> </td>

</Tr>

<Tr>

<Td align = "right"> EMail </td>

<Td> <input type = "text" name = "EMail"/> </td>

</Tr>

<Tr>

<Td align = "right"> Zip Code </td>

<Td> <input type = "text" name = "Zip"/> </td>

</Tr>

<Tr>

<Td align = "right"> Country </td>

<Td>

<Select name = "Country">

<Option value = "-1" selected> [choose yours] </option>

<Option value = "1"> USA </option>

<Option value = "2"> UK </option>

<Option value = "3"> INDIA </option>

</Select>

</Td>

</Tr>

<Tr>

<Td align = "right"> </td>

<Td> <input type = "submit" value = "Submit"/> </td>

</Tr>

</Table>

</Form>

</Body>

</Html>

Basic Form Verification:

First, we will show you how to perform a basic form verification. In the preceding table, The validate () function is required to verify that data occurs in the onsubmit event. The following is the implementation of the validate () function:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

<Script type = "text/javascript">

<! --

// Form validation code will come here.

Function validate ()

{

 

If (document. myForm. Name. value = "")

{

Alert ("Please provide your name! ");

Document. myForm. Name. focus ();

Return false;

}

If (document. myForm. EMail. value = "")

{

Alert ("Please provide your Email! ");

Document. myForm. EMail. focus ();

Return false;

}

If (document. myForm. Zip. value = "" |

IsNaN (document. myForm. Zip. value) |

Document. myForm. Zip. value. length! = 5)

{

Alert ("Please provide a zip in the format #####.");

Document. myForm. Zip. focus ();

Return false;

}

If (document. myForm. Country. value = "-1 ")

{

Alert ("Please provide your country! ");

Return false;

}

Return (true );

}

// -->

</Script>


Data format Verification:

Now we will see how we can verify the input form data before submitting it to the Web server.

This example shows how to verify the entered email address, which means that the email address must contain at least one @ symbol and one dot (.). In addition, @ must not be the first character of the email address. The last point must be a character after the @ symbol:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

<Script type = "text/javascript">

<! --

Function validateEmail ()

{

 

Var emailID = document. myForm. EMail. value;

Atpos = emailID. indexOf ("@");

Dotpos = emailID. lastIndexOf (".");

If (atpos <1 | (dotpos-atpos <2 ))

{

Alert ("Please enter correct email ID ")

Document. myForm. EMail. focus ();

Return false;

}

Return (true );

}

// -->

</Script>

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
javascript form validation in php aps identity verification form age verification form html equifax identity verification form javascript get ssl certificate details auto submit form using javascript in php how to get form data in javascript

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.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More