使用 Spry 验证文本域 Widget

注意:

Spry Widget 在 Dreamweaver CC 及更高版本中由 jQuery Widget 取代。您虽然仍然可以修改页面上现有的 Spry Widget,但无法添加新的 Spry Widget。

关于验证文本域 Widget

Spry 验证文本域 Widget 是一个文本域,该域用于在站点访问者输入文本时显示文本的状态(有效或无效)。例如,您可以向访问者键入电子邮件地址的表单中添加验证文本域 Widget。如果访问者无法在电子邮件地址中键入“@”符号和句点,验证文本域 Widget 会返回一条消息,声明用户输入的信息无效。

下例显示一个处于各种状态的验证文本域 Widget:

验证文本域 Widget

A. 文本域 Widget(提示已激活) B. 文本域 Widget(有效状态) C. 文本域 Widget(无效状态) D. 文本域 Widget(必需状态) 

验证文本域 Widget 具有许多状态(例如,有效、无效和必需值等)。您可以根据所需的验证结果,使用属性检查器来修改这些状态的属性。验证文本域 Widget 可以在不同的时间点进行验证,例如当访问者在 Widget 外部单击时、键入内容时或尝试提交表单时。

初始状态

在浏览器中加载页面或用户重置表单时 Widget 的状态。

焦点状态

当用户在 Widget 中放置插入点时 Widget 的状态。

有效状态

当用户正确地输入信息且表单可以提交时 Widget 的状态。

无效状态

当用户所输入文本的格式无效时 Widget 的状态。(例如,用 06 而不是用 2006 表示年份。)

必需状态

当用户在文本域中没有输入必需文本时 Widget 的状态。

最小字符数状态

当用户输入的字符数少于文本域所要求的最小字符数时 Widget 的状态。

最大字符数状态

当用户输入的字符数多于文本域所允许的最大字符数时 Widget 的状态。

最小值状态

当用户输入的值小于文本域所需的值时 Widget 的状态。(适用于整数、实数和数据类型验证。)

最大值状态

当用户输入的值大于文本域所允许的最大值时 Widget 的状态。(适用于整数、实数和数据类型验证。)

每当验证文本域 Widget 以用户交互方式进入其中一种状态时,Spry 框架逻辑会在运行时向该 Widget 的 HTML 容器应用特定的 CSS 类。例如,如果用户尝试提交表单,但尚未在必填文本域中输入文本,Spry 会向该 Widget 应用一个类,使它显示“需要提供一个值”错误消息。用来控制错误消息的样式和显示状态的规则包含在 Widget 随附的 CSS 文件 (SpryValidationTextField.css) 中。

验证文本域 Widget 的默认 HTML 通常位于表单内部,其中包含一个容器 <span> 标签,该标签将文本域的 <input> 标签括起来。在验证文本域 Widget 的 HTML 中,在文档头中和验证文本域 Widget 的 HTML 标记之后还包括脚本标签。

有关验证文本域 Widget 工作方式的更全面的说明(包括验证文本域 Widget 代码的全面分析),请访问 www.adobe.com/go/learn_dw_sprytextfield_cn

插入和编辑验证文本域 Widget

插入验证文本域 Widget

  1. 选择“插入”>“Spry”>“Spry 验证文本域”。
  2. 完成“输入标签辅助功能属性”对话框,然后单击“确定”。
注意:

还可以使用“插入”面板中的“Spry”类别插入验证文本域 Widget。

指定验证类型和格式

可以为验证文本域 Widget 指定不同的验证类型。例如,如果文本域将接收信用卡号,则可以指定信用卡验证类型。

  1. 在“文档”窗口中选择一个验证文本域 Widget。
  2. 在属性检查器(“窗口”>“属性”)中,从“类型”菜单中选择一个验证类型。
  3. 如果适用的话,请从“格式”弹出菜单中选择一种格式。

大多数验证类型都会使文本域要求采用标准格式。例如,如果您向文本域应用整数验证类型,那么,除非用户在该文本域中输入数字,否则,该文本域 Widget 将无法通过验证。但是,某些验证类型允许您选择文本域将接受的格式种类。下表显示可通过属性检查器使用的验证类型和格式:

验证类型

格式

无需特殊格式。

整数

文本域仅接受数字。

电子邮件地址

文本域接受包含 @ 和句点 (.) 的电子邮件地址, 而且 @ 和句点的前面和后面都必须至少有一个字母。

日期

格式可变。可以从属性检查器的“格式”弹出菜单中进行选择。

时间

格式可变。可以从属性检查器的“格式”弹出菜单中进行选择。(“tt”表示 am/pm 格式,“t”表示 a/p 格式。)

信用卡

格式可变。可以从属性检查器的“格式”弹出菜单中进行选择。您可以选取接受所有信用卡,或者指定某种特殊类型的信用卡(MasterCard、Visa,等)。文本域不接受包含空格的信用卡号,例如 4321 3456 4567 4567。

邮政编码

格式可变。可以从属性检查器的“格式”弹出菜单中进行选择。

电话号码

文本域接受美国和加拿大格式(即,(000) 000-0000)或自定义格式的电话号码。如果您选择自定义格式,请在“模式”文本框中输入格式,例如,000.00(00)。

社会安全号码

文本域接受 000-00-0000 格式的社会安全号码。如果要使用其它格式,请选择“自定义”作为验证类型,然后指定模式。模式验证机制只接受 ASCII 字符。

货币

文本域接受 1,000,000.00 或 1.000.000,00 格式的货币。

实数/科学记数法

验证各种数字:整数(例如 1)、浮点值(例如,12.123)、以科学记数法表示的浮点值(例如,1.212e+12、1.221e-12,其中 e 用作 10 的幂。)

IP 地址

格式可变。可以从属性检查器的“格式”弹出菜单中进行选择。

URL

文本域接受 http://xxx.xxx.xxx 或 ftp://xxx.xxx.xxx 格式的 URL。

自定义

可用于指定自定义验证类型和格式。在属性检查器中输入格式模式(并根据需要输入提示)。模式验证机制只接受 ASCII 字符。

指定验证发生的时间

您可以设置验证发生的时间,包括站点访问者在 Widget 外部单击时、键入内容时或尝试提交表单时。

  1. 在“文档”窗口中选择一个验证文本域 Widget。
  2. 在属性检查器(“窗口”>“属性”)中,选择用来指示您希望验证何时发生的选项。您可以选择所有选项,也可以仅选择“提交”。

    模糊

    当用户在文本域的外部单击时验证。

    更改

    当用户更改文本域中的文本时验证。

    提交

    在用户尝试提交表单时进行验证。提交选项是默认选中的,无法取消选择。

指定最小字符数和最大字符数

此选项仅适用于“无”、“整数”、“电子邮件地址”和“URL”验证类型。

  1. 在“文档”窗口中选择一个验证文本域 Widget。
  2. 在属性检查器(“窗口”>“属性”)中的“最小字符数”或“最大字符数”框中输入一个数字。例如,如果您在“最小字符数”框中输入 3,那么,只有当用户输入三个或更多个字符时,该 Widget 才通过验证。

指定最小值和最大值

此选项仅适用于“整数”、“时间”、“货币”和“实数/科学记数法”验证类型。

  1. 在“文档”窗口中选择一个验证文本域 Widget。
  2. 在属性检查器(“窗口”>“属性”)中的“最小值”或“最大值”框中输入一个数字。例如,如果您在“最小值”框中输入 3,那么,只有当用户在文本域中输入 3 或者更大的值(4、5、6 等)时,该 Widget 才通过验证。

在“设计”视图中显示 Widget 状态

  1. 在“文档”窗口中选择一个验证文本域 Widget。
  2. 在属性检查器(“窗口”>“属性”)中,从“预览状态”弹出菜单中选择要查看的状态。例如,如果要查看处于“有效”状态的 Widget,请选择“有效”。

更改文本域的所需状态

默认情况下,用 Dreamweaver 插入的所有验证文本域 Widget 都要求用户在将 Widget 发布到网页之前输入内容。但是,您可以将填写文本域设置为对于用户是可选的。

  1. 在“文档”窗口中选择一个验证文本域 Widget。
  2. 在属性检查器(“窗口”>“属性”)中,根据自己的喜好选择或取消选择“必需”选项。

创建文本域的提示

由于文本域有很多不同格式,因此,提示用户需要输入哪种格式会比较有帮助。例如,验证类型设置为“电话号码”的文本域将只接受 (000) 000-0000 形式的电话号码。可以输入这些示例号码作为提示,以便用户在浏览器中加载页面时,文本域中将显示正确的格式。

  1. 在“文档”窗口中选择一个验证文本域 Widget。
  2. 在属性检查器(“窗口”>“属性”)中的“提示”文本框中输入提示。

禁止无效字符

您可以禁止用户在验证文本域 Widget 中输入无效字符。例如,如果对具有“整数”验证类型的 Widget 集选择此选项,那么,当用户尝试键入字母时,文本域中将不显示任何内容。

  1. 在“文档”窗口中选择一个验证文本域 Widget。
  2. 在属性检查器(“窗口”>“属性”)中,选择“强制模式”选项。

自定义验证文本域 Widget

尽管使用属性检查器可以简化对验证文本域 Widget 的编辑,但是属性检查器并不支持自定义的样式设置任务。您可以修改验证文本域 Widget 的 CSS,以便根据自己的喜好创建带有样式的 Widget。有关样式任务的更高级列表,请访问 www.adobe.com/go/learn_dw_sprytextfield_custom_cn

下列主题中的所有 CSS 规则都是指 SpryValidationTextField.css 文件中的默认规则。每当您创建 Spry 验证文本域 Widget 时,Dreamweaver 都会将 SpryValidationTextField.css 文件保存到您的站点的 SpryAssets 文件夹中。查阅此文件会有所帮助,因为其中包含一些有关适用于该 Widget 的各种样式的注释信息。

注意:

尽管可以直接在相关联的 CSS 文件中方便地编辑验证文本域 Widget 的规则,您还可以使用“CSS 样式”面板来编辑验证文本域 Widget 的 CSS。“CSS 样式”面板对于查找分配给 Widget 不同部分的 CSS 类非常有用,在使用面板的“当前”模式时尤其如此。

设置验证文本域 Widget 错误消息文本的样式

默认情况下,验证文本域 Widget 的错误消息会以红色显示,文本周围有 1 个像素宽的边框。

  1. 要更改验证文本域 Widget 错误消息的文本样式,请使用下表来查找相应的 CSS 规则,然后更改默认属性,或者添加您自己的文本样式属性和值:

    要更改的文本

    相关 CSS 规则

    要更改的相关属性

    错误消息文本

    .textfieldRequiredState .textfieldRequiredMsg, .textfieldInvalidFormatState .textfieldInvalidFormatMsg, .textfieldMinValueState .textfieldMinValueMsg, .textfieldMaxValueState .textfieldMaxValueMsg, .textfieldMinCharsState .textfieldMinCharsMsg, .textfieldMaxCharsState .textfieldMaxCharsMsg

    color: #CC3333; border: 1px solid #CC3333;

更改验证文本域 Widget 的背景颜色

  1. 要更改处于各种状态的验证文本域 Widget 的背景颜色,请使用下表来查找相应的 CSS 规则,然后更改默认的背景颜色值:

    要更改的颜色

    相关 CSS 规则

    要更改的相关属性

    处于“有效”状态的 Widget 的背景颜色

    .textfieldValidState input, input.textfieldValidState

    background-color: #B8F5B1;

    处于“无效”状态的 Widget 的背景颜色

    input.textfieldRequiredState, .textfieldRequiredState input, input.textfieldInvalidFormatState, .textfieldInvalidFormatState input, input.textfieldMinValueState, .textfieldMinValueState input, input.textfieldMaxValueState, .textfieldMaxValueState input, input.textfieldMinCharsState, .textfieldMinCharsState input, input.textfieldMaxCharsState, .textfieldMaxCharsState input

    background-color: #FF9F9F;

    处于“焦点”状态的 Widget 的背景颜色

    .textfieldFocusState input, input.textfieldFocusState

    background-color: #FFFFCC;

更快、更轻松地获得帮助

新用户?