9.4.2 基本验证

使用Validation插件很简单,只需要附加插件的JavaScript文件、给想要验证的表单元素添加几个类和title属性,并且对表单应用validate()函数。validate()方法是验证表单的最简单的方法,并且可能对大多数表单来说,这个方法就足够了(然而,如果我们需要控制错误消息放置在页面的何处,或者对一个表单字段应用多个规则,或者为一个文本字段设置最小字符数或最大字符数,我们将需要使用9.4.3节所介绍的高级方法)。

要添加验证,可以根据前面部分列出的基本步骤(附加jQuery和Validation插件文件等),除此之外,可以在表单字段的HTML中嵌入规则和错误消息。

添加验证规则

使用Validation验证一个字段的最简单的方法就是给表单字段分配表9-2所列出的一个或多个类名。插件通过智能编程,可以扫描每个表单字段的类名来确定它是否是所表示的验证字段,并且如果是的话,就对该字段应用特定的验证规则。

例如,假设有一个文本字段用来收集人名。基本的HTML可能如下所示:


<input name="name"type="text">


要告诉插件,该字段是必需的,换句话说,除非访问者在这个字段输入了某些内容,否则表单不能提交,要给该标签添加一个required类。例如,要让这个字段成为必需的,像下面这样为该标签添加一个class属性:


<input name="name"type="text"class="required">


用这种方法添加一个类实际上和CSS无关,即使通常我们给标签分配一个类来提供一种方式通过创建CSS样式表格式化该标签。在这个例子中,我们将使用一个类名给插件提供它所需要的信息,以确定对该字段应用何种验证。

注意:JavaScript验证是为那些偶然漏掉一个字段或提供错误类型的信息的访问者提供友好反馈的一种很好的方法,但是,它不是预防恶意输入的好办法。JavaScript验证很容易失效,因此,如果你想要确保不会接收到来自访问者的错误数据,你还需要实现一个服务器端验证解决方案。

要求访问者填充一个字段可能是最常见的验证任务,但是,通常我们也想确保提供的数据符合特定的格式。例如,如果询问某人需要多少个小器件,我们期待一个数值。要让字段既成为必需的并且还包含一种特定类型的值,除了添加required类,还要加上表9-2所列出的其他类中的一个。

9.4.2 基本验证 - 图1

9.4.2 基本验证 - 图2

例如,假设有一个字段询问某人的出生日期。这个信息不仅是必需的,而且还应该是日期格式。该字段的HTML可能如下所示:


<input name="dob"type="text"class="required date">


注意,类名required和date之间用一个空格隔开。

如果没有包含required类,而只是使用了另外一种验证类型,例如class="date",那么,这个字段是可选的,但如果某人在这个字段输入内容,它必须是正确的格式(一个日期)。

提示:当我们为字段信息要求一个特定格式的时候,确保在表单中包含了特别的说明,以便访问者知道应该如何添加他们的信息。例如,如果要求一个字段是日期,可以在字段附近添加一条类似“Please enter a date in the format 01/25/2009”的消息。

添加错误消息

Validation提供了通用的错误消息,以匹配它所检查到的验证问题。例如,如果一个必需的字段为空白,这个插件会显示消息“This field is required”。如果字段需要一个日期,那么会显示消息“Please enter a valid date”。然而,也可以覆盖这些基本的消息,提供自己的消息。

最简单的方法是给表单字段添加一个title属性,并且把错误消息作为title的值提供。例如,假设使用了required类来使得一个字段是必需的,如下所示:


<input name="name"type="text"class="required">


要提供自己的消息,只需要添加一个title属性:


<input name="name"type="text"class="required"

title="Please give us your name.">


通常,Web设计师使用title属性来增强一个表单字段的可访问性,通过它提供一个说明,以便当某人的鼠标光标移动到字段上的时候显示出来,或者供屏幕阅读软件读出声。但是,对于Validation插件,我们使用title属性来提供想要显示的错误消息。这个插件扫描所有的验证字段并检查是否有一个title属性。如果有,该插件使用这个属性的值作为错误消息文本。

如果使用多种验证方法,我们应该提供一个对每种情况有意义的title。例如,如果有一个字段是必需的并且也必须是一个日期,如果访问者输入了错误的日期格式,“This field is required”这条消息就没有太多意义。下面是对于访问者使得该字段为空白或者以错误方式输入日期都有意义的一条错误消息的例子:


<input name="dob"type="text"class="required date"8

title="Please enter a date in the format 01/28/2009.">


通过给字段添加类名和title来添加验证规则和错误消息很容易,并且也很有效。但是,有时候,我们可能有更为复杂的验证需求,Validation提供了另一种更为高级的验证方法来为表单添加验证。例如,我们可能想要根据错误的类型提供不同的错误消息,例如,当一个字段留下空白的时候是一条消息,而当访问者输入了错误类型的信息的时候又是另一条消息。我们无法使用本节所介绍的基本验证方法来做到这些。幸运的是,Validation插件提供了另一种更为高级的方法,允许实现更为广泛的验证规则。

例如,如果想要确保输入到一个字段的最小字符数,我们必须使用这种高级方法。例如,在设置密码的时候,我们可能想要确保密码最少有6个字符的长度。