表单字段验证是任何应用或网页用户体验设计的核心。它可防止用户出错，并在填写在线表单时像贴心助手一样引导他们获得顺畅体验。在设计阶段，专门为表单验证创建原型能让设计师收集关于用户流程的宝贵反馈，确保输入正确信息，从而节省时间和资源。
为此，你需要一款能够在设计中充分运用条件逻辑能力的工具。本文将指导你如何使用 ProtoPie 为输入字段制作原型。更棒的是，你可以在自己的设备上用原生键盘进行真实文本输入，轻松测试原型。
概览
什么是必填字段验证？
如何在 ProtoPie 中制作必填字段验证原型
什么是范围检查？
如何在 ProtoPie 中制作范围检查原型
什么是一致性检查？
如何在 ProtoPie 中制作一致性检查原型
什么是数据类型验证？
如何在 ProtoPie 中制作数据类型验证原型
什么是模式匹配？
如何在 ProtoPie 中制作模式匹配原型
使用 ProtoPie 设计更好的用户体验
开始之前
要积极参与本教程，请下载下面的示例 .pie 文件并在不同场景间切换。我们建议先从空白项目开始——先尽情练习，然后再查看完整项目，看看自己的完成情况。祝你原型设计愉快！
什么是必填字段验证？
必填字段验证是一种表单验证技术，用于确保在提交表单前必须填写某个输入字段。这是一种确保用户提供必要数据的方法。该验证通常通过红色星号 (``*``) 标示，是指示必填字段的常见方式。
它适用于多种输入类型，例如文本、搜索、URL、电话、电子邮件、密码、日期选择器、数字、复选框、单选按钮和文件。该验证通过阻止提交不完整表单来改善用户体验。ProtoPie 的输入图层功能让这一过程变得轻而易举。
如何在 ProtoPie 中制作必填字段验证原型
现在，让我们来看一个请求填写必需名字的文本字段示例。在初始项目中，我们已经为你准备了一些设计和交互：
必填字段验证
在设计方面，屏幕上有一条错误消息。稍后会为其添加动画，以便根据用户输入显示或隐藏。
在交互方面，我们已使用“Focus”触发器为“Text Field”设置了默认和聚焦状态。
让我们先隐藏错误消息。你可以通过将其不透明度设置为 0来实现。
将错误消息的不透明度设为 0。
输入内容后，点击文本字段外部，或按下键盘上的 Enter 键。此时，我们将检查文本字段是否仍为空。如果文本字段为空，我们将显示文本字段的错误状态，并在下方显示错误消息。
在“Focus Out”触发器下添加一个条件。将条件设置为
Text of Text Field = "NONE"。该条件用于检查文本字段是否为空。
用于检查文本字段是否为空的条件。
当条件满足时，就可以为错误状态添加动画了。
为“Error Message”图层添加“Opacity”响应，将其不透明度设为 100。
另外，为“Text Field”图层添加“Border”响应，并将边框颜色设为红色。
为错误状态添加动画。
接下来，我们再添加一些交互：当文本字段有内容时，错误消息会消失。为此，我们将使用“Detect”触发器。Detect 触发器会持续监测目标对象的任何变化。
在“Text Field”图层上添加“Detect”触发器，并检测其“Text”属性。（对于输入图层，Text 属性表示字段内的内容）
接着，创建一个条件来验证文本字段是否已填写。使用条件
Text of Text Field ≠ "NONE"在该条件下，通过对错误消息应用“Opacity”响应并将其设为 0，使错误消息消失。
检测文本字段中的内容。
什么是范围检查？
范围检查是一种输入验证，用于验证输入数据是否落在预定义范围内。以下是一些范围检查示例：
年龄：例如，中学生通常年龄在 11 到 16 岁之间。计算机可以被编程为只接受 11 到 16 之间的数字。
地理数据：纬度和经度常用于地理数据。纬度值应在 -90 到 90 之间，而经度值必须在 -180 到 180 之间。超出此范围的值均为无效。
字符串：对字符串进行最小与最大长度检查。例如，检查密码长度是否在 8 到 16 个字符之间。
如何在 ProtoPie 中制作范围检查原型
在示例项目中，进入名为“Range Checking”的场景。
让我们从一个示例开始：要求中学生输入年龄，并确保其在 11 到 16 岁范围内。
范围检查
这个交互基于我们的第一个示例，确保用户必须输入内容。该场景的预配置交互可在交互面板中的“Age”组找到。
让我们让 ProtoPie 在用户从该文本字段失焦时验证输入值。
在“Focus Out”触发器下再添加一个条件。将条件配置为
Text of Text Field - Age < 11，用于处理用户输入小于 11 岁的情况。实现以下响应：
用于验证值是否小于 11 的条件。
为“Error Message - Age”图层添加“Opacity”响应，将其不透明度设为 100。
为“Text Field - Age”图层添加“Border”响应，并将边框颜色设为红色。
年龄低于 11 会触发错误状态。
再创建一个条件，使用
Text of Text Field - Age > 16检查年龄是否大于 16。通过复制粘贴实现与上一个条件相同的交互。这样可确保当用户输入大于 16 的年龄时显示错误消息。
当年龄超过 16 时，同样会触发错误状态。
接下来进入第二个示例，我们将验证密码长度。要求密码长度在 8 到 16 个字符之间。
密码必须满足特定长度要求。
你可以在交互面板中的“Password”组找到一些预制交互。
现在让我们为“Focus Out”配置错误状态。
第一个条件用于检查密码是否过短，因此使用
length(Text Field - Password.text) < 8。length()是 ProtoPie 中用于检查字符串长度的函数。
用于检查密码是否过短的条件。
第二个条件用于检查密码是否过长：
length(Text Field - Password.text) > 16
用于验证密码长度是否过短或过长的条件。
什么是一致性检查？
一致性检查是一种数据验证，用于确保输入的数据在逻辑上保持一致。它会检查数据内部是否存在冲突，特别是数据规则中是否有互相矛盾的陈述，例如：
密码确认：要求重新输入密码的字段可检查其是否与之前输入的密码一致。
下单与配送日期：检查包裹的配送日期是否晚于发货日期。同样，包裹发货日期不应早于下单日期。
如何在 ProtoPie 中制作一致性检查原型
让我们看一个示例：要求用户重新输入密码进行确认。
一致性检查
在示例项目中，进入名为“Consistency Checking”的场景。我们已经准备好了密码字段的交互。现在让我们专注于“Confirm Password”字段。
在交互面板的“Confirm Password”组中，找到“Mouse Out”触发器。
添加条件检查：
Text of Text Field - Confirm Password ≠ Text of Text Field - Password。该条件表示两个密码不一致。
用于比较两个密码字段内容的条件。
在该条件下，我们可以配置错误状态：将文本字段边框设为红色并显示错误消息。
当两个字段输入的密码不一致时添加错误状态。
什么是数据类型验证？
数据类型检查是一种输入验证，用于确保输入到字段中的数据符合预期的数据类型。例如，
年龄：年龄字段通常只允许数字。例如在线填写表单时，年龄字段会拒绝任何非数字输入。
信用卡号：输入信用卡号时仅允许数字。任何字母或特殊字符都会被拒绝。
城市名称：在某些应用中，城市名称字段仅允许字母。例如，它会拒绝“Toronto123”之类的输入，只接受像“Toronto”这样的纯字母输入。
如何在 ProtoPie 中制作数据类型验证原型
让我们看一个实际场景：输入字段专门要求输入整数数量。
数据类型验证
这个示例位于示例项目中的“Data Type Validation”场景。
在“Mouse Out”触发器下，创建一个条件来验证用户输入。
在该条件中，我们需要严格拒绝任何非数字输入。使用以下条件：`regexextract(Text Field``.text,"[0-9]+") ≠ Text of Text Field```
用于验证值是否为数字的条件。
regexextract()：该函数用于提取第一个匹配指定正则表达式模式的子字符串。``Text Field
.text：指“Text Field”输入中的文本内容。"[0-9]+"：这是一个正则表达式模式。其含义如下：
[0-9]：匹配 0 到 9 的任意数字。+：表示前面的模式（此处为[0-9]）应连续出现一次或多次。
等式左侧（regexextract(Text Field.text,"[0-9]+")）会从输入文本中提取第一段由数字组成的子字符串。例如：
如果输入 "123abc,"，返回 "123."
如果输入 "def456,"，返回 "456."
该条件会检查提取出的数字子串是否与“Text Field”中的原始文本不一致。如果不一致，说明输入中包含非数字字符。
在该条件下，我们可以为此情况设置错误状态：将文本字段边框颜色调整为红色并显示错误消息。
*调整框的颜色以指示错误消息。*
什么是模式匹配？
模式匹配在输入验证中是指先定义特定模式或格式，然后检查输入数据是否符合该模式。在软件开发中，通常使用正则表达式（regex）来实现这一点。
正则表达式（通常称为 regex）通过指定模式来搜索字符串中的特定字符或单词。如果你不喜欢深入代码，也可以借助 AI 帮你生成所需代码。
以下是几个展示模式匹配的示例：
电子邮件验证：确保电子邮件地址有效，需要检查输入是否符合邮箱的一般模式。通常包括 "@" 符号前的字符、后续字符以及结尾的句点。句点后应至少有两个 a 到 z 的字母。
密码验证：验证密码通常要求符合特定模式。例如，密码可能需要至少包含一个数字、一个大写字母和一个小写字母，并且长度至少为 8 个字符。
想进一步了解正则表达式，你可以参考这份快速指南。如果编码不是你的强项，也可以随时请 AI 帮你生成所需代码！
如何在 ProtoPie 中制作模式匹配原型
让我们在示例项目的“Pattern Matching”场景中探索密码模式检查，要求用户密码中至少包含 1 个大写字母和 3 个数字。
模式匹配
在“Mouse Out”触发器下，创建第一个条件以验证密码是否满足大写字母要求。将条件配置为：
regexextract(Text Field - Password`.text,"[A-Z]") = "NONE”```
用于验证是否至少有一个大写字母的条件。
模式
[A-Z]本身即可成功匹配字符串中的第一个大写字母。例如输入 "abcDE," 时，会返回 "D."。尽管该函数在找到第一个结果后就停止检查，但只要它有返回值，就表示输入中至少包含一个大写字母。如果返回 "NONE," 则表示条件不满足，验证失败。在该条件下方，我们可以继续为字段添加错误状态动画。
第二个条件用于验证密码是否至少包含 3 个数字，使用以下要求：
regexextract(Text Field - Password`.text,"^(.?[0-9]){3,}.$")= "NONE”```
用于确保至少有三个数字的条件。
^：断言字符串开头。(.*?[0-9])：匹配任意字符序列（非贪婪），后跟一个数字。{3,}：指定前面的模式(.*?[0-9])至少出现三次。.*：匹配其余任意字符。$：断言字符串结尾。
通过该函数，ProtoPie 会严格检查并返回满足指定要求的字符串。如果返回 "NONE," 则表示条件不满足，即验证失败。此时我们应继续为密码字段添加错误状态动画。
使用 ProtoPie 设计更好的用户体验
表单字段只是产品设计中的众多环节之一，而 ProtoPie 能让这些工作变得高效得多。整合必填检查、范围验证、一致性检查、数据类型验证和模式匹配等验证模式都非常轻松。
立即体验 ProtoPie 的高保真原型功能，提升设计的整体效果！
