jquery.validate官网地址：http://jqueryvalidation.org/
1. 导入JavaScript库
<script src="../js/jquery.js"></script> <script src="../js/jquery.validate.js"></script> <script src="../js/messages_zh.js"></script>
jquery.js文件不用说了，jquery.validate.js文件为验证脚本程序，messages_zh.js文件为消息本地化代码。
2. 默认检验规则
required– Makes the element required.remote– Requests a resource to check the element for validity.minlength– Makes the element require a given minimum length.maxlength– Makes the element require a given maxmimum length.rangelength– Makes the element require a given value range.min– Makes the element require a given minimum.max– Makes the element require a given maximum.range– Makes the element require a given value range.email– Makes the element require a valid emailurl– Makes the element require a valid urldate– Makes the element require a date.dateISO– Makes the element require an ISO date.number– Makes the element require a decimal number.digits– Makes the element require digits only.creditcard– Makes the element require a credit card number.equalTo– Requires the element to be the same as another one
懒得翻译了，应该很好懂的含义吧。
3. 方式一，将检验规则写到控件中
<script src="../js/jquery.js"></script> <script src="../js/jquery.validate.js"></script> <script src="../js/messages_zh.js"></script> <script> $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate the comment form when it is submitted $("#commentForm").validate(); }); </script> <form class="cmxform" id="commentForm" method="get" action="" style=" 500px;"> <fieldset> <legend>请输入信息...</legend> <p> <label for="cname">姓名</label> <input id="cname" name="name" minlength="2" type="text" required /> <p> <label for="cemail">E-Mail</label> <input id="cemail" type="email" name="email" required /> </p> <p> <label for="curl">URL</label> <input id="curl" type="url" name="url" /> </p> <p> <label for="ccomment">评价</label> <textarea id="ccomment" name="comment" required></textarea> </p> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form>
注意<input>元素中的：required/minlength="2"/type="email"等代码。正是它们决定了如何验证此元素。
备注：不知道为什么cnblog居然会对form代码进行检查，required/minlength属性居然加不进去，奇怪！
4. 方式二，在JavaScript脚本中写规则
<script src="../js/jquery.js"></script> <script src="../js/jquery.validate.js"></script> <script src="../js/messages_zh.js"></script> <script> $.validator.setDefaults({ submitHandler: function() { alert("submitted!"); } }); $().ready(function() { // validate signup form on keyup and submit $("#signupForm").validate({ rules: { firstname: "required", lastname: "required", username: { required: true, minlength: 2 }, password: { required: true, minlength: 5 }, confirm_password: { required: true, minlength: 5, equalTo: "#password" }, email: { required: true, email: true }, topic: { required: "#newsletter:checked", minlength: 2 }, agree: "required" }, messages: { firstname: "留下大名", lastname: "请问你姓啥？", username: { required: "写个用户名哦", minlength: "用户名最少2个字符" }, password: { required: "请输入密码", minlength: "密码至少5个字符哦" }, confirm_password: { required: "请输入密码", minlength: "密码至少5个字符哦", equalTo: "两次输入的密码要一致哦" }, email: "请输入一个有效的电子邮件地址", agree: "请选择同意协议" } }); // propose username by combining first- and lastname $("#username").focus(function() { var firstname = $("#firstname").val(); var lastname = $("#lastname").val(); if(firstname && lastname && !this.value) { this.value = firstname + "." + lastname; } }); //code to hide topic selection, disable for demo var newsletter = $("#newsletter"); // newsletter topics are optional, hide at first var inital = newsletter.is(":checked"); var topics = $("#newsletter_topics")[inital ? "removeClass" : "addClass"]("gray"); var topicInputs = topics.find("input").attr("disabled", !inital); // show when newsletter is checked newsletter.click(function() { topics[this.checked ? "removeClass" : "addClass"]("gray"); topicInputs.attr("disabled", !this.checked); }); }); </script> <form class="cmxform" id="signupForm" method="get" action=""> <fieldset> <legend>Validating a complete form</legend> <p> <label for="firstname">Firstname</label> <input id="firstname" name="firstname" type="text" /> </p> <p> <label for="lastname">Lastname</label> <input id="lastname" name="lastname" type="text" /> </p> <p> <label for="username">Username</label> <input id="username" name="username" type="text" /> </p> <p> <label for="password">Password</label> <input id="password" name="password" type="password" /> </p> <p> <label for="confirm_password">Confirm password</label> <input id="confirm_password" name="confirm_password" type="password" /> </p> <p> <label for="email">Email</label> <input id="email" name="email" type="email" /> </p> <p> <label for="agree">Please agree to our policy</label> <input type="checkbox" class="checkbox" id="agree" name="agree" /> </p> <p> <label for="newsletter">I'd like to receive the newsletter</label> <input type="checkbox" class="checkbox" id="newsletter" name="newsletter" /> </p> <fieldset id="newsletter_topics"> <legend>Topics (select at least two) - note: would be hidden when newsletter isn't selected, but is visible here for the demo</legend> <label for="topic_marketflash"> <input type="checkbox" id="topic_marketflash" value="marketflash" name="topic" /> Marketflash </label> <label for="topic_fuzz"> <input type="checkbox" id="topic_fuzz" value="fuzz" name="topic" /> Latest fuzz </label> <label for="topic_digester"> <input type="checkbox" id="topic_digester" value="digester" name="topic" /> Mailing list digester </label> <label for="topic" class="error">Please select at least two topics you'd like to receive.</label> </fieldset> <p> <input class="submit" type="submit" value="Submit"/> </p> </fieldset> </form>
注意：
- 在rules标签下面的以下用法：required: true/agree: "required"；email: true；minlength: 5等等。
- 在messages标签下面可以自定义对应于任一元素所对应的任意条件不满足时的提示消息，这点非常实用。
- 可以设置validate的默认值，写法如下（需要使用form.submit()而不要使用$(form).submit()）：
$.validator.setDefaults({ submitHandler: function(form) { alert("submitted!"); form.submit(); } });
5. 其它技巧
5.1 用其他方式替代默认的SUBMIT
$().ready(function() { $("#signupForm").validate({ submitHandler:function(form){ alert("submitted"); form.submit(); } }); });
5.2 只验证不提交表单
$().ready(function() { $("#signupForm").validate({ debug:true }); });