小楼axure_图文教程(十八)邮件验证-条件+循环遍历字符.docx

小楼axure 图文教程（十八）邮件验证-条件+循环遍历字符串的组合验证作者: 小楼一夜听春语分类:Axure教程发布时间: 2013-07-29 12:00本文出自 诉客 产品经理的心声，转载时请注明出处及相应链接本教程元件下载：小楼原创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（验证没有报错），我们才有必要再次进行循环。那么，到这里整个实现过程就结束了，不知道各位同学看懂没有？看不懂我也木有办法了，你就在做原型时直接旁边注释“程序猿，邮件要进行验证。”就好了。