|
|
本教程元件下载：小楼原创axure元件-邮箱验证
最近经常看到关于用axure实现邮件验证求助，本来没太在意，前两天闲着没事，就决定做一个邮件验证的axure元件。结果，做是做出来了，过程的曲折，真是搞的蛋都快碎了。因为，在这次元件制作的过程中，又碰到了axure的bug。
还是先讲思路，希望大家能够适应我使用mindmanager的脑图来展现：
如上图所示，我们先准备使用的2个元件，建好5个变量。这些就不细说了。
准备好之后，我们开始实现过程：
1、 在文本框获取焦点的时候，相关提示要清空，文本框失去焦点时，要提示请输入邮箱地址。这个动作在之前的教程《小楼axure教程（一）文本框焦点效果》里面讲过，这里就不赘述了；
2、 每次输入邮件验证都是一个新的验证过程，所以我们要在获取焦点时，将每个变量做一次初始化，把这些变量的初始值设为0；
3、 到这里获取焦点的事件就写完了，下一步就是文本框失去焦点时的事件了，如脑图所示：我们使用用条件编辑器，先通过“包含”来判断用户输入的邮件地址是否含有@和.这两个必须的字符，再来通过“是-之一”subsrting（0，1）判断是否邮件地址首位是@或.，通过substring（length-1,length）来判断邮件地址末尾是不是@或.。只要有一个验证符合条件，就在文本框给出错误提示。
4、 上面的条件判断完成后未报错的情况下，进入循环判断，一个字符一个字符的验证邮件地址的合法性，循环通过切换面板的可见性来实现，面板显示时我们来执行验证判断，一个字符判断不合法时跳出判断并提示错误，字符合法时通过切换面板可见性将动态面板转为隐藏，当面板隐藏时不做任何动作，直接通过设置切换面板可见性，再将动态面板设置为显示状态进行第二轮判断，这样就形成了所谓的玄幻判断。
5、 既然循环判断是一个字符一个字符的验证，那么就需要我们对字符进行截取，这个时候我们就需要使用变量来记录，我们的截取位置到哪里了。函数substring（from，to）的用法是截取第一个字符是substring（0，1）就是从第0个位置截取到第1个位置，截取第二个字符就是substring（1,2）以此类推；那么怎么动态的依次截取每个字符呢？我们可以使用变量，会变才能动态嘛。
6、 变量num是我们用来执行这个动作的，num的初始值是0，那么截取第1个字符时，我们可以通过substring（num,num+1）代替，软件会自动把变量值导入函数的参数（括号里的叫参数）里去，所以就能实现substring（0,1）的效果。那么第2个字符substring（1,2）呢？很简单，因为是循环验证我们在第1个字符验证完毕时设置num=num+1，这就是让num新值=num旧值+就是num新值=0+1，num变成1了。这时候验证第二个字符，我们再把num变量导入函数substring（num，num+1），就变成了substring（1,1+1）。字符就这样一个一个的截取出来供我们验证的。
7、 我们能够通过循环来截取字符了，但是当一个邮箱地址的所有字符都截取完毕的时候，就应该停止了。怎么让他停呢？还是通过num，但是还要借助另一个函数length（长度）。因为我们使用num+1确定我们要截取的位置，这个位置肯定不能大于整个字符串的长度。我们可以通过判断num+1>字符串长度或者num=字符串长度，来判断是否应该结束循环。我们可以在条件编辑器里面通过局部变量获取文本框字符串，再用“局部变量.length”得到字符串的长度来和sum进行比较，如果sum=局部变量.length那么就需要结束，结束的标记就是sum=over。
8、 到这里我们知道了如何截取，如何结束。下面需要的就是验证的过程了。每当截取到一个字符时，我们需要验证的是以下几项：
l 首先判断有没有不合法的字符，通过条件编辑器来判断截取到的字符是不是数字或字母，再判断是不是@或.，如果都不是，报错！
l 字符如果是合法的，我们就再判断字符是不是@或.，是@就让mailnum增加1，是.就让dotnum增加一；紧接着就判断mailnum是不是大于1，如果大于1就说明我们检验到字符串里同时有2个@，报错！同理，如果当前字符是.，我们就判断dotnum是不是大于1，大于1就报错；
l 在上面的判断中，检查到当前字符是@或.，点的时候我们还要做一个动作就是如果是@就让mail=num记录@所在位置；如果是.就让dot=num记录.的位置；这样我们在所有字符验证都合法时（num=over代表循环可以结束，num=out是报错退出）通过判断mail是不是小于.来验证@是不是在.的前面；
l 上面条件成立后，我们就可以做@是不是和.中间没有字符的判断，只要当前字符是@，我们就可以通过substring把下一个字符截取出来判断是不是.就可以了，如果是，报错！
9、 上面所有验证完成后，一个字符的检验结束，这时候我们需要进行下一次循环，也就是切换一下面板的可见性，但是这个动作是有条件的，如果num不等over（还没截取到最后一个字符）或者num不等于out（验证没有报错），我们才有必要再次进行循环。
那么，到这里整个实现过程就结束了，不知道各位同学看懂没有？看不懂我也木有办法了，你就在做原型时直接旁边注释“程序猿，邮件要进行验证。”就好了。
关于bug：本来我是想通过多个动态面板分开进行每一步验证（其实这样更繁琐），但是虽然我事件没有问题但是只要开始触发第二个动态面板的循环事件浏览器就会卡死，屡试不爽！在这种情况下，我才考虑用一个动态面板来实现整个过程，也算是经历了一次考验！ |
|
发表于 2013-7-29 16:29:02
