最近偶然注意到验证码的原型，想起了我们实际遇到的验证码基本上不区分大小写，所以一起做一个忽略大小写的验证码原型吧。(大卫亚设)。

第一步，准备相应部件

拖动两个矩形、文本框、复选标记、错误编号和总共5个部件。

如图所示，其中一个矩形输入字符可以“更改为其他”，以便以后更新验证码功能，并将其他矩形命名为“验证码”，以便识别。复选标记用绿色填充，错误号为红色(按照惯例)，这些图标可在Axure的icons部件库中找到。

打开

第二步 设置全局变量

axure时，有一个默认全局变量，您可以在其中设置要显示的授权码。可以添加26个小写字母、26个大写字母和10个数字。此外，还需要添加变量。如果在此处指定名称“A”，则无需编辑值。留空就可以了。全局变量可以在菜单栏上的“项目选项”下设置，如下所示：

加载

第三步 设置页面加载事件

页时，必须设置确认代码矩形框随机显示4位确认代码。

这个用法共分为四个阶段。第一步是设置确认代码框的字符长度小于4时触发判断的判断条件。第二步是将变量值a设置为[[a]][[onloadvariable . substr()* 62)，1)]；第三步是将验证代码矩形文本设置为变量值A，第四步是在触发加载事件页面时形成循环，直到有4位数的验证代码为止。

第四步，设置验证码更新，即当我们单击那个显示文字为“换一张”的矩形框时会刷新验证码。

这个用例分三个阶段实施。第一步是将确认代码矩形和文本框文本设置为空，然后将变量值A设置为null，最后触发事件页面加载时，执行新的确认代码显示。当然，为了保证效果，必须隐藏确认号码和错误符号。

第五步，设置验证码判断

这是最后一步。条件判断看起来很多，但并不复杂。逻辑是确认文本框的字符长度为4时输入的验证代码是否正确。如果正确，则显示选中的符号时会显示错误的符号，如果字符长度不是4，则不会验证。

这个使用案例是，当密钥释放时(这样可以立即判断)，第一步是设置一个条件：文本框中的字符长度为4，文本框中的字符转换为大写后，语言确认代码转换为大写后相同(为了忽略大小写，特别是截图)。确认符号隐藏错误符号，如果不相同，则显示错误符号以隐藏复选标记。如果字符长度不是4，编号将与错误的编号一起隐藏。然后，将复选标记和错误编号重叠，将初始状态设置为隐藏，原型就完成了！

现在我们可以通过预览检查我们的劳动成果。要取消大小写验证，只需在步骤5中删除相应的判断！

扩张：这个原型比较粗糙。在此基础上可以做一些修改。比如将对错标记实现为动态面板，隐藏矩形边框，鼠标悬停下划线等，这取决于小伙伴们根据需要制作。

预览地址：

下载源文件：

这篇文章由@飞鱼原创发布，所有人都是产品经理。未经许可禁止转载。