Axure 制作验证码交互

由于手机号码的验证的广泛应用，验证码在原型制作中几乎都会使用到，比如在登录、更改密码等模块中。本文跟大家一起来看看，关于验证码的制作。

 

第一步，准备相应部件

 

拖下三个矩形，制作三个验证码，转化为一个动态面板。一个文本框，用于输入验证码，一个文本标签。一个对号和一个错号，制作对于验证码的判断。

 

文本标签输入文字“换一张”，以通过它来实现我们后面更新验证码功能。验证码的矩形转化而成的动态面板可命名为“验证码”以便我们识别它。按常规习惯而已，对号填充为绿色，错号为红色。

 

第二步，设置隐藏

 

将判断的动态面板设置为隐藏。在完成验证码的输入之后，再将输入的内容和显示的验证码进行对比，相同则显示对号，不同则显示错号。

 

 

 

第三步，设置验证码更新。

 

当我们单击“换一张”时会刷新验证码。我们利用动态面板设置了3个状态，分别制作了3个验证码。所以在单击“换一张”时，需要切换“验证码”这个动态面板的状态。

 

 

由于验证码有3个，这个我们需要判断验证码的动态面板处于哪一个状态，也就是说当前验证码是哪一个。所以，我们可以用全局变量将当前验证码记录下来。全局变量的默认值设置为ajiw。

 

 

在单击“换一张”的时候，判断当前状态。设置验证码的切换和记录。

当状态为状态1时，点击“换一张”，状态切换为状态2，全局变量设置为状态2中的验证码。依次类推，进行设置。

 

 

 

第四步，设置验证码判断

 

这是最后一步，也是这个叫交互最重要最关键的一步。这一步设置的条件判断有以下几个：

1、输入的验证码的字符长度是否为验证码的字符长度。

2、验证码输入的字符是否与验证码显示的字符一致。

这个交互的判断逻辑就是当文本框的字符长度为验证码的字符长度也就是输入4位字符的时候，开始校验输入的验证码是否正确。如果输入的字符与验证码的字符相同的话，显示对勾的符号，错误的话就显示错误的符号。如果字符长度不为4时则不进行校验，则判断不显示任何结果。

具体设置看下文。

为了做出即时判断，我们把用例设置在文本改变时事件。第一步是设置条件当文本框的字符长度为4，并且判断，输入的内容是否等于当前验证码。

同时满足上述条件的话，判断结果显示对号。只要有条件不满足，判断结果显示错号。

 

 

完成就可以来预览看看，是不是达到我们想要的效果。

 

 

这个验证码的设置方法是其中的一种设置方法。平时在设置的时候，根据你自己的实际需要去做不同的设置，做改动。如果你的实际需要跟本文的交互效果有出入，不知道如何设置的话，欢迎来跟我们交流探讨。