Axure：基于axure的数字验证码实现

 功能如图：当另外一页跳转到“验证码”一页时，自动出现验证码，点击“重新获取验证码”时，再次出现验证码！

1.需要原件：

           1）两个矩形、三个文本标签、一个文本输入框。

        

             2）分别命名： 

             3）组成原件：

                                 将“文字提示”文字标签写入文本“您的验证码为：” 、将“再次获取验证码”文字 标签写入文本“再次获取验证码”、将两个矩形设置“外部阴影”后折叠在一次，如图

                

2.添加交互事件 

         1）设置全局变量

                菜单栏->项目->全局变量，添加全局变量verification_code。

                （添加全局变量的原因：将获取的验证码赋值给全局变量，全局变量再与输入框的文字对比，若相等则验证成功。）

          2) 事件交互

                 

                 对“验证码”文字标签添加交互：载入时，设置当前元件文字的值为 [[Math.floor(Math.random()*100000)]]

        

                 再将“验证码”文本标签的元件文字赋值给全局变量verification_code的值

                      验证码交互完成后，将这些元件组合，并隐藏。（可以设置当页面载入时显示验证码组合，这样的目的是：当其他页载入到当前页时实现自动弹出验证码的效果。）

                到此，验证码的交互完成，接下来，实现验证验证码的正确性。

                2）对文本输入框实现交互动作

                        交互事件：当文本改变时。判断当前输入的数字是否与已经被赋值的全局变量相等，如果相等，则做出相应的动作（在这里我在文本框旁加了个矩形，并隐藏，当If的这个条件判断成功，则显示“验证成功”矩形）！

                   

                         对“验证码输入”文本输入框设置“文本改变时”的if条件，提示成功后将文本框的内容设置为空

 

                 输入框的输入与验证码的交互到此完成。

                3）再次获取验证码 

                        给“再次获取验证码”文字标签设置交互动作 

                         与给验证码标签设置交互一样，重新给验证码赋值，重新给全局变量verification_code赋值，达到出现随机验证码的目的。

3.结语

                  功能实现：

                        与本文第一张GIF图实现的验证码功能一样：当第一次载入该页面时，显示验证码组合，消失后点击“再次获取验证码”再次出现不同的验证码组合

                

                 若有不足请指出问题，以此记录自己的学习笔记，希望能帮到一些同人！