Home > Developer > JavaScript

JavaScript Form Validation Common code

Source: Internet
Author: User
Tags html form numeric php and php code regular expression zip
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞


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


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 php javascript inline form validation javascript and php form validation javascript form validation in php php and javascript form validation php javascript form validation example zip code validation in javascript
Related Article
JavaScript solution to the eight Queens Problem method summar...
The difference between single and double quotes in JavaScript...
Http status code: 301, 302 redirection, 302 redirection
The html space symbol nbsp; ensp; emsp; introduces and implem...
Ajax and 302 response code Testing
Ajax and 302 response code test_javascript-js tutorial

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