使用Axure实现简单的登录验证

使用Axure实现用户登录时,对用户名和密码的校验。在此先给出一个登录界面,所需主要元件为:文本输入框、登录按钮等。

     1:如果用户账户输入正确,密码错误,则提示该用户的密码输入错误;

     2:如果均输入正确则进入到相对应的个人中心界面;

     3:如果输入为空,则会提示用户名密码为空。

首先为页面元件定义标签:可参考如下界面示意图

     1.然后给这三个控件分别命名为:"用户名"、"密码"、"登录按钮"。

     2.注:(图中还有一个矩形框控件设置为透明,用于之后的提示,命名为"提示")

     3.然后将所有控件合并成组。


第一种实现:当输入为空时点击登录按钮提示“用户名或密码不能为空。

     1.首先给登录按钮添加一个单击事件:具体操作参考下图:

   (首先在case1中设定条件,当用户名和密码文本框==值为,注意符合条件应该选择任何以下条    件。

然后添加动作—设置文本与“提示”矩形框—设置为富文本(富文本框控件,它能够处理有格式的文本,还可以显示字体、颜色、链接、嵌入的图像等。)


点击图上右下角的编辑文本设置提示文字为:用户名或密码不能为空。

然后设置显示“提示”矩形框:(因为我设置了当用户名和密码文本框获取焦点时会隐藏提示文本框,以防提示一直存在与界面上)

这样当点击登录按钮时,如果其中任意一个为空或者都为空时就会显示提示文本:用户名或密码不能为空“


第二种实现:当用户名和密码输入正确时跳转到对应的页面

      1.首先定义2个全局变量,username和password。

设置默认值username=user     password=123456

然后给登录按钮添加单击事件Case2

然后点击“编辑条件”—点击"fx"—添加局部变量

将局部变量=元件文字然后赋值给用户名文本框,密码文本框同理。

然后设置条件


选择变量值==值为局部变量名。然后设置单击时打开链接即可实现。


第三种实现:当输入的用户名或密码不正确时提示文字“用户名或密码错误”

     1.首先给登录按钮添加单击事件Case3,然后设置条件

当输入正确时我们条件设定的是变量==局部变量

所以不正确提示我们则设顶为变量值!=局部变量的值(局部变量设定同实现2原理一样,命名不能相同)


还是选择添加动作—设置文本—选择“提示”矩形框设置为富文本然后编辑文本为:”用户名或密码错误“

之后选择显示“提示”文本框即可实现。

然后让我们看一下效果图吧。


                  最后谢谢各位读者老爷阅读,欢迎指出不足之处共同学习。


©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 一、Python简介和环境搭建以及pip的安装 4课时实验课主要内容 【Python简介】: Python 是一个...
    _小老虎_阅读 5,876评论 0 10
  • 吃货地图产品需求文档 V1.0-2015/03/30 1概述 1.1产品概述及目标 概述:“吃货地图”是一款基于i...
    michaelshan阅读 5,902评论 1 46
  • 今天我被妈妈拽去学游泳,我是非常怕水的,所以我一路上都提心吊胆的,一直被硬生生的拽到了游泳馆。到了游泳馆,...
    小何果阅读 173评论 1 0
  • 对于生长在一个脾气暴躁家庭下的孩子性格上都有缺陷,而我甚至是我们全家都是脾气暴躁,性格很急,动不动就只能靠动手,砸...
    尼糯米嵐阅读 364评论 2 1
  • 满腹柔情道婉闺 轻歌幽梦染春辉 忧人醉饮离别泪 玉液琼浆月影随
    蓝色汪星人阅读 318评论 3 4