index.html
<!--import required Items--
<script src= "Jquery.js" type= "Text/javascript" ></script>
<script src= "Jquery.validate.js" type= "Text/javascript" ></script>
<!--
{required:true,minlength:5,equalto: ' #password '} must be metadata.js in class if you need to use {}
-
<script src= "Jquery.metadata.js" type= "Text/javascript" ></script>
<!--
Custom extensions
-
<script src= "Jquery.validate.ext.js" type= "Text/javascript" ></script>
<style type= "Text/css" >
Label.error {
padding-left:2px;
padding-bottom:2px;
Font-weight:bold;
color:red;
font-size:13px;
}
</style>
<form id= "Signupform" method= "Get" action= "" >
<p>
<label for= "FirstName" >Firstname</label>
<input id= "FirstName" name= "FirstName" class= "required Maxrang {haveblank:true}"/>
</p>
<p>
<label for= "Email" >E-Mail</label>
<input id= "Email" name= "email" class= "required email"/>
</p>
<p>
<label for= "Email" >e-mail (custom rule isemail) </label>
<input id= "Email" name= "email" class= "required Isemail"/>
</p>
<p>
<label for= "Password" >Password</label>
<input id= "password" name= "password" type= "password" class= "{required:true,minlength:5}"/>
</p>
<p>
<label for= "Confirm_password" > Confirm password </label>
<!--{required:true,minlength:5,equalto: ' #password '} needs to be introduced metadata.js-->
<input id= "Confirm_password" name= "Confirm_password" type= "password" class= "{required:true,minlength:5,equalto: ' #password '} "/>
</p>
<p>
<input class= "Submit" type= "submit" value= "Submit"/>
</p>
</form>
<script type= "Text/javascript" >
$ (). Ready (function () {
Form submission
$ ("#signupForm"). Validate ();
});
</script>
Jquery.validate.ext.js
Re-write hint Jquery.extend (jQuery.validator.messages, {required: "required field", Remote: "Please fix this field", Email: "Please enter the correct format of e-mail", ur L: "Please enter a valid URL", Date: "Please enter a valid date", Dateiso: "Please enter a valid date (ISO).", Number: "Please enter a valid digit", digits: "Only integer", CreditCard: "Please enter a valid Credit card Number ", Equalto:" Please enter the same value again ", Accept:" Please enter a string with a valid suffix name ", Maxlength:jQuery.validator.format (" Please enter a string of up to {0} "), MI Nlength:jQuery.validator.format ("Please enter a string with a minimum length of {0}"), Rangelength:jQuery.validator.format ("Please enter a word between {0} and {1}" String "), Range:jQuery.validator.format (" Enter a value between {0} and {1} "), Max:jQuery.validator.format (" Enter a value up to {0} "), MIN:JQ Uery.validator.format ("Please enter a value of minimum {0}")});//Custom Extension JQuery.validator.addMethod ("IsMobile", function (value, Element) { var length = Value.length;var mobile =/^ ((13[0-9]{1}) | ( 15[0-9]{1}) | (18[0-9]{1})) +\D{8}) $/;return this.optional (element) | | (length = = && Mobile.test (value)), "Cell phone format is incorrect"), JQuery.validator.addMethod ("Isemail", function (value, Element) {var email=/^ (\w) + (\.\w+) *@ (\w)+ ((\.\w+) +) $/;return this.optional (element) | | Email.test (True), "Incorrect mailbox format"), JQuery.validator.addMethod ("filterdbcom", function (value, Element) {var command =/ Select|update|delete|insert|declare|dbcc|alter|drop|creat|backup|add|set|open|close|exec|count| ' | | =|;| >|<|%/ I;return this.optional (Element) | | ! (Command.test (value));}, "cannot contain SQL special characters"), JQuery.validator.addMethod ("filterhtml", function (value, Element) {var Chrnum =/<[^>]+>/;return this.optional (element) | | ! (Chrnum.test (value));}, "Do not include HTML characters"), JQuery.validator.addMethod ("IsIp", function (value, Element) {var chrnum =/^ (\d {1,2}|1\d\d|2[0-4]\d|25[0-5]) \. (\d{1,2}|1\d\d|2[0-4]\d|25[0-5]) \. (\d{1,2}|1\d\d|2[0-4]\d|25[0-5]) \. (\d{1,2}|1\d\d|2[0-4]\d|25[0-5]) $/;return this.optional (element) | | Chrnum.test (value), "Incorrect IP format"), JQuery.validator.addMethod ("Haveblank", function (value, Element) {var is = Value.indexof ("") >= 0?false:true;return this.optional (element) | | is;}, "Cannot contain spaces");//error message create what label <label>xxxx</labEl>$.validator.setdefaults ({errorelement: "label"});
effect
jquery validate using and extending rules