Home > Developer > Web Develop
Form validation is frequently encountered during web site development, and can be verified using server-side language validation or the client language. This article introduces you to a simple example of the jquery client validation form. Examples are for reference only.
<body><form method= "POST" action= "" > <div class= "int" > <label for= "username" > User name:</label> <!--add required for each desired element---<input type= "text" id= "username" Clas s= "Required"/> </div> <div class= "int" > <label for= "email" > Email:</label> <input type= "text" id= "email" class= "required"/> </div> <div cl ass= "int" > <label for= "Personinfo" > Profile:</label> <input type= "text" id= "Personinfo"/> </div> <div class= " Sub "> <input type=" Submit "value=" commit "id=" send "/><input type=" reset "id=" res "/> </div></ Form></body><script src= "/public/js/jquery-1.7.1.min.js" ></script><script type= "text/ JavaScript ">//<! [Cdata[$(function(){ /** The idea is to add the required tags for each required first, using each () method. * First create an element in the each () method. The created element is then joined by the Append () method after the parent element. * This is the essence of this, each time the this corresponds to the corresponding INPUT element, and then get the corresponding parent element. * Then add the lost focus event for the INPUT element. Then authenticate the user name and the message. * Here is a judge is (), if the user name, do the appropriate processing, if the message is to do the corresponding verification. * In the jquery framework, you can also properly interspersed with the original JavaScript code. For example, verify that the user name has This.value, and this.value.length. Make judgments about the content. * Then the verification of the mail, it seems to use the regular expression. * Then add the KeyUp event to the INPUT element and the focus event. It is in the KeyUp to do a bit of verification, call the Blur event on the line. Use the Triggerhandler () trigger to trigger the corresponding event. * Unified verification when submitting a form at the end of the process * complete and detailed processing*/ //if it is required, add the Red Star logo.$ ("form:input.required"). each (function(){ var$required = $ ("<strong class= ' High ' > *</strong>");//Creating Elements$( This). Parent (). append ($required);//and append it to the document. }); //after the text box loses focus$ (' Form:input '). Blur (function(){ var$parent = $ ( This). parent (); $parent. Find (". Formtips"). Remove (); //Verify user name if( $( This). is (' #username ') ){ if( This. value== "" | | This. value.length < 6 ){ varerrormsg = ' Please enter a user name of at least 6 bits. '; $parent. Append (' <span class= ' formtips onError ' > ' +errormsg+ ' </span> '); }Else{ varokmsg = ' input correct. '; $parent. Append (' <span class= ' formtips onsuccess ' > ' +okmsg+ ' </span> '); } } //Verifying Messages if( $( This). is (' #email ') ){ if( This. value== "" | | ( This. value!= "" &&!/[email protected]+\. [A-za-z] {2,4}$/.test ( This. Value)) ){ varerrormsg = ' Please enter the correct e-mail address. '; $parent. Append (' <span class= ' formtips onError ' > ' +errormsg+ ' </span> '); }Else{ varokmsg = ' input correct. '; $parent. Append (' <span class= ' formtips onsuccess ' > ' +okmsg+ ' </span> '); }}). KeyUp (function(){ $( This). Triggerhandler ("Blur"); }). Focus (function(){ $( This). Triggerhandler ("Blur"); });//End Blur //submit, final verification. $ (' #send '). Click (function(){ $("Form:input.required"). Trigger (' blur ')); varNumerror = $ (' form. OnError '). length; if(numerror) {return false; } alert ("Registration is successful, the password has been sent to your mailbox, please check."); }); // Reset$ (' #res '). Click (function(){ $(". Formtips"). Remove (); });})//]]></script>
You can copy the code to run this instance here.
Original address: http://www.manongjc.com/article/290.html
jquery A simple form validation instance
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
