jquery How to achieve simple form verification, we first share with you the implementation of ideas.
About the idea:
Add the required tags for each required first, and use each () method to implement it.
In each () method, first Create an element and then add the created element to the parent element through 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 message 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 is performed and the regular expression is used.
Then add the KeyUp event and Focus event for the INPUT element, which is to do the validation when KeyUp, and invoke 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 details of the processing.
If required, add a Red Star logo .
jquery section:
<script type= "Text/javascript" >//<! [Cdata[$ (function () {$ ("form:input.required"). each (function () {var $required = $ ("<strong class= ' High ' > *&L T;/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== "| | This.value.length < 6) {var errormsg = ' Please lose
Enter at least 6 user names. ';
$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>
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>
The above is jquery to achieve simple form verification key code, hope to help everyone's learning.