介绍
想知道如何在你的原型中创建文本字段，并检查用户输入是否正确吗？我们准备了一个非常简单的教程来帮助你。
在开始之前，你需要了解什么是输入验证以及它如何工作。那么，输入验证到底是什么呢？
输入验证是现代应用和 Web 应用中的常见功能。这个功能不仅用于引导用户，还能帮助验证用户在表单字段中输入的内容是否正确。例如，在许多网站的邮箱字段中，如果你输入了错误的邮箱格式，就会收到一条提示，告诉你所用的邮箱格式不正确。这意味着表单已经检查了输入并检测到其不正确。
ProtoPie 让创建这类表单变得容易，因为它有两个主要触发器——Input 和 Detect，可以很好地模拟带验证的表单字段行为。Input 功能允许你在文本字段中输入，而 Detect 功能会检查你在输入字段中输入的内容。
在 ProtoPie 中有效结合这两个触发器后，你就可以开始创建带验证的表单字段了。本课中我们会同时使用这两个触发器。
你将学到什么
创建带输入验证文本字段的通用结构
如何制作必填输入字段
如何检查输入值是错误还是正确
如何检查输入中文本或数字字符的长度
如何限定输入字段中的字符
先从输入字段文本验证的通用结构开始
通常，在 ProtoPie 中验证文本字段输入内容的方法遵循一种相似结构，包含两个主要触发器：Focus 和 Detect。
Focus(Focus out) 用于当文本不满足要求时触发错误消息。
Detect 用于在文本满足要求时进行检查/验证，从而让错误消息消失。
在每个触发器中，都会使用 Condition 来检查文本是否满足要求。
要实现不同类型的验证，我们只需更改每个触发器下的条件。下面的用例会展示如何在不同验证场景中复用这个结构。
如何创建必填 Input 字段
input 的 required 属性用于指定表单字段在提交前是否必须填写。
1. 在输入层 Input - First Name. 上添加一个 Focus 触发器。在属性面板中选择 **Focus Out **。
Focus 触发器会在输入层发生 focus in 或 focus out 时激活响应。此处使用 Focus Out，因为验证需要在用户完成输入后触发。
2. 在 Focus 触发器下，为输入层 Input - First Name. 添加一个 Condition。只需将通常默认显示为 X 的第二个下拉框改为 Text.
现在条件应显示为 Text of Input - First Name = "NONE"。该条件用于判断输入是否已填写。当输入未填写时，此条件下的响应会执行。
💡 为什么我们把值留空？
值留空或设为 none 的原因是：我们希望在输入框为空、用户未输入任何内容时显示响应。因此公式为（Text of Input - First Name = "NONE"）
3. 在刚创建的条件下，为该输入添加一个 Border 响应，并按下图设置其属性。这样当输入框为空时会高亮边框。
4. 在图层面板中选择错误提示（Please enter your first name.），然后点击 + 图标并为该错误提示添加一个 Opacity 响应。将不透明度设为 100。这样当输入框为空时会显示错误提示。
5. 现在为 Input - First Name. 添加一个新触发器——Detect。操作方法：选中输入字段，点击 add trigger 并选择 Detect 触发器。Detect 会在输入文本变化时触发响应。
6. 在 detect 触发器下添加一个条件：Text of Input - First Name ≠ "NONE"。做法与第 2 步相同。唯一需要修改的是将 = 改为 ≠。当输入已填写时，此条件下的响应会执行。
7. 在该条件下，为输入添加一个 Border 响应，并按下图设置其属性。在此条件下边框会消失。
8. 同时，为错误提示文本（Please enter your first name.）添加一个 Opacity 响应。将不透明度设为 0。这样在此条件下错误提示会消失。
9. 太棒了！你刚刚创建了一个必填输入字段。现在去 Preview Window 中查看交互效果吧。
如何验证输入值
input 的 value 属性用于指定数值型输入的值。
在上述场景中，文本值应大于或等于 18。
我们还需要在条件中使用公式。
1. 创建两个带条件的触发器。一个是 Focus 触发器，另一个是 Detect 触发器。
2. 创建条件后，如需切换到公式，将下拉选择从input component改为 Formula。
3. 选中公式后，将以下公式复制并粘贴到公式字段下方：number('Input - Age'.text)。该公式可将文本转换为数字。
** 4. 在 Focus** 触发器下，条件设为 number('Input - Age'.text) < "18"。这意味着粘贴公式后，条件符号为 <，值为 18。
5. 在 Detect 触发器下，条件设为 number('Input - Age'.text) ≥ "18"。这意味着粘贴公式后，条件符号为 ≥，值为 18。
请参考下图。
如何验证输入长度
length 属性用于指定文本数据（字符串）的长度。
在上述案例中，文本长度是固定的。否则会显示错误消息。
和前一个示例一样，我们会在条件中使用公式。这里使用的公式是 length('Input - Card number'.text)。该公式用于统计文本中的字符数。
在 Focus 触发器下，条件设为 length('Input - Card number'.text) ≠ "22"
在 Detect 触发器下，条件设为 length('Input - Card number'.text) = "22"
想知道在上述场景中如何制作自动格式化的输入字段原型吗？查看这个教程了解更多。
此方法也可应用于更多场景
密码（至少 8 个字符）
为多行输入制作字符计数器
下载完成的 pie 文件查看这些演示。
如何限定输入字段中的字符
用于指定数据是否必须是数字、电子邮箱地址或其他特定预设类型。
在上述案例中，输入内容需要是电子邮箱地址。否则会显示错误消息。在 ProtoPie 中验证邮箱的方法是检查输入文本是否同时包含 "." 和 "@"
每个触发器都需要 2 个条件。这里使用的公式是 indexOf('Input - Email'.text,".") 和 indexOf('Input - Email'.text,"@")
💡 **indexOf(): **查找关键字在文本中的起始位置。如果文本中不存在该关键字，返回值为 -1。
indexOf(source:TEXT,searchValue:TEXT)→ NUMBER
1. 在 Focus 触发器下，条件设为：indexOf('Input - Email'.text,".") = "-1" 和 indexOf'(Input - Email'.text,"@") = "-1". 我们需要将这些公式放入 2 个条件中。
第一个条件：indexOf('Input - Email'.text,".") = "-1" 用于检查用户输入中是否有点号。然后进入下一个条件，即使用公式 indexOf('Input - Email'.text,"@") = "-1" 来确认输入中是否有@符号。
请注意，@ 符号和点号位于 'Email'.text 之后，它是用户邮箱地址的前缀，也属于这两个条件的一部分。因此如果你的邮箱是 michaelajah@example.com，你的 @ 和点号都必须出现在 michaelajah 之后。
2. 在 Detect 触发器下，条件设为：indexOf('Input - Email'.text,".") ≠ "-1" 和 indexOf('Input - Email'.text,"@") ≠ "-1"。我们可以把这些公式放在 1 个条件里。在 focus 触发器中，我们将当两个条件都为真时的输入值设为 -1。此 detect 触发器中的条件用于检查输入值是否不等于 -1。
💡 为什么在 Focus 触发器下使用 2 个独立条件？
因为我们希望当这些条件中的任意一个满足时就显示错误消息。
💡 为什么在 Detect 触发器下只使用 1 个条件？
因为我们希望当这些条件全部满足时错误消息消失。
此方法也可应用于更多场景
URL 验证
用户名（不允许空格）
下载完成的 pie 文件查看这些演示。
总结
做得好！你已经学会了如何创建一个能够验证用户输入是否正确的文本字段。你还学会了如何使用条件和公式来检测并验证输入字段！
多花些时间练习这些教程，你很快就能成为 ProtoPie 高手。我们很想看到你的创意实验。创建你自己的原型，并在 Twitter 或 Instagram 上带上 #MadeWithProtoPie 分享出来吧。
