### [Axure实例：login登录页面用户名密码校验](https://pmself.com/article/1724)

**Published:** 2022-11-29T04:46:59

**Author:** crawlpw

**Excerpt:** 制作两个页面1-登录页面，2-登录成功页面 1、登录页面 用户名输入框的类型为“text”，设置文本框名称为“…

1.  制作两个页面1-登录页面，2-登录成功页面

1、登录页面

![](https://pic1.zhimg.com/80/v2-6d7b80d76f5bf93150041c883c69be38_720w.webp)

用户名输入框的类型为“text”，设置文本框名称为“用户名”（设置名称方便快速找到元件）

![](https://pic2.zhimg.com/80/v2-a09e32925daa061d6d50453adfe4a155_720w.webp)

密码输入框的类型选择“密码”，设置文本框名称为“密码”（设置名称方便快速找到元件）

![](https://pic4.zhimg.com/80/v2-1bece66f16d9ddef4bde1bdfcdaf0217_720w.webp)

另外还要有一个错误提示的文本框，名称设为“提示框”

![](https://pic3.zhimg.com/80/v2-67e29a1a584e13a37f355602159783be_720w.webp)

2、登录成功页面

![](https://pic3.zhimg.com/80/v2-cda372910372dd13922d49dc78a7e50e_720w.webp)

简单做个，不同的界面就可以了。（界面是丑了点，但是不重要，我们主要看逻辑）

二、开始我们的逻辑校验

预设的账号密码和校验情况

![](https://pic1.zhimg.com/80/v2-f387e6941f1e617eb16ed4e0b8c131ac_720w.webp)

1、用户名和密码都为空, 提示“请填写用户名和密码”

给【登录】按钮添加单击事件

![](https://pic2.zhimg.com/80/v2-7aed0287c707284fef022e252fe83785_720w.webp)

点击【添加条件】

![](https://pic1.zhimg.com/80/v2-2bfa4e5e9575748b90816a516024ee6c_720w.webp)

设置条件“用户名”和“密码”都为空

![](https://pic1.zhimg.com/80/v2-6a79c5b843fb04fb5447f130650786c4_720w.webp)

注：

（1）“用户名”、“密码”就是一开始设置的用户名、密码框的名称

（2）“==”就是等于的意思

（3）空就什么都不填写

（4）左上角的“符合”选择全部，全部就是同时满足的意思

设置完成点击【确定】即可

条件设置完成后，我们需要设置满足该条件的校验提示，就是设置提示框的文字

点击【设置文本】，勾选名称为“提示框”元件，设置值为“请填写用户名和密码”

![](https://pic4.zhimg.com/80/v2-23982bc7ff31e170ebb97313957a61e3_720w.webp)

好了，看效果

![](https://pic2.zhimg.com/80/v2-96d6e06aaf33d0f665130eb0984a7f69_720w.webp)

2、用户名为空，提示“请填写用户名”

双击事件【鼠标单击时】，注意这边变成了Case2了

![](https://pic2.zhimg.com/80/v2-82015337f0124d6c6d969530790b25e1_720w.webp)

还是点击【添加条件】进行判断条件的设置

注：“用户名”选择了==空，“密码”选择了!=空

![](https://pic1.zhimg.com/80/v2-545b1500bda70e835bf4f411964b6ce4_720w.webp)

条件完成后，我们还是设置“提示框”文本的值达到提示效果

![](https://pic3.zhimg.com/80/v2-3fab14c4f42262e8dd73a7c60d9ceeaa_720w.webp)

好了，看效果

![](https://pic2.zhimg.com/80/v2-d72dfaee35611a8b52914023ff538f09_720w.webp)

3、密码为空，提示“请填写密码”

和用户名为空的判断基本相同，不做过多说明了，参照下图

![](https://pic4.zhimg.com/80/v2-c15a58d3008828b1d636bb22c10e3317_720w.webp)

![](https://pic4.zhimg.com/80/v2-6bd6423e074923a06c92366f0b76933f_720w.webp)

看效果

![](https://pic4.zhimg.com/80/v2-8eb78182ed19ba38c98c9b1859e79fd3_720w.webp)

4、用户名和密码都错误，提示“用户名和密码错误”

双击事件【鼠标单击时】

![](https://pic2.zhimg.com/80/v2-a97b6362d333bbca62b07a4ba18f4541_720w.webp)

设置条件

![](https://pic1.zhimg.com/80/v2-def4dd91bc7bc64c9b4243deedf0ff6c_720w.webp)

设置满足条件的提示文本框的值

![](https://pic3.zhimg.com/80/v2-b86ec05e86228ff5b84b8f3fdff9ea72_720w.webp)

好了，看效果

![](https://pic2.zhimg.com/80/v2-6a98346525248162c0e58d580e8c5e55_720w.webp)

5、用户名错误，提示“用户名错误”

添加条件

![](https://pic1.zhimg.com/80/v2-3de3c9d237a94209e822d80ee405551c_720w.webp)

设置满足条件提示框的值

![](https://pic1.zhimg.com/80/v2-0ef1ced0dce8a87d4cb2a39854a4eb18_720w.webp)

好了，看效果

![](https://pic3.zhimg.com/80/v2-beeb318e4287dfcc8da549f8a496faea_720w.webp)

6、密码错误，提示“密码错误”

添加条件

![](https://pic3.zhimg.com/80/v2-6bd6fc6bb6d3fcbc5f651180d440c60a_720w.webp)

设置提示框的值

![](https://pic2.zhimg.com/80/v2-687d7d78e875f03282da97a477ab6e45_720w.webp)

好了，看效果

![](https://pic1.zhimg.com/80/v2-56d6475f20c083fa4a8c7e2728b03924_720w.webp)

7、用户名和密码都正确，进入登录成功页面

添加条件

![](https://pic1.zhimg.com/80/v2-0b17eae4abd6115123b59bcddd567a28_720w.webp)

设置满足条件后跳转至成功界面

点击打开链接—》当前窗口—》选择成功页面—》点击链接到

![](https://pic1.zhimg.com/80/v2-f94a568a6ce3d10bb23f490c9680eb0c_720w.webp)

好了，看效果

输入正确的用户名密码

![](https://pic1.zhimg.com/80/v2-7e3829c52033cb003c677f5345c0c368_720w.webp)

可以跳转成功界面拉

![](https://pic1.zhimg.com/80/v2-9172cece6a2fdf2508d7aa2b2649e4d0_720w.webp)

大功告成！

**一直以来想写一些Axure方面的教程，不知道从哪里入手。结合新人时期自己的一些迷茫与渴求，最后决定做Axure的实例教程。后期如果有一些朋友留言或者私信需要具体功能实例的话，我会优先做，如果没有的话，还是按照自己的所想来吧**

转载：[https://zhuanlan.zhihu.com/p/129445077?utm\_id=0](https://zhuanlan.zhihu.com/p/129445077?utm_id=0)

**Tags:** Axure实例, 密码校验, 登录

**Categories:** Axure

---