JQuery Vlidate Example

<! DOCTYPE html>


<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 ">
<title></title>
<script type= "Text/javascript" src= "./validate/jquery-1.7.2.min.js" ></script>
<script type= "Text/javascript" src= "./validate/jquery.validate.min.js" ></script>
<style type= "Text/css" >
* {font-family:verdana;font-size:96%;} label {width:10em;float:left;}
label.error {float:none;color:red; Padding-left:. 5em;vertical-align:top;}
P{clear:both;}. Submit {Margin-left:12em;}
Em{font-weight:bold;padding-right:1em;vertical-align:top;}
</style>

<body>
<script type= "Text/javascript" >
$ (document). Ready (function () {
/* Set default Properties */
$.validator.setdefaults ({
Submithandler:function (form) {
Form.submit ();
}
});
Character verification
JQuery.validator.addMethod ("Stringcheck", function (value, Element) {
return this.optional (Element) | | /^[\u0391-\uffe5\w]+$/.test (value);
}, "can only include Chinese characters, English letters, numbers and underscores";

Chinese characters two bytes
JQuery.validator.addMethod ("Byterangelength", function (value, element, param) {
var length = Value.length;
for (var i = 0; i < value.length; i++) {
if (Value.charcodeat (i) > 127) {
length++;
}
}
return this.optional (Element) | | (length >= param[0] && length <= param[1]);
}, "Make sure the value entered is between 3-15 bytes (2 bytes in one text)");

Identification Number Verification
JQuery.validator.addMethod ("Isidcardno", function (value, Element) {
return this.optional (Element) | | Isidcardno (value);
}, "Please enter your ID number correctly");

Mobile phone number Verification
JQuery.validator.addMethod ("IsMobile", function (value, Element) {
var length = Value.length;
var mobile =/^ ((13[0-9]{1}) | ( 15[0-9]{1})) +\d{8}) $/;
return this.optional (Element) | | (length = = && Mobile.test (value));
}, "Please fill in your mobile phone number correctly");

Phone number Verification
JQuery.validator.addMethod ("Istel", function (value, Element) {
var tel =/^\d{3,4}-?\d{7,9}$/; Phone number format 010-12345678
return this.optional (Element) | | (Tel.test (value));
}, "Please fill in your phone number correctly");

Contact Phone (phone/Phone) verification
JQuery.validator.addMethod ("Isphone", function (value,element) {
var length = Value.length;
var mobile =/^ ((13[0-9]{1}) | ( 15[0-9]{1})) +\d{8}) $/;
var tel =/^\d{3,4}-?\d{7,9}$/;
return this.optional (Element) | | (tel.test (value) | | mobile.test (value));

}, "Please fill in your contact number correctly");

ZIP Code Verification
JQuery.validator.addMethod ("Iszipcode", function (value, Element) {
var tel =/^[0-9]{6}$/;
return this.optional (Element) | | (Tel.test (value));
}, "Please fill in your zip code correctly");

Start validation
$ (' #submitForm '). Validate ({
/* Set validation rules */
Rules: {
"Username": {
Required:true,
Stringcheck:true,
BYTERANGELENGTH:[3,15]
},
email:{
Required:true,
Email:true
},
phone:{
Required:true,
Isphone:true
},
address:{
Required:true,
Stringcheck:true,
BYTERANGELENGTH:[3,100]
}
},

/* Set the error message username to the value of the Name property of the corresponding input, add "" or no */
Messages: {
Can be added "" or not added
"Username": {
Required: "Please fill in the user name",
Stringcheck: "User name can only include Chinese characters, English letters, numbers and underscores",
Byterangelength: "User name must be between 3-15 characters (2 characters in one text)"
},
Don't add ""
email:{
Required: "Please enter an email address",
Email: "Please enter a valid email address"
},
phone:{
Required: "Please enter your contact number",
Isphone: "Please enter a valid contact number"
},
address:{
Required: "Please enter your contact address",
Stringcheck: "Please enter your contact address correctly",
Byterangelength: "Please detailed your contact address so that we could contact you"
}
},

/* Set Validation trigger Events */
Focusinvalid:false,
Onkeyup:false,

/* Set the error message to the DOM */
Errorplacement:function (Error, Element) {
Error.appendto (Element.parent ());
},

});

});
</script>
<form class= "SubmitForm" id= "SubmitForm" method= "Get" action= "" >
<fieldset>
<legend> Form Validation </legend>
<p>
<label for= "username1" > Username </label>
<em>*</em><input id= "UserName" name= "UserName" size= "/>"
</p>
<p>
<label for= "Email" >E-Mail</label>
<em>*</em><input id= "Email" name= "email" size= "/>"
</p>
<p>
<label for= "Phone" > Contact phone </label>
<em>*</em><input id= "Phone" name= "Phone" size= "value="/>
</p>
<p>
<label for= "Address" > Addresses </label>
<em>*</em><input id= "Address" name= "Address" size= ">"
</p>
<input class= "Submit" type= "Submit" value= "Submission"/>
</p>
</fieldset>
</form>
</body>