本文分享了获取、校验验证码的原型设计方法，希望对想学习Axure的伙伴们有帮助。

本文介绍了获取和校验验证码的原型设计方法，希望对想学习Axure的读者有所帮助。

一、获取验证码

获取验证码的操作如下图所示：

分析：左图为矩形，主要展示验证码（本例设置4位验证码），其中验证码为字母和数字组合；右图为文本输入框，主要设置点击事件，即点击文本文字，矩形框中的验证码随机出现四位值。

实现：

1. 准备相关部件：矩形1，命名为“验证码”，随意输入四个值，中间用空格隔开；文本标签，命名为“换一张”，字体随意设置。

2. 选择文本标签，设置鼠标点击事件。

第一步：新增全局变量。

第二步：设置全局变量值ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789。

第三步：设置验证码元件文本值。点击FX，插入字符串函数[[全局变量.substr(全局变量.length*Math.random(),1)]]，输入四次，中间用空格隔开。完成后点击“确定”。

原型连接可在链接https://pan.baidu.com/s/119S-ERhKMbetLrjCH7pSUg下载（密码t5cw）。

二、校验验证码

输入验证码，并校验是否正确。实现如下：

1. 在获取验证码的基础上增加新的元件：文本框（命名为“输入验证码”）和热区（命名为“具体提示信息”），并将热区样式初始化为隐藏状态。

2. 设置输入框用例。主要作用是检查每次输入完成之后，验证码是否正确。如果正确，则提示信息显示为“√”，否则显示为“×”。添加“按键松开时”用例，在每次输入完成后松开按键时执行该用例。验证信息包括文字长度和内容是否与验证码相同等条件判断。错误时进行相应的提示信息设置。

最后隐藏提示信息即可。完整的用例信息请参考上述截图。

F5预览效果如下：

如果您想了解更多关于产品运营方面的干货知识，请继续关注135编辑器。