JavaScript Form Validation Common code

Source: Internet
Author: User
Tags html form numeric php and php code regular expression zip

JavaScript can be used to validate these input data in an HTML form before the data is sent to the server.

The typical form data that is validated by JavaScript is:

• Has the user filled out the required items in the form?
• Is the email address that the user entered legal?
• Has the user entered a valid date?
• Does the user enter text in the Data field (numeric field)?

Here is the complete code for the HTML form:

The code is as follows

<script type= "Text/javascript" >
function Validate_email (field,alerttxt)
{
With (field)
{
Apos=value.indexof ("@")
Dotpos=value.lastindexof (".")
if (apos<1| | DOTPOS-APOS<2)
{alert (alerttxt); return false}
else {return true}
}
}

function Validate_form (thisform)
{
With (Thisform)
{
if (validate_email (email, "Not a valid e-mail address!") ==false)
{Email.focus (); return false}
}
}
</script>

<body>
<form action= "submitpage.htm" onsubmit= "return Validate_form (this);" method= "POST" >
Email: <input type= "text" name= "email" size= ">"
<input type= "Submit" value= "Submit" >
</form>
</body>

It's just a very simple example of a mailbox validation, and we'll see

The validation features are as follows:

1. Information prompts when the form INPUT element gets focus

2. Validate when form INPUT element loses focus

3. Validation of the entire form when the form is submitted.

The validation effect is as follows:

1. The state of gaining focus
2. Loss of focus validation failed style


3. Loss of focus validation successful style

4. Status of validation when no input is clicked directly on the Submit button

It contains two source files, one is the Checkform.js file, one contains the form HTML file

There are a few points in it. But it's a trifle for a master.
1.getElementById
var Obj=document.getelementbyid (_obj.id);
var Info=document.getelementbyid (_obj.id+ "info");
To obtain the validated form elements, use this when passing, and receive the nature is the object.

2. Regular expressions
I've found the right one. Choose the day will stick some commonly used to share with you
3.info.innerhtml = "xxxx"
Inserts validation status information to a specified node
4.info.style.color = ' Blue ';
Change the specified style and use Info.classname = "" If the style is specified;
5. Use of Return values


js/**//*
Validation requirements: Validating the form's lost focus event and form submission
Form Description: There should be an element next to the form to store the hint information, name the form element name +info, and specify an ID for the validation form element
Function Description: Receives the form's element name and form state (0 for the focus, 1 for loss of focus), and inserts the results of the validation into the ID next to the form
Verification process: 1. Receive the ID and form status of the form element, and obtain the value; 2. Formulation of regular expression 3. Validation processing
4. Feedback processing results to the area next to the specified form. * *
Verify that the IS empty

The code is as follows

function IsEmpty (_obj,flag) {
var obj = document.getElementById (_obj.id);
var info = document.getElementById (_obj.id+ "info");
if (flag) {
if (Obj.value.length = = 0) {
Showinfo (Info, "This content cannot be empty", "red")
return false;}
else{
Showinfo (info, "√", "green")
return true;}
}
else{
Showinfo (Info, "Please enter the appropriate form content!") "," Blue ")
return false;
}
}

Verify the ZIP code, the content is not required fields, if filled out to verify
function Ispostcode (_obj,flag) {
var obj = document.getElementById (_obj.id);
var info = document.getElementById (_obj.id+ "info");
var reg =/^d{6}$/;
if (flag) {
if (obj.value.length>0) {
if (Reg.test (obj.value) ==false) {
Showinfo (Info, "Please enter 6 digits for valid ZIP code format!", "Red")
return false;}
else{
Showinfo (info, "√", "green")
return true;}
}
else{
Showinfo (Info, "Postcode for optional content", "black")
return true;}
}
else{
Showinfo (info, "ZIP code format 6 digits", "blue")
}
}

Verifying e-mail
Parameters: Email table cell ID, whether there are required, form status
function Isemail (_obj,isempty,flag) {
var obj = document.getElementById (_obj.id);
var info = document.getElementById (_obj.id+ "info");
var reg =/^[w-]+ (. [ w-]+) *@[w-]+ (. [ w-]+) +$/;
if (flag) {
if (IsEmpty) {
if (Obj.value = = "") {
Showinfo (Info, "e-mail cannot be empty", "red")
return false; }
if (Reg.test (obj.value) ==false) {
Showinfo (info, "email format is incorrect", "red")
return false;}
else{
Showinfo (info, "√", "green")
return true;}
}
else{
if (obj.value.length>0) {
if (Reg.test (obj.value) ==false) {
Showinfo (info, "email format is incorrect", "red")
return false;}
else{
Showinfo (info, "√", "green")
return true; }
}
else{
Showinfo (Info, "If not, also can not stay!") "," BLACK ")
return true; }
}
}
else{
Showinfo (Info, "Fill out this so we can get in touch with You", "Blue")}
}

Phone Verification: Non-required content
function Isphone (_obj,flag) {
var Obj=document.getelementbyid (_obj.id);
var Info=document.getelementbyid (_obj.id+ "info");
var reg=/(^[0-9]{3,4}-[0-9]{3,8}$) | (^[0-9]{3,8}$) | (^ ([0-9]{3,4}) [0-9]{3,8}$] | (^0{0,1}13[0-9]{9}$)/;
if (flag) {
if (obj.value.length>0) {
if (Reg.test (obj.value) ==false) {
Showinfo (info, "phone format is not correct", "red")
return false; }
else{
Showinfo (info, "√", "green")
return true;
}
}
else{
Showinfo (Info, "Please fill in this item if convenient!") "," BLACK ")
return true;
}
}
else{
Showinfo (Info, "Please fill in this item if convenient!") "," Blue ")
}
}

Display information
function Showinfo (_info,msg,color) {
var info=_info;
info.innerhtml = msg;
Info.style.color=color;
}

<script language= "javascript" type= "Text/javascript" >
function Checkform (frm) {

var Refalg=false;
var F1,f2,f3,f4,f5,f6,f7;
F1 = IsEmpty (frm.title,1)
F2 = IsEmpty (frm.name,1)
F3 = IsEmpty (frm.addr,1)
F4 = IsEmpty (frm.content,1)
F5 = Isphone (frm.tel,1)
F6 = Isemail (frm.mail,0,1)
F7 = Isemail (frm.msn,0,1)
Refalg = F1 && F2 && f3 && f4 && f5 && f6 && F7
Alert (REFALG)
return refalg;
if (REFALG)
{
Frm.submit ();
}
Else
{
Alert ("Please check that the form content is complete!") ");
}
}
</script>

Place submitted: <a href= "#" onclick= "Javascript:checkform (document.forms[' Form1 '));" > Submit </a>&


10 powerful JavaScript form validation Plug-ins recommended


10 Good JavaScript form verification plug-ins, use them to save your time! I hope you like it.

1. Validate.js

Validate.js is a very good JavaScript form authentication library, originating from the CodeIgniter API. The library is fairly lightweight (less than 1KB) and does not require any JavaScript framework to run in all major browsers (including IE 6).

2. Zebra Form

Zebra_form is a free PHP library that works well with form validation. You can design a safe, chic form with just a small amount of PHP code. Zebra_form integrates jquery on the front end to display warnings and error prompts.

3. Jformer

Jformer is a jquery based form framework that allows you to generate beautiful, standard-compliant forms. Features include: Client authentication, server-side validation, Ajax submission, customizable skins through CSS, validation code support, common form templates, and more.

4. Jquery.validval

The Jquery.validval plug-in is designed to simplify the form validation feature. This plug-in can be used with any HTML form (including Ajax asynchronous loading) to implement the validation of the form by defining various validation rules.

5. Validity

Validity is a powerful and flexible jquery form framework that enables simultaneous validation of both the client and server side. It is only 9KB in size and can perform a variety of simple or complex validations, including dynamic or set-condition validation. The plugin also controls how the validation information will be displayed to fit the site's appearance/style.

6. ValidForm Builder

ValidForm Buider is a simple Web form generation tool that uses XHTML 1.0 and CSS. It is an open source PHP and JavaScript (jQuery) library, very good to quickly and securely create a professional web validation form.

7. Ketchup

Ketchup is an easy to customize (from appearance to Functionality) jquery form plug-in that can be used by clients to authenticate user forms.

8. validatious

Validatous is an easy-to-use unobtrusive javascript form validation library that does not rely on any JS framework. Built-in numeric, e-mail, URL, max/min character verification and other functions.

9. Form Validator

A wide range of form validation scenarios that apply to any form. A floating error prompt will pop up when validation fails.

Vanadiumjs

Large-Scale Price Reduction
  • 59% Max. and 23% Avg.
  • Price Reduction for Core Products
  • Price Reduction in Multiple Regions
undefined. /
Connect with us on Discord
  • Secure, anonymous group chat without disturbance
  • Stay updated on campaigns, new products, and more
  • Support for all your questions
undefined. /
Free Tier
  • Start free from ECS to Big Data
  • Get Started in 3 Simple Steps
  • Try ECS t5 1C1G
undefined. /

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.