<%@ Page Title="员工信息管理-初级验证" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
CodeFile="Base.aspx.cs" Inherits="_Base" %>
<asp:Content ContentPlaceHolderID="head" runat="Server">
</asp:Content>
<asp:Content ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<table cellpadding="1" cellspacing="1">
<tr>
<td>
用户名
</td>
<td>
<asp:TextBox runat="server" CssClass="required"></asp:TextBox>
</td>
</tr>
<tr>
<td>
姓名
</td>
<td>
<asp:TextBox runat="server" CssClass="required"></asp:TextBox>
</td>
</tr>
<tr>
<td>
年龄
</td>
<td>
<asp:TextBox runat="server" CssClass="number"></asp:TextBox>
</td>
</tr>
<tr>
<td>
邮箱
</td>
<td>
<asp:TextBox runat="server" CssClass="email"></asp:TextBox>
</td>
</tr>
<tr>
<td colspan="2">
<asp:Button runat="server" Text="提交" />
</td>
</tr>
</table>
</asp:Content>
上面的代码中我已经完成了对用户名,姓名,年龄,邮箱的验证了，不知道你发现了没，就是在每个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);
这样只需在母版页里引用下jQuery.Validate.message_cn.js就可以把原有的英文提示给替换掉了，2种方式都是可取的，如果你想把jQuery.Validate改造成适合自己的验证控件就是用第1种方式直接改源代码，如果你只是想用些基本功能不想动原来的源代码就是用第2种方法。
然后我们重新刷新下页面，果然全变成中文了。看下效果：
注意：这边错误提示消息的样式是可以自己定义的，我就修改了原有的样式，加上了个错误图标，更加好看点，样式定义如下：
复制代码 代码如下:
<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>
到此，使用jQuery.Validate进行客户端验证的初级篇就写完了，具体的代码大家可以下载下面的源代码查看，敬请期待中级篇和高级篇。
PS：1、代码中jquery.validate.js为官方版本，而jquery.validate1.js为我修改的版本，关于修改的内容在中级篇和高级篇我会讲到。
2、jQuery.Validate仅能做客户端验证，并不能代替服务器端验证，为了系统的安全所以服务器端还是要进行验证的。
源代码下载：点我下载
作者：kyo-yo
您可能感兴趣的文章: