HTML Form code:
Copy Code code as follows:
<form method= "POST" action= "" >
<div class= "int" >
<label for= "username" > Username:</label>
<input type= "text" id= "username" class= "required"/>
</div>
<div class= "int" >
<label for= "username" > Mailbox:</label>
<input type= "text" id= "email" class= "required"/>
</div>
<div class= "int" >
<label for= "username" > 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>
jquery Code:
Copy Code code as follows:
$ (function () {
$ ("form:input.required"). each (function () {
var $required = $ ("<strong class= ' High ' >*</strong>");
$ (this). Parent (). append ($required); Append to document
$ (this). Parent (). prepend ($required);
});
$ (' Form:input '). blur (function () {
var $parent = $ (this). parent ();
if ($ (this). is (' #username ')) {
if (this.value== "" | | THIS.VALUE.LENGTH<6) {
var errormsg = ' Please enter at least 6-digit username ';
$parent. Append (' <span class= ' formtips onError ' > ' +errormsg+ ' </span> ');
}else{
var okmsg = ' input correct ';
$parent. Append (' <span class= ' formtips onsuccess ' > ' +okmsg+ ' </span> ');
}
}
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> ');
}
}
});
$ ("Form:input"). focus (function () {
var $parent = $ (this). parent ();
$parent. Find (". Formtips"). Remove ();
});
$ ("#send"). Click (function () {
var $parent = $ (this). Parent (). parent ();
$parent. Find (". Formtips"). Remove ();
$ ("form. Required:input"). Trigger (' blur ');
var numerror = $ (' form. OnError '). length;
if (numerror) {
return false;
}
});
$ ("#res"). Click (function () {
var $parent = $ (this). Parent (). parent ();
$parent. Find (". Formtips"). Remove ();
});
});
The code is very simple, also very easy to understand, small partners to take away the use of it, here is not explained in detail.