在本教程中,你将学习如何制作一个带有判断逻辑的注册表单,以确保用户填写了所有的必填字段。【原型预览】
1、元件和页面设置
创建一个注册表单
- 打开一个新的RP文件,并在画布中打开Page 1。
- 拖拽两个文本框元件到画布中,将其分别命名为“邮箱字段”和“密码字段”。(你可以选择使用文本标签来标记每个元件。)
- 拖拽一个按钮元件到画布中,并设置按钮上的名称为“注册”。
- 拖拽一个三级标题元件到画布中,设置它的内容为“请输入邮箱和密码!”,并将其命名为“错误信息”。
- 将错误信息的字体颜色改为红色,并将其隐藏(通过点击样式工具栏或样式面板中的隐藏图标)。
添加一个注册成功的页面
- 添加一个新的页面到项目中,并将其在画布中打开。
- 拖拽一个一级标题元件到画布中,设置它的内容为“注册成功,谢谢!”
2、注册成功的情形
链接到第二个页面
- 选中注册按钮,点击交互面板中的单击时,打开链接。
- 在弹出的下拉列表中选择Page 2,然后点击确定按钮。
添加验证文本框的条件
- 将鼠标悬停在交互面板中点击时的标题上,点击右侧的启用情形。
- 在弹出的情形编辑对话框中,设置情形名称为“注册成功”,然后点击添加条件。
- 在出现的条件行中,在第二个下拉列表中选择邮箱字段,然后在第三个下拉列表中选择不等于(!=)。
- 点击添加行来添加第二个条件,在第二个下拉列表中选择密码字段,然后在第三个下拉列表中选择不等于(!=)。
对话框底部的摘要中将会显示:如果 文字于 邮箱字段 !=”” 并且 文字于 密码字段 !=””。当点击注册按钮时,只有两个文本框都不为空时,才会满足该条件。
- 点击确定按钮关闭情形编辑窗口。
3、注册失败的情形
- 选中注册按钮,将鼠标悬停在交互面板中点击时的标题上,点击右侧的添加情形。
- 在弹出的情形编辑对话框中,设置情形名称为“注册失败”,然后点击确定按钮(不需要添加任何条件)。
- 在交互面板中,点击注册失败情形下的插入动作图标。
- 在弹出的列表中选择显示/隐藏,在目标下拉列表中选择错误信息元件,保留显示选项,然后点击确定按钮。
备注:注意虽然我们没有给这种情形添加任何条件,但是它仍然有一个“否则 如何 真”的条件。当第一种情形没有发生时(也就是有一个文本框是空的),就会发生这种情形,也就是默认情形。
4、预览交互
- 预览页面,点击注册按钮,因为文本框是空的,所以就会出现错误信息。
- 向其中一个文本框中任意输入一些内容,然后再次点击注册按钮,这时候仍然会显示错误信息,因为另外一个文本框还是空的。
- 最后,向另外一个空白的文本框中也输入一些内容,然后再次点击注册按钮,这时候就会跳转到带有注册成功信息的Page 2页面。
附加信息和提示
当文本框获取焦点时隐藏错误信息【原型预览】
如果当你点击其中一个文本框时,你希望隐藏错误信息,那么需要在每个文本框元件下添加获取焦点时事件,并在事件下设置显示/隐藏动作。