jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

因为我们要使用插件，可以官网下载，也可以使用各大网站提供的插件，下面就是菜鸟网提供的插件，可以直接使用。

<scriptsrc="http:///assets/jquery-validation-1.14.0/lib/jquery.js"></script>

<scriptsrc="http:///assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>

插入好插件后，这里主要检验input里的type属性：

1

required:true

必须输入的字段。

2

remote:"check.php"

使用 ajax 方法调用 check.php 验证输入值。

3

email:true

必须输入正确格式的电子邮件。

4

url:true

必须输入正确格式的网址。

5

date:true

必须输入正确格式的日期。日期校验 ie6 出错，慎用。

6

dateISO:true

必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。

7

number:true

必须输入合法的数字（负数，小数）。

8

digits:true

必须输入整数。

9

creditcard:

必须输入合法的信用卡号。

10

equalTo:"#field"

输入值必须和 #field 相同。

11

accept:

输入拥有合法后缀名的字符串（上传文件的后缀）。

12

maxlength:5

输入长度最多是 5 的字符串（汉字算一个字符）。

13

minlength:10

输入长度最小是 10 的字符串（汉字算一个字符）。

14

rangelength:[5,10]

输入长度必须介于 5 和 10 之间的字符串（汉字算一个字符）。

15

range:[5,10]

输入值必须介于 5 和 10 之间。

16

max:5

输入值不能大于 5。

17

min:10

输入值不能小于 10。

当输入的内容不符合规范时，会提示用户信息输入错误，信息提示默认是英文，但是可以使用汉化之后的提示

这是英文的提示：

这是中文的提示


例如： 

<html> 
 
 <head> 
 
 <meta charset="utf-8"> 
 
 <title>菜鸟教程(runoob.com)</title> 
 
 <script src="http:///assets/jquery-validation-1.14.0/lib/jquery.js"></script> 
 
 <script src="http:///assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script> 
 
 <script src="http:///assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script> 
 
 <script> 
 
 $.validator.setDefaults({ 
 
     submitHandler: function() { 
 
       alert("提交事件!"); 
 
     } 
 
 }); 
 
 $().ready(function() { 
 
 // 在键盘按下并释放及提交后验证提交表单 
 
   $("#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: "用户名必需由两个字母组成" 
 
        }, 
 
        password: { 
 
          required: "请输入密码", 
 
          minlength: "密码长度不能小于 5 个字母" 
 
        }, 
 
        confirm_password: { 
 
          required: "请输入密码", 
 
          minlength: "密码长度不能小于 5 个字母", 
 
          equalTo: "两次密码输入不一致" 
 
        }, 
 
        email: "请输入一个正确的邮箱", 
 
        agree: "请接受我们的声明", 
 
        topic: "请选择两个主题" 
 
      } 
 
  }); 
 
 }); 
 
 </script> 
 
 <style> 
 
 .error{ 
 
  color:red; 
 
 } 
 
 </style> 
 
 </head> 
 
 <body> 
 
 <form class="cmxform" id="signupForm" method="get" action=""> 
 
   <fieldset> 
 
     <legend>验证完整的表单</legend> 
 
     <p> 
 
       <label for="firstname">名字</label> 
 
       <input id="firstname" name="firstname" type="text"> 
 
     </p> 
 
     <p> 
 
       <label for="lastname">姓氏</label> 
 
       <input id="lastname" name="lastname" type="text"> 
 
     </p> 
 
     <p> 
 
       <label for="username">用户名</label> 
 
       <input id="username" name="username" type="text"> 
 
     </p> 
 
     <p> 
 
       <label for="password">密码</label> 
 
       <input id="password" name="password" type="password"> 
 
     </p> 
 
     <p> 
 
       <label for="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">请同意我们的声明</label> 
 
       <input type="checkbox" class="checkbox" id="agree" name="agree"> 
 
     </p> 
 
     <p> 
 
       <label for="newsletter">我乐意接收新信息</label> 
 
       <input type="checkbox" class="checkbox" id="newsletter" name="newsletter"> 
 
     </p> 
 
     <fieldset id="newsletter_topics"> 
 
       <legend>主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示让它可见</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" style="display:none">至少选择两个</label> 
 
     </fieldset> 
 
     <p> 
 
       <input class="submit" type="submit" value="提交"> 
 
     </p> 
 
   </fieldset> 
 
 </form> 
 
 </body> 
 
 </html>