HTML section:
<body>
<form method= "POST" action= "" >
<div class= "int" >
<label for= "username" > User name:</label>
<!--add Required-->
<input type= "text" id= "username" class= "required" for each required element >
</div>
<div class= "int" >
<label for= "email" > Mailbox:</label>
<input Type= "text" id= "email" class= "required"/>
</div>
<div class= "int" >
<label for= " Personinfo "> Profile:</label>
<input type=" text "id=" Personinfo "/>
</div>
< Div class= "Sub" >
<input type= "Submit" value= "submitted" id= "send"/><input type= "reset" id= "res"/>
</div>
</form>
</body>
jquery section:
<script type= "Text/javascript" >//<!
[Cdata[$ (function () {/* * * The idea is to add a required tag for each required first, using the each () method. * First create an element in the each () method.
The created element is then added to the parent element by the append () method.
* This is the very 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 the user name, message verification.
* Here is a judge is (), if the user name, do the appropriate processing, if the mail to do the corresponding verification. * In the jquery framework, you can also insert an authentic JavaScript code as appropriate. For example, verify that the user name is This.value, and this.value.length.
Judge the content.
* Then the verification of the message, appears to use a regular expression. * Then add the KeyUp event and focus event for the INPUT element. It is keyup to do the verification, call the Blur event on the line.
Triggers the corresponding event with the Triggerhandler () trigger.
* The final submission of the form when the unified verification * do a good job of the overall and the details of the processing///if required, then add the Red Star logo.
$ ("form:input.required"). each (function () {var $required = $ ("<strong class= ' High ' > *</strong>");//Create Element $ (this). Parent (). append ($required);
Then append it to the document});
The text box loses focus after $ (' Form:input '). blur (function () {var $parent = $ (this). parent ();
$parent. Find (". Formtips"). Remove (); Verify user name if ($ (this). is (' #username ') {if (this.value==) |His.value.length < 6) {var errormsg = ' Please enter at least 6-bit username. '
$parent. Append (' <span class= ' formtips onError ' > ' +errormsg+ ' </span> ');
}else{var okmsg = ' input correct. '
$parent. Append (' <span class= ' formtips onsuccess ' > ' +okmsg+ ' </span> '); }//Verify message if ($ (this). is (' #email ') {if (this.value== "") | | (this.value!= "" &&!/.+@.+\. [A-za-z]
{2,4}$/.test (This.value))) {var errormsg = ' Please enter the correct e-mail address. '
$parent. Append (' <span class= ' formtips onError ' > ' +errormsg+ ' </span> ');
}else{var okmsg = ' input correct. '
$parent. Append (' <span class= ' formtips onsuccess ' > ' +okmsg+ ' </span> ');
}}). KeyUp (function () {$ (this). Triggerhandler ("blur");
). focus (function () {$ (this). Triggerhandler ("blur");
});//end blur//Submit, final validation. $ (' #send '). Click (function () {$ ("Form:input. Required "). Trigger (' blur ');
var numerror = $ (' form. OnError '). length;
if (Numerror) {return false;
Alert ("Registration is successful, password has been sent to your mailbox, please check.");
});
Resets $ (' #res '). Click (function () {$ (". Formtips"). Remove ();
}); })//]]> </script>
Above this jquery simple form verification example is small series share to everybody's content, hope can give everybody a reference, also hope everybody support cloud habitat community.
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
