账号登录 | Account Login

在本教程中,你将学习如何统建一个登录表单,通过判断条件来验证用户的登录凭证。【原型预览】

1、页面和元件设置

Page 1—登录表单

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

Page 2—登录成功页

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

链接到第二个页面

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

添加验证文本框的条件

  1. 将鼠标悬停在单击时事件上,点击右侧的启用情形。在弹出的情形编辑窗口中,设置情形名称为“登录成功”,然后点击添加条件
  1. 在添加的条件行中,在第二个字段的下拉列表中选择邮箱字段,然后在最右侧的字段中输入“test.raedme.cn”。
  2. 点击添加行来添加第二个条件行,在第二个字段的下拉列表中选择密码字段,然后在最右侧的字段中输入“123456”。

在对话框底部的条件区域中,将会显示:如果 文字于 邮箱字段==”test.raedme.cn” 并且 文字于 密码字段==”123456”。当点击登录按钮时,只有这两个条件都满足时,这种情形才会发生。

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

注意:虽然在这个情形下我们没有设置条件,但是它仍会有一个条件:否则 如果 真。这种情形是一个“默认”情形,当第一种情形没有发生时(邮箱或密码错误)就会发生此情形。

4、预览交互
  1. 预览页面,点击登录按钮。如果你没有输入正确的登录信息,就会显示错误信息。
  2. 然后分别在邮箱密码框中输入“test.raedme.cn”和“123456”,再点击登录按钮,就会跳转到Page 2页面。
评论(0)

发表评论

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