使用 Spry 元件: Spry 文本框校验概览

关于 Spry 组件

Spry 组件 是一个包含内建行为的页面元素，它提供给用户更好的用户交互体验。这些行为包括使用户显示或隐藏页面内容，改变页面的呈现样式，与菜单元素交互，还有其他更多的功能。

Spry 框架支持一组可重用的组件，由标准的HTML,CSS,Javascript构成。你可以方便地将这些组件加入到页面中然后以自己的方式进行样式设置。

Spry 框架的每个组件都关联着唯一的CSS和Javascript 文件。CSS文件包括格式化组件的所有定义，Javascript 文件则提供功能性教本。你必须将这两个文件链接到使用组件的页面上，否则将不会由任何样式或功能。获取更多的信息，请参阅后面的链接相关文件的话题。

组件所关联的CSS和Javascript 文件同组件是同名的，这样就很容易知道哪个文件用于哪个组件。（例如，关联折叠菜单（Accordion）的CSS和Javascript文件被命名为 SpryAccordion.css 和 SpryAccordion.js)Spry widgets 关联文件放在 widgets/accordion 目录中。

• 文本框校验元件的结构
• 文本框校验元件的样式
• 使用文本框校验元件
• 文本框校验元件的

文本框校验元件的结构

文本框校验元件有对文本框输入的文字进行校验的功能。用户可以方便的修改校验规则。

要创建一个文本框校验元件，只需要一个简单的文本框输入框，将其转变为 Spry元件只需要加入一些简单的元素。

下面显示的是一个活的焦点的文本框校验元件的外观：

只需要在 input 外加一个HTML容器（比如<span>）就可以创建一个文本框校验元件.元件由外层容器的ID来标识。这个容器允许元件显示错误信息。如果不使用外部容器，唯一ID应该是文本框 input的ID，但是就不能使用错误提示信息了。只有CSS用来控制不同状态的样式。

文本框校验元件有一组相关状态，这些状态用来描述在校验进行时的元件的状态。一个或多个状态可以在任何时刻应用到文本框校验元件，这基于校验的结果和其它的一些事件。

文本框校验元件可以有下面的状态：

• Initial state – 初始状态，当页面加载完成或表单被重置。
• Required state - 必选状态，声明了当表单提交时，文本框值为空。
• Invalid state - 错误状态，表单提交时用户输入的数据不符合一定格式（用户定义的格式）
• Min number of characters state — 声明了当表单提交时，文本框的字数少于要求的最小数目。
• Max number of characters state — 声明了当表单提交时，文本框的字数多于要求的最大数目。
• Min Value state - 最小值，声明了当表单提交时，文本框的值小于给定的值（用于整数，日期类型）。
• Max Value state -最大值，声明了当表单提交时，文本框的值大于给定的值（用于整数，日期类型）。
• Valid state - 正确状态，确认文本框可以被提交。
• Focus state – 焦点状态，当文本框获得焦点时的状态。

当元件进入了一个状态或获得焦点，一个特定的CSS样式被应用到HTML容器。每种状态的样式定义存在于SpryValidationTextfield.css文件中。

错误信息通过增加一个span标签（或其它标签）来放置信息文字。通过增加CSS样式，你可以默认隐藏错误信息，只有当元件状态改变时容器将应用特定的样式。

下面的图示演示了一些状态：

你可以改变文本框校验元件各种状态的样式文件。例如，如果你想修改一个状态背景颜色，你可以修改SpryValidationTexfield.css中相应的样式规则或者增加新的规则

HTML中也包含<script>标签。头部的脚本定义了校验元件的所有函数。后面的脚本包含了元件的构造函数。

下面是文本框校验元件的HTML代码，包括错误信息和相关的JS：

上面的代码，你可以看到构造函数的参数：HTML的容器ID。

同时错误信息的SPAN标签也有样式。信息通过触发不同的状态应用不容的CSS来显示或隐藏。

Spry 文本框校验元件的结构

上面的例子中，SPAN被用于创建文本框元件结构。

• 容器 SPAN
• INPUT type="text"
• 错误信息 SPAN

除了SPAN你可以使用其它的标签，因为算法通过容器ID来识别元件并且错误信息是使用CSS样式表显示。

元件的实例化将HTML元素的ID传递给构造函数，然后查找容器中的需要校验的INPUT元件标签。如果传递给构造函数的是INPUT标签的ID，它将直接使用这个元素触发校验。然而，由于没有外部容器标签，所以不能使用错误信息，不同的CSS规则将触发不同的状态。

另一个元件的样例：

• 容器 DIV
• INPUT type="text"
• 错误信息 P

No注意：一个容器中只能有一个INPUT元素。

文本框校验元件的CSS

SpryValidationTexfield.css 包含了选单元件使用的各种状态的样式。样式名对应HTML中使用的错误信息的样式名。然而，如果父级容器有状态样式，那么样式选择器更复杂一些。

SpryValidationTextfield.css：

.textfieldRequiredMsg, 
.textfieldInvalidFormatMsg, 
.textfieldMinValueMsg,
.textfieldMaxValueMsg,
.textfieldMinCharsMsg,
.textfieldMaxCharsMsg,
.textfieldValidMsg {
	display: none;
}


.textfieldRequiredState .textfieldRequiredMsg, 
.textfieldInvalidFormatState .textfieldInvalidFormatMsg, 
.textfieldMinValueState .textfieldMinValueMsg,
.textfieldMaxValueState .textfieldMaxValueMsg,
.textfieldMinCharsState .textfieldMinCharsMsg,
.textfieldMaxCharsState .textfieldMaxCharsMsg
{
	display: inline;
	color: #CC3333;
	border: 1px solid #CC3333;
}



.textfieldValidState input, input.textfieldValidState {
	background-color: #B8F5B1;
}



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;
}



.textfieldFocusState input, input.textfieldFocusState {
	background-color: #FFFFCC;
}

.textfieldFlashText input, input.textfieldFlashText{
	color: red !important;
}

使用文本框校验元件

这个部分包含两个部分：

• 插入一个文本框校验元件
  
  
• 改变文本框校验元件的样

插入一个文本框校验元件

1. 将SpryValidationTextfield.js加入你的站点。这个文件在widgets/ValidationTextfield目录下。例如，在站点的根目录创建一个叫“includes”，将SpryValidationTextfield.js上传置这个目录中。SpryValidationTextfield.js包含所有需要的代码。

2. 将 SpryValidationTextfield.css文件加入到你的站点。你可以将其放在主目录或CSS目录下。

3. 在页面代码中，在头部链接SpryValidationTextfield.js文件:

4. 在页面代码中，在头部链接SpryValidationTextfield.css文件：

保证 SpryValidationTextfield.css 文件的路径正确。这取决于你放置这个文件的位置。

5. 插入一个文本框元件

6. 增加一个外部容器span。

7. 在元件的HTML代码后加入如下JS初始化代码：
   

重要的是你需要确定ID和 Spry.Widget.ValidationTextfield方法中使用的ID相同。确定JavaScript在HTML代码后执行。

8. 保存页面。下面是全部代码：
   

改变文本框校验元件的样式

文本框校验元件有一个 SpryValidationTextfield.css文件提供必要的样式。你可以随喜好修改对应的样式。

改变文本框校验元件的样式就是你可以修改默认的样式。在SpryValidationTextfield.css文件中你将发现所有的需要修改的样式。

要改变文本框校验元件的外观：

1. 打开SpryValidationTextfield.css。你可以在widgets/ValidationTextfield目录中找到这个文件。
   
   
2. 找到想要改变的样式。例如，你希望改变必选状态的样式，你需要编辑.textfieldRequiredState。
   
   
3. 保存修改。

SpryValidationTextfield.css 文件中有详细的注释，解释了各个样式的用途。

文本框校验元件的行为

文本框校验元件的行为包括当校验时改变CSS样式名，不允许用户提交非法数值。

例如，当用户试图提交一个空值，提交被拦截，必选样式被用于元件容器。用户可以看到一个视觉提示或错误信息。选单校验元件都具有这些行为。若不需要这些行为，只要将相应CSS留空就可以了。这些样式有一些默认的属性，但是你也可以加入一些新的属性。

改变文本框校验元件的行为：

1. 打开SpryValidationTextfield.css文件。你可以在widgets/ValidationTextfield目录中找到。
   

2. 文本框校验元件内置了一些状态样式，可以对元素（错误信息元素）增加这些状态。

下面的样式定义了校验元件的相关样式：

下面的样式定义了当校验元件初始化时错误信息的外观 (隐藏错误信息)。你可以在CSS和HTML同时修改。我们只提供基本的默认值以便快速地使用。样式如下：

3. 任意修改或增加CSS规则。
   

你不可以重命名或重置SpryValidationTextfield.css中的样式名，因为这些样式名在框架中已经写死。不过你可以通过在构造函数中将自定义的样式名作为参数传递给元件。下面是如何改变必选样式名的例子：

文本框校验元件的参数

用户文本框校验函数有许多参数可以触发不同类型的校验。这些参数可以在构造函数的第二或第三个参数中设置。最后一个参数是取决于第二个参数所规定的校验类型。第二个参数定义的校验类型，如果你打算使用第三个参数(如果不使用任何校验类型，你可以将其设置为none)

通用的文本框校验元件的构造函数：

1.第二个参数可用的类型：

• integer - 校验是否为整数
• email - 是否是email地址，查找'@' 和 '.'
• date - 是否是日期类型
• time - 是否是时间类型
• credit_card - 是否是信用卡号
• zip_code - 是否是邮政编码
• phone - 是否是电话号码
• social_security_number - 是否是美国社会保险号
• currency - 是否是货币（两位小数）
• real - 是否是实数
• ip - 是否是IP地址
• url - 是否是URL地址
• custom - 自定义格式
• none - 没有校验类型

2. 第三个哈希参数 - 其中一些参数需要在第二个参数定义了校验类型的时候才可以使用：

a.通常的参数：

• format - 可以用于 "date", "time", "credit_card", "zip_code", "phone", "currency", "ip": 定义了额外的格式信息。
• validateOn - 用于所有的校验类型：除了内建的触发事件还定义了其它的事件（onBlur, onChange）
• isRequired - true/false - 用于所有的校验类型：开启、关闭必选状态
• minChars / maxChars - 数字型 - 可以用于 "none", "email", "url"：定义了允许的最大/最小字符数
• minValue / maxValue - 可以用于 "integer", "date", "time", "currency", "real": 定义了最大/最小值。这个参数应该和定义的校验类型格式相同。
• hint - 用于所有的校验方式：在页面加载后在文字区域显示一个默认的提示文字；用于提示用户这个区域中要输入何种信息，当文本框获得焦点时提示消失。
• useCharacterMasking - true/false - 可以用于 "integer", "date", "time", "credit_card", "zip_code", "phone_number", "social_security_number", "currency", "real", "ip": 阻止用户输入非法的字符，以短暂的红色文字闪烁通知用户。例如：对于一个整数校验，所有的非数值输入都被阻止。如果规定了格式（比如日期 "mm/dd/yyyy"），将自动填写到相应的部分（以‘/’分开）。

b. 可以用自定义状态样式名覆盖系统内置的默认状态样式名：

• requiredClass - 覆盖内置值 "textfieldRequiredState"
• invalidFormatClass - 覆盖内置值 "textfieldInvalidFormatState"
• validClass - 覆盖内置值 "textfieldValidState"
• focusClass - 覆盖内置值 "textfieldFocusState"
• invalidFormatClass - 覆盖内置值 "textfieldInvalidFormatState"
• invalidRangeMinClass - 覆盖内置值 "textfieldMinValueState"
• invalidRangeMaxClass - 覆盖内置值 "textfieldMaxValueState"
• invalidCharsMinClass - 覆盖内置值 "textfieldMinCharsState"
• invalidCharsMaxClass - 覆盖内置值 "textfieldMaxCharsState"
• textfieldFlashTextClass - 覆盖内置值 "textfieldFlashText"

c. 高级选项

• pattern - 主要用于 "custom" 和 "phone" "zip" 自定义输入格式：限制每个位置的特定字符。特定字符定义特定格式："0"-0到9的数字，"A"/"a" -区分大小写的字母，"B"/"b"- 不区分大小写的字母，"X"/"x" - 区分大小写的数字和字母，"Y"/"y" - 不分大小写的数字和字母，"?"- 任意字符。例如：美国的电话号码："(000) 000-0000"
• characterMasking - 使用 "useCharacterMasking"：正则表达式，防止输入不符合给出的正则表达式格式的值。
• regExpFilter - 同"useCharacterMasking"共同使用： 用正则表达式控制不允许输入的字符，例如：可以防止输入值中的"-"。当前输入的值必须符合此正则表达式才可以通过校验。
• validation - 函数调用或一个字符串，函数名，进行一些逻辑校验，函数返回一个true或false来显示输入是否通过验证。如果你要使用minValue 或 maxValue选项：这个函数必须返回一个可以同minValue/maxValue比较的数值。

第二个参数和第三个参数对应关系：

下面将详述这些校验类型和格式，说明了怎样合并不同的选项来实现特定的校验。

将文本框校验元件作为非必选

为了允许用户提交空值，元件应该有'{isRequired:false}' 参数，默认值为'true'：这意味着空值是不允许被提交的。然而，将isRequired属性设为'false'，就可以改变元件的默认校验行为了。

定义何种操作触发校验程序

校验元件通常在提交 'on submit'时进行，用户可以定义其它两种选项：失去焦点"blur"和改变"change"。validateOn:"blur"选项是在元件失去焦点时触发校验。validateOn:"change"选项是在改变时触发校验。你可以按如下方式加入选项：

怎样校验整数值

文本框校验元件如果只允许输入整数值可以将第二个参数设置为 "integer"，这将允许输入正负整数。

如果你向只接受正值，你要使用第三个参数 "allowNegative:false"

怎样校验整email地址

要对email地址进行校验可以将构造函数的第二个参数设置为 "email"。 只有是标准的email格式才可以通过校验。

怎样校验日期

要对文本框进行日期格式的校验可以将第二个参数设为"date"。对于这类校验可以在第三个参数中设置日期的格式："mm/dd/yyyy", "dd/mm/yyyy", "dd/mm/yy", "yy/mm/dd", "yyyy/mm/dd", "mm-dd-yy", "dd-mm-yy", "yyyy-mm-dd", "mm.dd.yyyy", "dd.mm.yyyy"。默认值是"mm/dd/yy"。

How to validate a time怎样校验一个时间

要对文本框进行时间格式的校验可以将第二个参数设为"time"。对于此类校验可以在第三个参数中设置时间的格式： "HH:mm:ss", "hh:mm tt", "hh:mm:ss tt", "hh:mm t", "hh:mm:ss t"。默认格式为："HH:mm"。

如何校验信用卡

要对文本框进行信用卡的校验可以将第二个参数设为"credit_card"。对于此类校验可以在第三个参数中设置信用卡的种类，Visa, MasterCard, American Express, Discover, Diner's Club："visa", "mastercard", "amex", "discover", "dinersclub"。

怎样校验一个邮政编码

要对文本框进行邮政编码的校验可以将第二个参数设为"zip_code"。对于此类校验可以在第三个参数中设置邮编的地区，US-9, US-5, UK, Canada："zip_us9", "zip_us5", "zip_uk", "zip_canada"。

有个重要的高级功能是你可以自定义邮编的格式。要加入一个邮编格式，要将第三个参数中的format设置为"zip_custom"，pattern为自定义的格式。可以使用的字符有： "0" - 0到9的数字， "A";"a" -区分大小写的字母，"B";"b" -不区分大小写的字母，"X"; "x" - 区分大小写的字母和数字，"Y"; "y" -不区分大小写的字母和数字，"?" - 任何字符。通过这些字符来匹配特定格式的邮编。

"A", "a", "X", "x"是区分大小写的字符。符合的字符将被转换为相应的大小写格式。

任何其它的字符将被视为可以按既定顺序自动插入文本框中。

在自动完成顺序中使用特殊字符，需要用\\进行转义。(例如： ‘I h\\ave 00 ye\\ars.’ 匹配 ‘I have 31 years.’ 转义 'a'.)
To use a backslash as an auto-complete character, you should double it and escape it with a double-backslash.要使用反斜线\，需要用\\加两个反斜线进行转义 (例如： ‘AA\\\\00\\AA’ 匹配 ‘UB\99AW’ 并且在输入UB后反斜线将被自动完成。)

例如， "zip_us9"的格式是："00000-0000" ， "zip_us5"的格式是： "00000"。下面是一个自定义邮编格式的实例：

怎样校验电话号码

要对文本框进行电话号码的校验可以将第二个参数设为"phone_number"。默认的是美国格式： (000) 000-0000。

"A", "a", "X", "x"是区分大小写的字符。符合的字符将被转换为相应的大小写格式。

任何其它的字符将被视为可以按既定顺序自动插入文本框中。

在自动完成顺序中使用特殊字符，需要用\\进行转义。(例如： ‘I h\\ave 00 ye\\ars.’ 匹配 ‘I have 31 years.’ 转义 'a'.)
To use a backslash as an auto-complete character, you should double it and escape it with a double-backslash.要使用反斜线\，需要用\\加两个反斜线进行转义 (例如： ‘AA\\\\00\\AA’ 匹配 ‘UB\99AW’ 并且在输入UB后反斜线将被自动完成。)

下面是一个自定义电话号码格式的实例：

怎样校验一个社会保险号

要对文本框进行社会保险号的校验可以将第二个参数设为"social_security_number"。格式为： '000-00-0000'。如果你希望校验其它格式的社会保险号，需要在第三个参数中定义pattern参数。

怎样校验货币

要对文本框进行货币的校验可以将第二个参数设为"currency"。默认的格式选项是："comma_dot"'(1,000.00)，但也可以用 "dot_comma" (1.000,00) 。3位一组的格式是可选的，小数部分也不是必须的。

怎样校验一个实数、科学计数

要对文本框进行实数、科学计数 的校验可以将第二个参数设为"real"。文本框接受实数输入，科学计数(例如：1.231e10)

怎样校验IP地址

要对文本框进行IP地址的校验可以将第二个参数设为"ip"。校验支持类型IPv4, IPv6 , IPv6和IPv4："ipv4", "ipv6", "ipv6_ipv4"。默认值为"ipv4"。

怎样校验URL

要对文本框进行URL的校验可以将第二个参数设为"url"。协议支持：http(s), ftp。

增加字符过滤

对于用户输入可以进行过滤，在构造函数中加入字符过滤选项。使用这个选项用户只能输入合法的字符。
当不定义校验类型时不能使用字符过滤(当第二个参数为none.)

设置一个提示值

当文本框中没有输入字符的时候，文本框校验元件可以使用"hint"参数进行输入格式的提示。这个信息显示在未做输入的文本框中。当文本框获得焦点信息消失这个参数适合所有类型校验。在文本框失去焦点时，如果文本框为空，信息将再次显示。

增加最大最小字符数限制

By using the Min/Max Chars option for the textfield widget you can control the number of characters entered in the textfield.通过使用最大最小参数控制文本框输入字符的数量。这个选项可以在以下类型中使用："none" , "integer", "email","url"。
注意："minChars"选项在文本框为非必添时不起作用。

增加最大值最小值校验

你可以限制文本框输入整数值时在一个范围内。这个参数适用于如下校验类型： "integer", "date", "time", "currency", "real"。

Copyright © 2006. Adobe Systems Incorporated. All rights reserved.Localization(Chinese Simplified) by Dorian Lee

www.sprycn.com版权所有，转载请保留此信息。