<Body><formMethod= "POST"Action=""> <Divclass= "int"> <label for= "username">User name:</label> <!--add required for each element you want - <inputtype= "text"ID= "username"class= "Required" /> </Div> <Divclass= "int"> <label for= "Email">Mailbox:</label> <inputtype= "text"ID= "Email"class= "Required" /> </Div> <Divclass= "int"> <label for= "Personinfo">Personal information:</label> <inputtype= "text"ID= "Personinfo" /> </Div> <Divclass= "Sub"> <inputtype= "Submit"value= "Submit"ID= "Send"/><inputtype= "Reset"ID= "res"/> </Div></form></Body>
<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>
Simple form verification of JQ