Axure RP 实现登录用户校验的三种方式

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

• 如果用户不存在，则提示用户不存在信息；
• 如果用户账户输入正确，密码错误，则提示该用户的密码输入错误；
• 如果均输入正确则进入到相对应的个人中心界面。
• 高级要求：在以上基础要求达到的情况下，实现对不同用户名和对应密码的校验。

    首先为页面元件定义标签：可参考如下界面示意图（logo来自互联网仅用于学习交流请勿商用）

图1:登录页面

用户名称输入文本框定义标签为：name

密码输入文本框定义标签为：pwd

空白处拖入label元件定义为：msg（用于显示提示信息）

    第一种实现方法： 直接校验文字赋值

    选择元件【登录】按钮，添加动作【鼠标单击时】，编辑条件如下图2所示：

图2：admin的判断条件

    同理为密码添加判断条件：

图3：为密码添加判断条件

    以上条件的添加均为不包含条件约束，因为在Axure中不能支持嵌套的if……else判断，因此这里的条件均设置为在不满足某某条件的基础上，提示异常信息，否则就可通过校验而进入登录的用户中心。

    

    当不满足用户名为admin的条件下，设置提示信息msg的文字为“错误：无效的用户名”；然后清空name的文本框和pwd的文本框；设置焦点在name上。另外在下图中也添加了信息错误时的面板抖动效果，添加线性移动位移。

    当用户名输入为admin后，密码输入错误，设置提示信息msg的文本为“错误：[[Cname]]的密码不正确”,然后清空pwd文本输入框，设置焦点于此密码输入框中。

图4：交互动作

     我们注意到，在上面的密码错误提示上出现了一个局部变量"Cname",这是因为我们要获取的是所输入的用户的密码，如果只用一个用户，那么可以不用设置该局部变量，直接写“错误：admin的密码不正确”，但是当我们要判断多个用户的时候，设置局部变量就可以根据输入的用户名来显示该用户的错误密码提示了。

图5：密码局部变量设置和富文本编辑提示信息

    第二种实现方式： 设置全局变量判断非法性

    在菜单栏点击【项目】菜单选择【全局变量】弹出如下对话框：点击【+】添加两个全局变量，变量名称分别为username和password，默认值设置为admin和123456。

    

图6：设置全局变量

      为【登录】添加动作，单击时的条件设置，仍然设置的是不满足的条件下做何种操作 。

    元件name（即用户名文本输入框）不包含变量username；

    元件pwd（即密码文本框）不包含变量password

图7：全局变量的使用

图8：全局变量的使用

    设置密码错误提示的信息同第一种处理方式，设置局部变量或者静态文本显示。其他动作的的设置均同第一种方式中所述。

    至此，这两种方式实现的均是在同一个用户和密码的情况下进行条件判断，如果非法提示错误信息，如果合法则进入主页面。

    第三种实现方式： 多用户的校验

    如果要实现多用户的判断，那么这里有一种方式通过全局变量的格式校验，来实现类似于数据库的匹配效果。假设定义用户和密码分别admin:123456；zhangsan:111；lisi:222三个用户，当输入不存在的用户名时提示用户用不存在，当输入存在的用户名时，要匹配相对应的密码是否正确。

   首先定义全局变量userData，默认值定义为(admin:123456)(zhangsan:111)(lisi:222)，解释一下为什么要设置这样的默认值，我们可以根据“左括号+用户名+冒号+密码+右括号”的形式来达到校验的目的。

图9：设置多用户的全局变量

    在【登录】按钮上添加动作：

    判断不包含条件：首先定义局部变量n1，n1的值就是当前name输入后获取的值，用“左括号+n1+冒号”来判断我们之前定义的全局变量userData中是否包含这样的数据格式，以达到校验用户名的目的。

图10：设置局部变量校验

    注意：所有的变量，无论是局部变量还是全局变量，格式书写均要用两层方括号括起来，如[[变量名]]格式。

    密码的设置稍微不同，定义两个局部变量n2和p2用于获取name和pwd的当前值，使用“左括号+n2+冒号+p2+右括号”来判断是否满足userData的包含条件。如图11。

图11：设置局部变量校验

    条件判断设置完成后，动作设置同前两种处理方式，设置提示信息和焦点。如图12。

图12：动作设置

   判断完成所有的不满足条件后，继续添加用例，第三个用例不用添加任何判断条件，只添加动作跳转到用户中心页面即可。

    支持三种方式实现用户登录时的校验已描述完毕。

    小结：Axure对条件的判断不支持嵌套，因此通过不满足条件的判断能更方便的实现条件判断效果；设置局部变量用来获取用户所输入的当前值，如密码提示的设置；多用户的判断可以通过特定的格式判断来实现交互效果上的校验。