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. 拉入一个矩形（命名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