[原]Spry框架：构件应用
[原]XML文档规则
Jun
17
[原]Spry框架：表单验证构件 
Spry框架的构件除了可以提供层叠样式面板等提高用户体验的可视化工具外，还提供了一组用于验证表单数据的Spry构件，不用编写代码，就可以高效快捷地完成表单验证的任务。这些验证框架有：验证文本框、验证文本区域、验证列表框、验证复选框、验证单选按钮、验证密码框，以及验证确认构件等。它们的使用方式与普通的构件也基本一样，HTML用于实现构件的层次结构，CSS用于定义构件的外观样式，JavaScript用于创建构件对象并将静态的HTML元素转换为具有交互性的用户界面元素。
一、概述
表单验证构件的定义方式与普通构件的用法基本相同，也就是说由以下部分组成：
但验证表单构件与普通构件的不同点是，验证表单构件具有许多状态，例如有效状态、无效状态和必须状态等。根据所需要的验证结果，可以使用属性检查器或原代码来修改这些状态的属性。然后根据验证时间点，验证结果，设置不同的CSS样式，或用JavaScript实时把验证结果在浏览器上显示，反馈给用户。
以验证文本框构件为例，其可以在不同的时间点进行验证，例如当访问者在构建外部单击时、键入内容时或尝试提交表单时进行。
这些状态有：
每当验证文本框构件以用户交互方式进入其中一种状态时，Spry框架逻辑会在运行时向该构件的HTML容器应用特定的CSS类。而用来控制错误消息的样式和显示状态的CSS样式规则包含在构建随附的CSS文件，例如验证文本框就是SpryValidationTextField.css 。
二、使用可视化工具
从工具栏的Spry菜单点击对应的按钮，即可插入需要的验证表单构件：
在可视化视图中，点击插入后的文件框：
从属性检查器中即可修改相关的验证属性：
三、源码架构
看过之前Spry框架源码，对下面的源码结构不会陌生。
1、添加JavaScript和CSS标记
在<head>部分添加导入JavaScript和CSS外部文件：
2、HTML代码
验证文本框构件的默认HTML位于表单内容，其中包含一个容器<span>标记，该标记将文本框的<input>标记括起来，并定义一个唯一的ID，以便后面的JavaScript脚本通过该ID值转换为对象元素。
另外，如果需要有提示信息的话，还需要在文本框的后面（<span id>的里面）添加更多的<span>标记，用于消息提示。这些提示信息，可以定义额外的CSS类，如textfieldRequiredMsg、textfieldMaxCharsMsg等，以便JavaScript可以根据文本框验证的结果，动态的修改其CSS类属性，及时向用户反馈验证结果。
这些提示信息，根据各自CSS文件文件中的定义，在初始状态都是display:none，也就是不显示的，只有当验证有结果后才会根据验证状态显示对应的信息和外观。
3、转为JavaScript对象
如果要实现交互式的效果，就必须把静态的HTML代码转换为一个具有交互性的用户界面组件。这些代码，必须放在HTML代码的后面。
验证文本框构件的构造函数的一般语法格式如下：
其中，参数element表示文本框构件容器span标记的ID，type表示验证的类型，options是可选的，其格式为{options:"value1",options2:"value2",...}，具体设置依赖于第二个参数设置的验证类型。不能设置第三个参数而不设置第二个参数。若要设置第三个参数而不需要指定验证类型，可将验证类型设置为“none”。
4、CSS代码
Spry验证文本框与普通文本框的区别在于，它可以对输入的内容进行验证，并在必要时显示错误信息。显示错误消息可以通过编写代码或利用属性检查器设置构件属性来实现。
若要改变默认的外观，可以修改对应的CSS文件，例如验证文本框的SpryValidationTextField.css，修改对应选择符的CSS属性即可。如.textfieldRequiredMsg，是定义构件进入必须状态时显示错误消息的外观。
演示：
Windows Media Player文件
一、概述
表单验证构件的定义方式与普通构件的用法基本相同，也就是说由以下部分组成：
引用
a、构件结构：用来定义构件结构组成的HTML代码块；
b、构件行为：用来控制构件如何响应用户启动事件的JavaScript；
c、构件样式：用来指定构件外观的CSS。
b、构件行为：用来控制构件如何响应用户启动事件的JavaScript；
c、构件样式：用来指定构件外观的CSS。
但验证表单构件与普通构件的不同点是，验证表单构件具有许多状态，例如有效状态、无效状态和必须状态等。根据所需要的验证结果，可以使用属性检查器或原代码来修改这些状态的属性。然后根据验证时间点，验证结果，设置不同的CSS样式，或用JavaScript实时把验证结果在浏览器上显示，反馈给用户。
以验证文本框构件为例，其可以在不同的时间点进行验证，例如当访问者在构建外部单击时、键入内容时或尝试提交表单时进行。
这些状态有：
引用
初始状态：在浏览器中加载页面或用户重置表单时构件的状态；
焦点状态：当用户在构件中放置插入点时构件的状态；
有效状态：当用户正确地输入信息且表单可以提交时构件的状态；
无效状态：当用户所输入文本的格式无效时构件的状态；
必须状态：当用户在文本框中没有输入必须文本时构件的状态；
最小字符数状态：当用户在文本框中输入的字符数少于文本框所要求的最小字符数时构件的状态；
最大字符数状态：当用户在文本框中输入的字符数多于文本框所要求的最大字符数时构件的状态；
最小值状态：当用户输入的值小于文本框所需的值时构件的状态。适用于整数、实数和数据类型验证；
最大值状态：当用户输入的值大于文本框所需的值时构件的状态。适用于整数、实数和数据类型验证。
焦点状态：当用户在构件中放置插入点时构件的状态；
有效状态：当用户正确地输入信息且表单可以提交时构件的状态；
无效状态：当用户所输入文本的格式无效时构件的状态；
必须状态：当用户在文本框中没有输入必须文本时构件的状态；
最小字符数状态：当用户在文本框中输入的字符数少于文本框所要求的最小字符数时构件的状态；
最大字符数状态：当用户在文本框中输入的字符数多于文本框所要求的最大字符数时构件的状态；
最小值状态：当用户输入的值小于文本框所需的值时构件的状态。适用于整数、实数和数据类型验证；
最大值状态：当用户输入的值大于文本框所需的值时构件的状态。适用于整数、实数和数据类型验证。
每当验证文本框构件以用户交互方式进入其中一种状态时，Spry框架逻辑会在运行时向该构件的HTML容器应用特定的CSS类。而用来控制错误消息的样式和显示状态的CSS样式规则包含在构建随附的CSS文件，例如验证文本框就是SpryValidationTextField.css 。
二、使用可视化工具
从工具栏的Spry菜单点击对应的按钮，即可插入需要的验证表单构件：
在可视化视图中，点击插入后的文件框：
从属性检查器中即可修改相关的验证属性：
三、源码架构
看过之前Spry框架源码，对下面的源码结构不会陌生。
1、添加JavaScript和CSS标记
在<head>部分添加导入JavaScript和CSS外部文件：
<script src="../SpryAssets/SpryValidationTextField.js" type="text/javascript"></script>
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
<link href="../SpryAssets/SpryValidationTextField.css" rel="stylesheet" type="text/css" />
</head>
2、HTML代码
验证文本框构件的默认HTML位于表单内容，其中包含一个容器<span>标记，该标记将文本框的<input>标记括起来，并定义一个唯一的ID，以便后面的JavaScript脚本通过该ID值转换为对象元素。
另外，如果需要有提示信息的话，还需要在文本框的后面（<span id>的里面）添加更多的<span>标记，用于消息提示。这些提示信息，可以定义额外的CSS类，如textfieldRequiredMsg、textfieldMaxCharsMsg等，以便JavaScript可以根据文本框验证的结果，动态的修改其CSS类属性，及时向用户反馈验证结果。
这些提示信息，根据各自CSS文件文件中的定义，在初始状态都是display:none，也就是不显示的，只有当验证有结果后才会根据验证状态显示对应的信息和外观。
<form id="form1" name="form1" method="post" action="">
<span id="sprytextfield1">
<label>
<input type="text" name="text1" id="text1" />
</label>
<span class="textfieldRequiredMsg">需要提供一个值。</span><span class="textfieldMinCharsMsg">不符合最小字符数要求。</span><span class="textfieldMaxCharsMsg">已超过最大字符数。</span></span>
</form>
<span id="sprytextfield1">
<label>
<input type="text" name="text1" id="text1" />
</label>
<span class="textfieldRequiredMsg">需要提供一个值。</span><span class="textfieldMinCharsMsg">不符合最小字符数要求。</span><span class="textfieldMaxCharsMsg">已超过最大字符数。</span></span>
</form>
3、转为JavaScript对象
如果要实现交互式的效果，就必须把静态的HTML代码转换为一个具有交互性的用户界面组件。这些代码，必须放在HTML代码的后面。
<script type="text/javascript">
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur", "change"], hint:"\u8BF7\u8F93\u5165\u7528\u6237\u540D", minChars:5, maxChars:10});
//-->
</script>
<!--
var sprytextfield1 = new Spry.Widget.ValidationTextField("sprytextfield1", "none", {validateOn:["blur", "change"], hint:"\u8BF7\u8F93\u5165\u7528\u6237\u540D", minChars:5, maxChars:10});
//-->
</script>
验证文本框构件的构造函数的一般语法格式如下：
<script type="text/javascript">
var tf1 = new Spry.Widget.ValidationTextField(element,type,options);
</script>
var tf1 = new Spry.Widget.ValidationTextField(element,type,options);
</script>
其中，参数element表示文本框构件容器span标记的ID，type表示验证的类型，options是可选的，其格式为{options:"value1",options2:"value2",...}，具体设置依赖于第二个参数设置的验证类型。不能设置第三个参数而不设置第二个参数。若要设置第三个参数而不需要指定验证类型，可将验证类型设置为“none”。
4、CSS代码
Spry验证文本框与普通文本框的区别在于，它可以对输入的内容进行验证，并在必要时显示错误信息。显示错误消息可以通过编写代码或利用属性检查器设置构件属性来实现。
若要改变默认的外观，可以修改对应的CSS文件，例如验证文本框的SpryValidationTextField.css，修改对应选择符的CSS属性即可。如.textfieldRequiredMsg，是定义构件进入必须状态时显示错误消息的外观。
演示：
Windows Media Player文件
