使用Axure实现用户登录时,对用户名和密码的校验。在此先给出一个登录界面,所需主要元件为:文本输入框、登录按钮等。
1:如果用户账户输入正确,密码错误,则提示该用户的密码输入错误;
2:如果均输入正确则进入到相对应的个人中心界面;
3:如果输入为空,则会提示用户名密码为空。
首先为页面元件定义标签:可参考如下界面示意图
1.然后给这三个控件分别命名为:"用户名"、"密码"、"登录按钮"。
2.注:(图中还有一个矩形框控件设置为透明,用于之后的提示,命名为"提示")
3.然后将所有控件合并成组。
第一种实现:当输入为空时点击登录按钮提示“用户名或密码不能为空。
1.首先给登录按钮添加一个单击事件:具体操作参考下图:
(首先在case1中设定条件,当用户名和密码文本框==值为,注意符合条件应该选择任何以下条 件。
然后添加动作—设置文本与“提示”矩形框—设置为富文本(富文本框控件,它能够处理有格式的文本,还可以显示字体、颜色、链接、嵌入的图像等。)
点击图上右下角的编辑文本设置提示文字为:用户名或密码不能为空。
然后设置显示“提示”矩形框:(因为我设置了当用户名和密码文本框获取焦点时会隐藏提示文本框,以防提示一直存在与界面上)
这样当点击登录按钮时,如果其中任意一个为空或者都为空时就会显示提示文本:用户名或密码不能为空“
第二种实现:当用户名和密码输入正确时跳转到对应的页面
1.首先定义2个全局变量,username和password。
设置默认值username=user password=123456
然后给登录按钮添加单击事件Case2
然后点击“编辑条件”—点击"fx"—添加局部变量
将局部变量=元件文字然后赋值给用户名文本框,密码文本框同理。
然后设置条件
选择变量值==值为局部变量名。然后设置单击时打开链接即可实现。
第三种实现:当输入的用户名或密码不正确时提示文字“用户名或密码错误”
1.首先给登录按钮添加单击事件Case3,然后设置条件
当输入正确时我们条件设定的是变量==局部变量
所以不正确提示我们则设顶为变量值!=局部变量的值(局部变量设定同实现2原理一样,命名不能相同)
还是选择添加动作—设置文本—选择“提示”矩形框设置为富文本然后编辑文本为:”用户名或密码错误“
之后选择显示“提示”文本框即可实现。
然后让我们看一下效果图吧。
最后谢谢各位读者老爷阅读,欢迎指出不足之处共同学习。