表单校验必学高级交互！变量函数表达式实战教程

上篇文章分享了几个常见的APP登录页高级交互案例与教程，这一篇继续带来另一个常用的高级交互场景——表单校验交互设计。这类交互在APP中非常普遍，案例中涉及的变量和函数表达式运用也十分典型，希望大家能通过本教程掌握这类高级交互功能的用法。

依旧以墨刀原型设计工具为例，使用其他工具也可以。不过是本文教程相较于Axure的操作方法有所不同，操作会更直观好理解一些，但底层逻辑是一致的。工具的选择完全自由，关键是学会这些功能背后的思路和运用方法。

一、明确表单校验的交互目标

表单看似简单，实际上包含了不少交互逻辑，比如每个输入项的格式校验、提交后的不同反馈等。我们先将交互目标梳理出来，再通过高级交互功能逐一实现。

1. 必填项格式验证交互目标

• 提交时，账号为空 → 出现红字提醒，短暂显示后消失
• 提交时，昵称为空 → 出现红字提醒，短暂显示后消失
• 提交时，联系电话为空 → 出现红字提醒，短暂显示后消失
• 提交时，联系电话不为空但不是11位数 → 出现红字提醒，短暂显示后消失

2. 多行输入文本计数交互

• 输入框为空 → 不影响提交成功
• 输入内容在200字及以内 → 右下角实时显示字数
• 输入内容超出200字 → 右下角实时计数变红提示
• 提交时，若字数超限超出200字 → 弹出浮层提示

这样看来，这个表单填写涉及比较多的交互条件和不同反馈，看似复杂，但逻辑非常简单，只要不遗漏条件就能完成。接下来我们可以来详细拆解：

二、必填项校验的交互反馈

关于必填项的判断，涉及到对输入框内容绑定变量、利用函数公式区分不同条件。那么总体分为3步完成：

第一步：创建及绑定变量

• 创建字符串变量“账号”，绑定账号输入框文本属性，初始值为空；
• 创建字符串变量“昵称”，绑定昵称输入框文本属性，初始值为空；
• 创建字符串变量“电话”，绑定电话输入框文本属性，初始值为空；
• 创建字符串变量“多行文本”，绑定多行输入框文本属性，初始值为空。

第二步：隐藏红字提示语

在每个输入框下方设置文本提醒输入框不得为空，文本内容如“请填写账号”“请填写昵称”“请填写电话号码”，以及电话格式不对的提醒文本“电话号码格式不正确”，初始状态全部隐藏。再额外准备一个浮层提示“描述字数超出限制”，以及“提交成功”的提示。

第三步：设置提交按钮交互

为提交按钮设置交互，触发方式为单击，设置多组条件判断：

• 条件1：如果“账号”.trim().length>0 && “昵称”.trim().length>0 && “电话”.trim().length==11 && “多行文本”.trim().length<=200；则打开“提交成功”提示浮层
• 条件2：如果“账号”.length==0，则显示“请填写账号”文本，延迟1000ms后隐藏
• 条件3：如果“昵称”.length==0，则显示“请填写昵称”文本，延迟1000ms后隐藏
• 条件4：如果“电话”.length==0，则显示“请填写电话号码”文本，延迟1000ms后隐藏
• 条件5：如果“电话”.length>0 && “电话”.length!=11，则显示“电话号码格式不正确”文本，延迟1000ms后隐藏
• 条件6：如果“多行文本”.length>200，则打开浮层提示“描述字数超出限制”

虽然条件多，但逻辑都是类似的，使用函数公式即可快速完成。在选择公式时，直接在下拉菜单中选择字符串函数即可，操作方便。

三、多行文本计数变化

在实际表单设计中，多行输入框通常需要字数统计。常见做法是右下角实时显示输入字数，超过限制时转为红色提醒，并在提交时做拦截提示。

1. 创建绑定变量

创建字符串变量“多行文本统计”并绑定计数文本属性，初始值为“0/200”。

2. 转换动态组件

将计数文本组件转为动态组件，设置4个状态：

• 状态1、状态2：灰色字体
• 状态3、状态4：红色字体

3. 设置交互行为

（1）实时计数：为每个状态添加交互事件，触发方式——载入时；行为——设置变量值；目标——“多行文本”：将“多行文本统计”设为“多行文本”.length+“/200”。同理为每个状态都设置一遍。

（2）状态切换：为每个状态设置切换交互，以状态1为例：触发方式——载入时；行为——切换至状态2；依次为状态1与状态2之间切换，状态3与状态4之间切换，实现实时刷新。

（3）超限提醒：设置文本长度判断的交互，接着在上个载入时交互事件中，为状态1与状态2添加条件判断交互：如果“多行文本”.length>200，则切换至状态3；为状态3与状态4添加条件判断交互：如果“多行文本”.length<=200，则切换至状态1。

这样就可以完成实时计数的效果和当输入文本长度超过限制时的字体颜色变化。

结语

通过以上两个案例可以看到：变量是高级交互的核心，与条件判断和函数表达式结合使用，能够轻松实现表单校验、字数统计等复杂交互。另外在处理文本类变量时，时常用到字符串函数公式。掌握这些技巧后，不仅能更好地还原产品需求，还能让原型在演示时更贴近真实产品，帮助产品经理在评审沟通中更高效。