为界面提供其他逻辑的方法有两种:事件和输入限制条件。
事件
您可以指定微件在响应事件时所执行的操作,从而提高界面的动态性。例如,按钮微件上的 onClick
事件用于确定点击按钮时按钮的作用。
大多数微件至少有三个可用事件:onAttach
、onDetach
和 onDataLoad
。某些微件具有与其预期用途相关的其他事件。例如,文本字段微件具有 onValueChanged
事件,但没有 onClick
事件。
使用“属性编辑器”中的事件部分可指定微件如何响应事件。点击事件名称旁边的箭头可打开选择事件对话框。在其中选择一个预先制作好的脚本,或者通过点击自定义操作来编写您自己的脚本。
事件名称 | 说明 |
---|---|
onAttach |
在微件附加到 DOM 时执行脚本。 示例:应用主面板上的 onAttach 事件可以读取 cookie,以在视图加载时初始化状态。 |
onDetach |
在微件从 DOM 中分离时执行脚本。 示例:应用主面板上的 onDetach 事件可以向 cookie 写入内容,以在用户离开时保存视图的当前状态。 |
onDataLoad |
在微件及其数据加载时执行脚本。 示例:列表微件上的 onDataLoad 事件可以根据查询结果隐藏面板的某些行。 |
onClick |
在用户点击微件时执行脚本。可用于按钮、链接和其他可点击的微件。 示例:按钮上的 onClick 事件可让用户看到不同的视图。 |
onValueChange |
在微件的 value 属性更改时执行脚本。示例:文本字段上的 onValueChange 事件可以在用户输完查询后对字段的数据源执行搜索。 |
onValueEdit |
在用户修改微件的值时执行脚本。与 onValueChange 不同,此事件不会为响应绑定或程序化更改而运行。 示例:文本字段上的 onValueEdit 事件可以通过突出显示匹配的术语来响应搜索查询。 |
onValidate |
在微件的值发生更改或其他脚本触发验证时执行脚本。仅当新值满足微件的限制条件时,此脚本才会执行。 验证说明:对于有效值,会返回空字符串、 null 或 undefined 。对于无效值,会返回包含错误消息的非空字符串。
|
验证输入
通常,在将用户输入保存到数据库之前,最好先进行验证。例如,您的应用可能要求提供的手机号码位数正确,或者用户的名字和姓氏字段均已填写。在 Google 应用制作工具中,您可以使用限制条件来验证输入,或编写可在 onValidate
事件期间运行的自定义验证脚本。
使用限制条件进行验证
文本字段和文本区域微件的“属性编辑器”中均有数据验证部分。这些限制条件会在微件的值发生更改时触发,如果更改后的值不符合限制条件,则会显示错误。限制条件接受确切值、数据绑定或绑定表达式。
属性 | 说明 |
---|---|
required |
如果启用,则表示输入为必需项。 |
minLength |
可定义字符串允许的最小字符长度,包含空格。前导空格或尾随空格不计算在内。 |
maxLength |
可定义字符串的最大字符长度,包含空格。前导空格或尾随空格不计算在内。 |
regexp |
可定义用于验证用户输入的正则表达式。使用 JavaScript 正则表达式库。 示例:与任何美国邮政编码格式匹配的表达式: ^\d{5}(-\d{4})?$ 。 |
使用 onValidate 事件进行验证
onValidate
事件允许您编写自己的验证脚本。这最适用于以下情况:
- 您的使用场景比微件和字段限制条件所能涵盖的场景更复杂。
- 您需要提供错误自定义消息。
- 您的验证取决于其他字段或微件的值。
onValidate
事件可与限制条件结合使用,因为它仅在值符合限制条件时触发。
示例:某酒店预订应用希望用户输入 1 到 21 之间的值作为楼层号,但 13 除外。
将 min length
限制条件设置为 1,将 max length
限制条件设置为 21,然后在微件的 onValidate
事件中检查这个不吉利的数字是否出现:
if (newValue == 13) { return "Please select a number with a bit more luck."; }
使用 validate
方法触发验证
限制条件和 onValidate
脚本仅在微件的值发生更改时才会触发,有时这还不够。例如,如果您的一个表单会对每个字段进行验证,但用户在一个字段都没填写的情况下点击了“提交”,其验证检查可能永远不会运行。
为避免这种情况,您可以使用 validate
方法触发验证。对于上述示例,您可以将以下代码附加到“提交”按钮的 onClick
事件,假设它与待验证字段位于同一面板中:
if (widget.parent.validate()) { // We passed validation! Do whatever you want here... }
或者,您可以明确验证每个微件:
if (widget.parent.children.WidgetToValidate.validate()) { // We passed validation! Do whatever you want here... }
验证优先级
应用制作工具按以下顺序验证微件:
- 微件限制条件:
- 必需
- 最大/最小长度/数值
- 正则表达式
onValidate
事件- 绑定属性限制条件,如字段限制条件
一旦有任何步骤确定值无效,验证就会停止。例如,在检查 required
限制条件后,onValidate
事件始终不会收到 null
值,因为该值在限制条件检查期间未通过验证。
在新值通过验证之前,绑定属性不会更新。如果微件在初始检查失败后变为有效状态,那么作为 validate()
调用的结果,涉及其 value
属性的绑定会相应进行更新。