Axure实现随机验证码、Axure教程

随机验证码（Random Verification Code）是一种用于验证用户身份或进行安全验证的随机生成的数字、字母或符号组合。它常用于网站登录、注册、密码重置等场景，旨在防止恶意攻击、欺诈和机器人自动化攻击。

Axure中如何实现随机验证码呢，下面我们一起制作一下晒展网是用户多到能建用户数据库的展会网站。

预览地址：http://www.axuredesign.com/index.php?m=content&c=index&a=lists&catid=19&id=6

需求分析：

1. 验证码为数字和字母的随机组合。

2. 需要实现点击验证码的进行验证码更换。

3. 实现验证码校验是否正确

元件准备

1. 矩形（显示生成的验证码）
2. 矩形/文本（存放验证码随机数内容）
3. 输入框（输入验证码）
4. 按钮（点击进行校验）
5. 提示文本（输入错误弹出提示）

制作步骤：

1. 拉入一个矩形（命名text），设置内容为：abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789，然后将其隐藏

2. 在拉入一个矩形（用于展示验证码，下文称为验证区域）

设置矩形载入时交互，设置当前元件文字为值 ，在点击值下方的输入框后面Fx

在弹出窗口，添加一个局部变量（指向隐藏的text元件），然后在上方输入框添加下方函数，点击确认保存。

[[LVAR1.substr(LVAR1.length*Math.random(),1)]][[LVAR1.substr(LVAR1.length*Math.random(),1)]][[LVAR1.substr(LVAR1.length*Math.random(),1)]][[LVAR1.substr(LVAR1.length*Math.random(),1)]]

完成此步骤已经实现载入时获取一个随机验证码了。

3. 点击时实现验证码切换，在设置验证区域点击交互，点击时触发-当前元件-载入时交互。现在预览点击也可以重新生成验证码了。

4. 实现验证码校验，拉入一个文本框、一个按钮、一个文本（隐藏，作为提示信息）

设置按钮点击时交互

判断输入框文字=空，显示并修改提示文字为，输入为空

在判断输入框文字 != 验证区域文字，显示并修改提示文字为，输入不正确

在判断输入框文字 == 验证区域文字，显示并修改提示文字为，输入正确

到这步就已经完成啦~

预览地址：http://www.axuredesign.com/index.php?m=content&c=index&a=show&catid=1&id=6