微件逻辑

为界面提供其他逻辑的方法有两种:事件和输入限制条件。

事件

您可以指定微件在响应事件时所执行的操作,从而提高界面的动态性。例如,按钮微件上的 onClick 事件用于确定点击按钮时按钮的作用。

大多数微件至少有三个可用事件:onAttachonDetachonDataLoad。某些微件具有与其预期用途相关的其他事件。例如,文本字段微件具有 onValueChanged 事件,但没有 onClick 事件。

使用“属性编辑器”中的事件部分可指定微件如何响应事件。点击事件名称旁边的箭头可打开选择事件对话框。在其中选择一个预先制作好的脚本,或者通过点击自定义操作来编写您自己的脚本。

事件名称 说明
onAttach 在微件附加到 DOM 时执行脚本。
示例:应用主面板上的 onAttach 事件可以读取 cookie,以在视图加载时初始化状态。
onDetach 在微件从 DOM 中分离时执行脚本。
示例:应用主面板上的 onDetach 事件可以向 cookie 写入内容,以在用户离开时保存视图的当前状态。
onDataLoad 在微件及其数据加载时执行脚本。
示例:列表微件上的 onDataLoad 事件可以根据查询结果隐藏面板的某些行。
onClick 在用户点击微件时执行脚本。可用于按钮、链接和其他可点击的微件。
示例:按钮上的 onClick 事件可让用户看到不同的视图。
onValueChange 在微件的 value 属性更改时执行脚本。
示例:文本字段上的 onValueChange 事件可以在用户输完查询后对字段的数据源执行搜索。
onValueEdit 在用户修改微件的值时执行脚本。与 onValueChange 不同,此事件不会为响应绑定或程序化更改而运行。
示例:文本字段上的 onValueEdit 事件可以通过突出显示匹配的术语来响应搜索查询。
onValidate 在微件的值发生更改或其他脚本触发验证时执行脚本。仅当新值满足微件的限制条件时,此脚本才会执行。
验证说明:对于有效值,会返回空字符串、nullundefined。对于无效值,会返回包含错误消息的非空字符串。

验证输入

通常,在将用户输入保存到数据库之前,最好先进行验证。例如,您的应用可能要求提供的手机号码位数正确,或者用户的名字和姓氏字段均已填写。在 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...
      }
    

验证优先级

应用制作工具按以下顺序验证微件:

  1. 微件限制条件:
    • 必需
    • 最大/最小长度/数值
    • 正则表达式
  2. onValidate 事件
  3. 绑定属性限制条件,如字段限制条件

一旦有任何步骤确定值无效,验证就会停止。例如,在检查 required 限制条件后,onValidate 事件始终不会收到 null 值,因为该值在限制条件检查期间未通过验证。

在新值通过验证之前,绑定属性不会更新。如果微件在初始检查失败后变为有效状态,那么作为 validate() 调用的结果,涉及其 value 属性的绑定会相应进行更新。