Home > Article > Web Front-end > Learn more about jQuery Validate form validation_jquery
The example in this article introduces jQuery Validate form verification. It mainly uses jquery.metadata.js to write the verification rules directly in the class attribute and define error message prompts. It is shared with everyone for your reference. The specific content is as follows
1. Add another plug-in jquery.metadata.js and write the verification rules in the control.
2. The method of triggering verification needs to be rewritten.
$("#commentForm").validate({meta: "validate"});
3. The detailed code is as follows:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</title> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"></script> <script src="lib/jquery.metadata.js" type="text/javascript"></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> <script type="text/javascript"> $(document).ready(function(){ $("#commentForm").validate({meta: "validate"}); }); </script> </head> <body> <form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中</legend> <p> <label for="cusername">姓名</label> <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2}}" /> </p> <p> <label for="cemail">电子邮件</label> <em>*</em><input id="cemail" name="email" size="25" class="{validate:{required:true, email:true}}" /> </p> <p> <label for="curl">网址</label> <em> </em><input id="curl" name="url" size="25" value="" class="{validate:{url:true}}" /> </p> <p> <label for="ccomment">你的评论</label> <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true}}" ></textarea> </p> <p> <input class="submit" type="submit" value="提交"/> </p> </fieldset> </form> </body> </html>
Default verification rules:
messages: { required: "This field is required.", remote: "Please fix this field.", email: "Please enter a valid email address.", url: "Please enter a valid URL.", date: "Please enter a valid date.", dateISO: "Please enter a valid date (ISO).", dateDE: "Bitte geben Sie ein g眉ltiges Datum ein.", number: "Please enter a valid number.", numberDE: "Bitte geben Sie eine Nummer ein.", digits: "Please enter only digits", creditcard: "Please enter a valid credit card number.", equalTo: "Please enter the same value again.", accept: "Please enter a value with a valid extension.", maxlength: $.validator.format("Please enter no more than {0} characters."), minlength: $.validator.format("Please enter at least {0} characters."), rangelength: $.validator.format("Please enter a value between {0} and {1} characters long."), range: $.validator.format("Please enter a value between {0} and {1}."), max: $.validator.format("Please enter a value less than or equal to {0}."), min: $.validator.format("Please enter a value greater than or equal to {0}.") },
5. Note:
To use class="{}", the package must be imported: jquery.metadata.js.
You can use the following method to modify the prompt content:
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
class="{required:true,minlength:5,equalTo:'#password'}"
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中(2)</title> <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script> <script src="lib/jquery.validate.js" type="text/javascript"></script> <script src="lib/jquery.metadata.js" type="text/javascript"></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> <script type="text/javascript"> $(document).ready(function(){ $("#commentForm").validate({meta: "validate"}); }); </script> </head> <body> <form class="cmxform" id="commentForm" method="get" action=""> <fieldset> <legend>jQuery表单验证插件----利用jquery.metadata.js将校验规则写到控件中(2)</legend> <p> <label for="cusername">姓名</label> <em>*</em><input id="cusername" name="username" size="25" class="{validate:{required:true, minlength:2, messages:{required:'请输入姓名', minlength:'请至少输入两个字符'}}}" /> </p> <p> <label for="cemail">电子邮件</label> <em>*</em><input id="cemail" name="email" size="25" class="{validate:{required:true, email:true, messages:{required:'请输入电子邮件', email:'请检查电子邮件的格式'}}}" /> </p> <p> <label for="curl">网址</label> <em> </em><input id="curl" name="url" size="25" value="" class="{validate:{url:true, messages:{url:'请检查网址的格式'}}}" /> </p> <p> <label for="ccomment">你的评论</label> <em>*</em><textarea id="ccomment" name="comment" cols="22" class="{validate:{required:true, messages:{required:'请输入您的评论'}}}" ></textarea> </p> <p> <input class="submit" type="submit" value="提交"/> </p> </fieldset> </form> </body> </html>
7. The effect is as follows:
The above is the entire content of this article. I hope it will be helpful for everyone to learn jQuery Validate form verification. Recently, many articles about jQuery Validate form verification have been updated. You can study them together.