必填字段 | Required Fields

在本教程中,你将学习如何制作一个带有判断逻辑的注册表单,以确保用户填写了所有的必填字段。【原型预览】

1、元件和页面设置

创建一个注册表单

  1. 打开一个新的RP文件,并在画布中打开Page 1
  2. 拖拽两个文本框元件到画布中,将其分别命名为“邮箱字段”和“密码字段”。(你可以选择使用文本标签来标记每个元件。)
  3. 拖拽一个按钮元件到画布中,并设置按钮上的名称为“注册”。
  4. 拖拽一个三级标题元件到画布中,设置它的内容为“请输入邮箱和密码!”,并将其命名为“错误信息”。
  5. 将错误信息的字体颜色改为红色,并将其隐藏(通过点击样式工具栏或样式面板中的隐藏图标)。

添加一个注册成功的页面

  1. 添加一个新的页面到项目中,并将其在画布中打开。
  2. 拖拽一个一级标题元件到画布中,设置它的内容为“注册成功,谢谢!”
2、注册成功的情形

链接到第二个页面

  1. 选中注册按钮,点击交互面板中的单击时,打开链接
  2. 在弹出的下拉列表中选择Page 2,然后点击确定按钮。

添加验证文本框的条件

  1. 将鼠标悬停在交互面板中点击时的标题上,点击右侧的启用情形
  2. 在弹出的情形编辑对话框中,设置情形名称为“注册成功”,然后点击添加条件
  3. 在出现的条件行中,在第二个下拉列表中选择邮箱字段,然后在第三个下拉列表中选择不等于!=)。
  4. 点击添加行来添加第二个条件,在第二个下拉列表中选择密码字段,然后在第三个下拉列表中选择不等于!=)。

对话框底部的摘要中将会显示:如果 文字于 邮箱字段 !=”” 并且 文字于 密码字段 !=””。当点击注册按钮时,只有两个文本框都不为空时,才会满足该条件。

  1. 点击确定按钮关闭情形编辑窗口。
3、注册失败的情形
  1. 选中注册按钮,将鼠标悬停在交互面板中点击时的标题上,点击右侧的添加情形
  2. 在弹出的情形编辑对话框中,设置情形名称为“注册失败”,然后点击确定按钮(不需要添加任何条件)。
  1. 交互面板中,点击注册失败情形下的插入动作图标。
  2. 在弹出的列表中选择显示/隐藏,在目标下拉列表中选择错误信息元件,保留显示选项,然后点击确定按钮。

备注:注意虽然我们没有给这种情形添加任何条件,但是它仍然有一个“否则 如何 真”的条件。当第一种情形没有发生时(也就是有一个文本框是空的),就会发生这种情形,也就是默认情形。

4、预览交互
  1. 预览页面,点击注册按钮,因为文本框是空的,所以就会出现错误信息。
  2. 向其中一个文本框中任意输入一些内容,然后再次点击注册按钮,这时候仍然会显示错误信息,因为另外一个文本框还是空的。
  3. 最后,向另外一个空白的文本框中也输入一些内容,然后再次点击注册按钮,这时候就会跳转到带有注册成功信息的Page 2页面。
附加信息和提示

当文本框获取焦点时隐藏错误信息【原型预览】

如果当你点击其中一个文本框时,你希望隐藏错误信息,那么需要在每个文本框元件下添加获取焦点时事件,并在事件下设置显示/隐藏动作。

评论(0)

发表评论

电子邮件地址不会被公开。 必填项已用*标注