亲爱的小伙伴，在您浏览之前，烦请关注一下，在此深表感谢！

课程主题：字母数字随机验证码高级交互

主要内容：4位字母+数字随机验证码生成、错误提示与State状态同步

应用场景：登录验证码、其他类型随机数与状态同步、重要页面交互

案例展示：

---

正文内容：

案例分析：1、载入时自动生成4位字母数字组合的随机验证码；2、记录错误次数，并有错误提示；3、每次重新输入后，验证码生成新的随机数；4、当错误次数达到3次时登录页面禁用；5、当输入随机验证码正确时，登入系统；

步骤一：准备基础素材，用户登录页面的绘制，并设置所有输入按钮的禁用效果；

步骤二：设计随机验证码，随机验证码在页面载入时就要产生，所以我们需要启用全局变量；载入时——设置文本——插入全局变量；

这里涉及到OnLoadVariable.substr(start,length)、OnLoadVariable.length、Math.random() 三个函数; OnLoadVariable.substr(start,length)表示：从当前文本对象中指定起始位置开始截取一定长度的字符串；OnLoadVariable.length表示当前对象的数目、Math.random()表示随机数；OnLoadVariable.length*Math.random()表示从个位置开始取数；

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

表达式的含义是：获得一个字符串文本，从某个随机数定义的位置开始取数，取length个数目的数据出来；最后的length为1，所以从某个随机数的位置取1个；

因为我们要生成四位的随机验证码，所以这套表达式要重复四个；

我们采用的是小写字母+数字的组合，所以我们要定义一下全局变量OnLoadVariable的值；

步骤三：设置重置按钮交互，当点击重置时所有输入的内容回到初始值；

步骤四：制作错误的弹窗和成功的弹窗

步骤五：设计确定按钮的交互，因为有要比对输入的验证码和随机验证码是否一致，所以这时候需要启用情形判断，当不一致的时候弹出错误弹窗，当一致的时候弹出成功弹窗；当错误次数达到3次时，页面禁用；

第一步我们先完成验证码的情形判断

到以上这里我们完成了验证码的比对，以及弹窗的交互；

第二步完成记录次数判断，每一次错误都要提供对应的错误提示窗口，那么我们就需要记录错误的次数，所以我们还要建立一个新的全局变量Count计数器，每点击一次Count+1;

步骤六：设置动态面板的State与次数的对应

同理分别设置变量值2、3时对应的State2\State3

步骤七：设置State3的重新输入按钮，点击隐藏动态面板，并禁用所有输入项

其他两个State的按钮都设置成单击隐藏动态面板，成功弹窗的按钮也设置成单击隐藏，完工！

本课小结：本课难点在于随机验证码的生成，动态面板的State随着点击次数变化而同步！

---

相关课程直通车：

中继器实现时间读取和修改-CSDN博客

Axure横向菜单高级交互-CSDN博客

Axure垂直菜单展开与折叠-CSDN博客

Axure树形菜单展开与折叠-CSDN博客

app评价弹窗制作-CSDN博客

pc轨迹回放制作-CSDN博客

Axure中继器时间筛选-CSDN博客

如有其他相关问题，欢迎私信沟通，关注  结构化知识课堂-CSDN博客

明天的产品大咖就是你，创作不易，麻烦关注一下，点赞+收藏，感谢大家！