最新最全的插件可以从jQuery官方网站的插件板块下载，网站地址为：

Validation优点：内置验证规则；自定义验证规则；简单强大的验证信息提示；实时验证。

三种不同的写法

1.1 确认哪个表单需要被验证，引入jquery.validate.js插件

1.2 针对不同字段，进行验证规则编码，设置字段相应的属性

     
 
      
   
       
一个简单的验证带验证提示的评论例子
   
       
     姓名     *
           
   
       
     电子邮件     *   
   
       
     网址       
           
   
       
     你的评论     *   
   
       
        
 
      
 
     

2.1 再引入jquery.metadata.js插件（支持固定格式解析的jQuery插件）后可以采用不同的写法

2.2 效果与1.2相同，写法不同而已

     
 
      
   
       
一个简单的验证带验证提示的评论例子
   
       
     姓名     *   
   
       
     电子邮件     *   
   
       
     网址          
   
       
     你的评论     *   
   
       
        
 
      
 
     

3.1 在$("#commentForm").validate（）方法中增加rules属性

3.2 将字段中的class属性移除，通过name属性匹配验证规则

     
 
      
   
       
一个简单的验证带验证提示的评论例子
   
       
     姓名     *   
   
       
     电子邮件     *   
   
       
     网址          
   
       
     你的评论     *   
   
       
        
 
      
 
     

以上三种写法的验证结果如下

validation默认是提示英文，要显示中文，可以引入jquery.validate.messages_cn.js，其内容如下

jQuery.extend(jQuery.validator.messages, {        required: "必选字段",        remote: "请修正该字段",        email: "请输入正确格式的电子邮件",        url: "请输入合法的网址",        date: "请输入合法的日期",        dateISO: "请输入合法的日期 (ISO).",        number: "请输入合法的数字",        digits: "只能输入整数",        creditcard: "请输入合法的信用卡号",        equalTo: "请再次输入相同的值",        accept: "请输入拥有合法后缀名的字符串",        maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),        minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),        rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),        range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),        max: jQuery.format("请输入一个最大为 {0} 的值"),        min: jQuery.format("请输入一个最小为 {0} 的值")});

此时提示结果为（中文，覆盖了原来的英文提示）

还可以自定义验证规则，如修改字段提示信息的class值，为验证提示信息添加图片，增加“验证码”

程序中增加了messages属性

表单部分：

     
 
      
   
       
一个简单的验证带验证提示的评论例子
   
       
     姓名     *   
   
       
     电子邮件     *   
   
       
     网址          
   
       
     你的评论     *   
   
       
     验证码     =7+9   
   
       
        
 
      
 
     

在CSS中添加失败和成功对应的小图片

em {
    font-weight: bold; padding-right: 1em; vertical-align: top; }em.error {
     background:url("images/unchecked.gif") no-repeat 0px 0px;  padding-left: 16px;}em.success {
     background:url("images/checked.gif") no-repeat 0px 0px;  padding-left: 16px;}

提示结果如下

完整程序地址：