HTML Tutorial: Writing a concise page form validator

Source: Internet
Author: User
Tags comparison mail time and date

Look at the Hermit form verification, and looked at some other validation procedures and related references, wrote a relatively concise JS form verification program.

function Brief:

Verify:

HTTP address

Time and date

E-Mail

Digital

Character length Check

One entry compares to another entry (for example, confirmation input for a password)

Size comparison (only one comparison symbol)

Characteristics

Easy to expand and easily add the authentication you need

Good compatibility (ie5,6 Firefox,oprea)

Availability is good, no alert () is used to eject the prompt

Writing ideas:

The structure of the whole program and simpler, in order to be able to verify some commonly used formats, first of all JS built-in objects are extended. Like what:

String.prototype.isUrl = function(){
var url = /^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/;
var tmpStr = this;
return url.test(tmpStr);
}

This is used to verify the HTTP address.

And then write an object called Vform contains the main features that, when initialized, check for added validation rules and extend the form control object that will be validated, adding validate () and validlength () two functions, and add the onblur event to validate.

Error prompted the use of the method of creating a Div object, the error is displayed, the correct hidden. So you also need to define a style for the Div.

You need to specify the ID of the form before you use it is ID is not name or there is an error, and the rule is added to specify that the form control's Name property is not an ID

Validation Rule parameters:

obj-Form Control Name

minlength-fill in the string minimum length of 0 means that you can not fill in and 1 means is required to add

The datatype-authentication format has

E-Mail

Url

Date

Number

Any

There are also two dynamic formats that start with \, and the name of the form control must be the same as its value;

\> numbers represent greater than numbers, and so on; but there's no such thing as \>=.

maxlength-maximum length.

Unlike other programs: I am dealing with the HTTP address and date format address is different, fill in the address does not http://I will add after verification, so more humane, meet the requirements of usability. Date processing is the same, first as far as possible to fill in the format of the number of conversion, and then verify. The format takes the form of YYYY-MM-DD.

Original location: http://lxbzj.com/product/vform/index.htm, the original file applies a calendar input control here omitted.

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.