上面的代码中我已经完成了对用户名,姓名,年龄,邮箱的验证了，不知道你发现了没，就是在每个textbox中的class样式，其中required表示必填，number表示必须是数字，email表示必须是电子邮件格式，如果写成required email表示这个字段必须填写同时必须是email格式。

怎么样？是不是相当的简单，省去了拖控件，指定验证控件等啰嗦的代码，仅仅一个【样式名】就搞定了，当然jQuery.Validate还提供许多验证方法，如日期，范围，最大值，最小值，整数，值比较等多种验证方式，同时你还可以自定义验证方（当然这种自定义验证方式在初级篇不会将到，请期待中级高级篇）。

好了，我们点下提交按钮看下运行的效果：

不错，果然验证成功了，但是有个问题，怎么提示信息全是英文的？

我们查看下jQuery.Validate源代码，在236行果然有提示消息的定义方式，我们就可以进行修改这边的消息改成中文的方式，或者自定义了一个中文的消息jQuery.Validate.message_cn.js，然后使用jQuery.extend来覆盖jQuery.Validate自身的消息，代码如下：

//定义中文消息
var cnmsg = { 
    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} 的值")
};
jQuery.extend(jQuery.validator.messages, cnmsg);

然后我们重新刷新下页面，果然全变成中文了。看下效果：

注意：这边错误提示消息的样式是可以自己定义的，我就修改了原有的样式，加上了个错误图标，更加好看点，样式定义如下： 

<style type="text/css">      
 /************jQuery.Validate插件样式开始********************/  
   label.error {    
      background: url(images/error.png) no-repeat 0px 0px;          
      color: Red;          
      padding-left: 20px;      
                }   
   input.error  {   
        border: dashed 1px red;      
                 }     
  /************jQuery.Validate插件样式结束********************/    </style>

PS：1、代码中jquery.validate.js为官方版本，而jquery.validate1.js为我修改的版本，关于修改的内容在中级篇和高级篇我会讲到。

2、jQuery.Validate仅能做客户端验证，并不能代替服务器端验证，为了系统的安全所以服务器端还是要进行验证的。

转载：http://www.cnblogs.com/kyo-yo/archive/2010/06/28/Use-jQueryValidate-To-Validate-Client.html

本文链接：http://www.blueidea.com/tech/web/2010/7789.asp　

出处：博客园
责任编辑：bluehearts

上一页 使用jQuery.Validate进行客户端验证(前篇) [2] 下一页

◎进入论坛网页制作、WEB标准化版块参加讨论，我还想发表评论。