jquery validate using and extending rules

Source: Internet
Author: User

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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.