本示例向您显示如何使用客户端人员服务中 Coach 的数据更改属性来验证 Coach 数据,而无需退出 Coach。
关于本任务
以下示例演示如何验证 Coach 中用户输入的数据,以便在数据无效时,在 Coach 中显示错误消息。 该示例还演示数据无效时如何防止用户继续执行下一步骤。
此示例包含
Prompt for Start and End Dates Coach ,其中包含
开始日期 字段,
结束日期 字段和
确定 按钮。 开始日期必须早于结束日期。 要验证 Coach 数据,您将在 Coach 中指定用于执行验证的客户端 JavaScript。
过程
- 创建包含要验证的 Coach 的客户端人员服务。 请参阅 构建客户端人员服务。
- 在变量教练中 ,创建两个私有变量 startDate 和 endDate ,并将每个变量的类型设置为 Date 。
- 在客户端人员服务图中,将 Coach 重命名为 Prompt for Start and
End Dates。
- 在教练中,使用 OK按钮的顶部插入点添加两个日期时间选择器视图(垂直堆叠),将视图重命名为 startDate 和 endDate ,并确保它们分别绑定到 startDate 和 endDate变量。 将缺省 OK 按钮保持不变。
- 保存 Coach 配置。
- 在 Coach 的图视图中,在 下,输入以下 JavaScript 构造:
if (tw.local.startDate.getTime() > tw.local.endDate.getTime())
tw.system.coachValidation.addValidationError("tw.local.startDate", "The start date must precede the end date. Set the start date before the end date, and try again.");
在
coachValidation 对象中,第一个字符串包含到要验证其数据的元素的完整变量路径。 第二个字符串是面向用户的消息,此消息指定数据中存在哪些错误并告知用户如何纠正问题。
- 可选: 要阻止用户在数据无效时继续执行下一步,请完成以下步骤:
- 在变量教练中 ,为“人类服务”添加另一个名为 readyToSubmit的私有变量,并将其类型设置为 Boolean 。
- 在 Coach 属性中,将以下 JavaScript 代码附加到现有脚本:
tw.local.readyToSubmit = tw.system.coachValidation.validationErrors.length==0;
- 在 Coach 中,将 确定 按钮配置为未就绪时只读,如下所示:
- 单击 保存 或 完成编辑。
- 单击 运行
以运行人员服务。
- 在显示 Coach 的浏览器中,通过完成以下步骤来测试验证:
- 将 结束日期 设置为开始日期之前的日期。 单击确定。
浏览器将突出显示
开始日期字段,并显示警告图标。 如果将鼠标指针悬停在警告图标上,您将看到一条消息,指示开始日期必须早于结束日期。
- 将结束日期设置为晚于开始日期的日期。 单击确定。
由于两个日期均有效,因此该人员服务将成功完成。