验证表单的字段

当用户在表单中输入数据并单击提交按钮时，检查数据是否有效。如果数据看起来有效，应用程序可以继续。如果不是，您应该告诉用户哪些字段包含错误以及如何修复它们。

例如，如果您的用户需要在该字段中输入他们的电子邮件，而他们却输入了他们的姓名——该信息无效。您可以使用应用程序的内置功能来显示错误消息并要求用户重试。

客户端验证改善了用户体验，因为它可以快速反馈用户在表单中输入的信息。但是，在将数据保存到数据库之前，您应该始终检查来自客户端的数据。

本文档的大部分内容适用于 Reactive Web App 和 Mobile App。对于传统 Web 应用程序，请参阅传统 Web 中的验证。

使用加速器创建初始验证流程

在 OutSystems 低代码方法中，默认情况下为支持的数据类型提供自动客户端表单验证。要使用内置验证，您需要：

1. 设置表单中值的数据类型。您可以手动执行此操作，也可以从 Entity 构建表单字段。
2. 如果需要，将字段设置为必填。
3. 触发加速器以创建具有初始验证流程的新客户端操作。要自动创建逻辑，请从在表单内提交数据的元素的事件列表中选择新建客户端操作。 检查此示例步骤为按钮创建新操作。

将输入字段设置为必填

如果用户必须在该字段中输入值，则该字段是必填字段。要将字段设置为必填，请选择小部件并在 “属性”窗格中将 “强制” 属性设置为True。小部件具有Mandatory字段，例如，Input Widget或ButtonGroup Widget，如果它们的常见用例需要的话。

设置表单域的数据类型

要自动检查用户输入的值是否有效，您首先需要告诉应用您期望的值是什么。从小部件属性的输入类型列表中选择数据类型。您可以选择多种数据类型，例如整数、货币、日期、时间、电子邮件。

启用或禁用内置验证

要激活内置客户端验证，请将提交数据的事件的 Built-In Validations属性设置为Yes。例如，按钮小部件的单击事件或调用客户端操作的链接小部件。************

验证客户端操作中的数据

启用内置验证后，您可以在提交表单的客户端操作中访问表单小部件的布尔值Valid属性。 例如，如果您有一个表单 ReorderItemForm，并且用户提交了正确的数据，则值为ReorderItemForm.ValidTrue。如果对任何字段的检查失败，则值为ReorderItemForm.ValidFalse。

在此示例中，一个If节点在ConditionReorderItemForm.Valid中。如果值为False，则验证失败并运行If流程的False分支。****Valid********

该应用程序仅验证您设置为必填的字段。该应用程序会跳过您未设置为必填的字段，因为这些字段是可选的。

自定义验证错误和警告消息

以下是一些编辑验证消息的方法。

编辑默认验证消息

您可以在模块级别编辑默认验证消息。通过单击任何主要 Service Studio 选项卡（ Process、Interface、Logic或Data ）中的模块名称 (1) 转到模块属性。然后，编辑验证消息部分 (2)中的消息。

以编程方式更改字段验证消息

您可以在应用程序执行期间更改字段的验证消息。您可以通过为小部件的ValidationMessage分配一个文本值来实现。 请记住，该消息仅在验证失败后显示，此时Field.Valid的值为False 。****

使用加速器进行客户端验证的示例

本节中有两个客户端验证示例。

自动创建具有预定义数据类型的表单域

使用低代码加速器在表单中插入字段，这可以帮助您在使用实体作为数据源时提高效率。请按照以下步骤操作。

1. 将表单小部件拖到屏幕上。
2. 将实体拖到表单小部件。表单的字段会自动填充。
3. 浏览字段并将所有非可选字段的必填设置为是。
4. 选择保存按钮。在按钮属性的 “事件” 部分，从 “单击时” 列表中选择 “新建客户端操作” 。将打开一个新操作，其中包含默认验证逻辑。
5. 当Form.Valid为True或False时添加不同的逻辑。

您可以通过将实体拖动到表单来创建表单、字段和保存按钮，就像在该屏幕中一样。

一步一步的例子

Service Studio 自动创建验证的初始逻辑，这可以显着加快您的工作。这是创建验证逻辑的分步示例。应用程序中有一个屏幕，用户可以在其中输入以下信息后重新订购商品：

• 名称 — 字符串，可选
• Email — 电子邮件地址，必填
• 数量 — 整数，必填

以下是创建 UI 和基本逻辑的步骤。

1. 创建一个新应用程序并添加一个屏幕。将屏幕命名为“ReorderItemScreen”。

2. 创建三个局部变量，并像这样设置它们的属性：

   姓名	数据类型
   员工姓名	文本
   员工邮箱	电子邮件
   数量	整数

   它应该看起来像这样，具有局部变量 (1) 和输入的名称(2) 和数据类型(3) 属性。

   

3. 将一个表单小部件拖到屏幕上并将其命名为“ReorderItemForm”。

4. 将三个Input Widgets拖到“ReorderItemForm”，并设置如下属性：

   姓名	多变的	强制的
   输入_员工姓名	员工姓名	不
   输入_员工邮箱	员工邮箱	是的
   输入_数量	数量	是的

   请注意输入类型属性如何自动更改以匹配变量数据类型。

5. 将按钮小部件拖到表单中的输入字段下方。将按钮的标签设置为“重新排序”。在这一步结束时，你应该有这样的东西：

   

   有一个表单 (1)，其中包含具有属性 (3) 的输入字段 (2)。按钮 (4) 需要位于表单内。

   通过将标签小部件拖到输入小部件上方，在输入字段的顶部添加标签。

6. 选择按钮，转到属性，找到事件部分，然后在其中单击。打开On Click列表并选择New Client Action。新操作触发加速器以创建具有初始验证流程的客户端操作。

   

   如果返回屏幕，您可以看到 Service Studio 创建了“ReorderOnClick”客户端操作 (1)。选择“重新排序”按钮 (2) 并确认Events部分中的Built-In Validation属性的值为Yes (3)。********

   

7. 最后，编辑流程以在用户输入无效数据时显示错误消息，在数据有效时显示成功消息。打开 ReorderOnClick，它应该看起来像这样：

   

   将Message节点从工具箱拖到If节点的False分支。输入Message 节点的Message属性，并在Type列表中选择Error (1)。将另一个Message节点从工具箱中拖到True分支。输入并在类型列表中选择成功(2)。"Check if all fields have the correct information and then retry." ********""Item reordered!""

   

8. 发布并运行应用程序。如果您输入有效数据，您现在会收到成功消息：

   

   但是，如果您以不受支持的格式输入电子邮件，或者输入浮点数而不是整数，则会收到错误消息：

   

   请注意，名称字段是可选的。

创建自定义验证逻辑

只要您提供有关预期数据类型的信息，支持的数据类型的内置验证就会自动运行。

如果您需要为更复杂的场景扩展验证机制，请创建您的验证逻辑并设置小部件字段的Valid变量。 如果您使表单中的任何字段无效，则会使整个表单无效（Form.Valid的值为False）。

自定义验证示例

在此示例中，表单包含一个用于输入装运日期的字段。验证逻辑检查日期是否在过去 (1)，如果是，应用程序通过设置 将字段标记为无效 (2) Input_Date.Valid=False。为了更好的用户体验，在 中设置自定义消息Input_Date.ValidationMessage，告诉用户日期不能是过去的日期 (2)。

使日期字段无效会使整个表单 (3) 无效，并在该字段旁边显示自定义消息。此外，在流程结束之前，屏幕 (4) 顶部还有一条额外的反馈消息。如果验证逻辑成功通过，应用程序将调用服务器操作以完成用户的请求 (5)。

这是在浏览器中运行的应用程序中的自定义验证消息，其中包含自定义验证消息（1）和表单验证失败后的反馈消息（2）。

传统网络中的验证

本节适用于验证在服务器端运行的传统 Web 应用程序。

要实施表单验证，请使用应用程序在提交表单数据后调用的服务器操作。在流程的开头添加所有验证：

1. 对于每个验证：

   1. 添加逻辑以验证输入值。

   2. 如果验证失败，请按如下方式分配输入的运行时属性：

      • Input.Valid = False
      • Input.ValidationMessage = "<your error message>"

2. 在所有输入验证之后检查Form.Valid的值。如果输入无效，则表单也无效：

   1. 添加具有以下条件的 If 元素：Form.Valid
   2. 如果True，继续操作流程。
   3. 如果False，结束动作流程。该表单在所有无效输入旁边显示验证消息。

表单的 Valid属性是False：

• 任何字段的内置验证失败
• 您分配False给表单任何字段的Valid属性

验证消息显示在所有输入无效的字段旁边。