Axure RP官方教程翻译(12):必填区域

在提交表格前检查必填区域是否完成输入。实现效果如下:

Axure RP官方教程翻译(12):必填区域

STEP 1:建立

  • 打开培训文档中的“Required fields”页面。
  • 这个页面包含了一个文本框用来输入邮箱地址和一个提交的按钮。它也包含了一个带有两种状态的动态面板,“Success”和“Error”。这个邮箱地址区域需要被填入东西才能让“Success”的消息显示出来。如果没有填,则显示“Error”状态。
  • 选择“Submit message”动态面板将它隐藏。

Axure RP官方教程翻译(12):必填区域

STEP 2:显示错误信息如果邮箱区域是空白的

  • 选择submit按钮组件。在属性标签栏,双击“单击”来添加一个单击实例。
  • 在实例编辑器的顶部,点击“添加条件”打开条件创建器。
  • 保留第一个选项的值“组件上的文本”。在第二个下拉选项框,选择“Email address”组件。接下来两个选项需要设置成“等于”和“值”。
  • 在最后的区域,清除上面的文本以便该区域为空。
  • 点击确定关闭条件创建器。

Axure RP官方教程翻译(12):必填区域

  • 在实例编辑器中,点击左边栏的“设置面板状态”。
  • 在右边栏,选择“Submit message”动态面板。
  • 在下面栏,使用“选择状态”下拉框选择“Error”状态。然后点击勾选“显示面板如果隐藏”。
  • 在左边栏,点击行为“等待”。
  • 在右边栏,你可以配置“等待”行为的长度。将它改为2000毫秒。
  • 在左边栏,选择“隐藏”行为。
  • 在右边栏,勾选“Submit message”动态面板。
  • 点击确定关闭对话框。

Axure RP官方教程翻译(12):必填区域

 STEP 3:当邮箱区域不为空时则显示成功的信息

  • 再次双击在属性标签栏下的“单击”来创建一个新的实例。
  • 这次不用添加条件,因为如果第一个实例不满足条件不发生,则第二个实例会被触发。
  • 接下来的设置同上,不同的是要将动态面板的状态选择为“Success”状态即可。

Axure RP官方教程翻译(12):必填区域

STEP 4:预览

点击预览。

尝试点击submit按钮在没有在邮箱区域输入任何文本的情况下。当错误信息消失,尝试在邮箱地址输入文本然后再次点击submit按钮。

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

 

QR code