小樓axure_圖文教程(十八)郵件驗(yàn)證-條件+循環(huán)遍歷字符.docx

小樓axure 圖文教程（十八）郵件驗(yàn)證-條件+循環(huán)遍歷字符串的組合驗(yàn)證作者: 小樓一夜聽(tīng)春語(yǔ)分類:Axure教程發(fā)布時(shí)間: 2013-07-29 12:00本文出自 訴客 產(chǎn)品經(jīng)理的心聲，轉(zhuǎn)載時(shí)請(qǐng)注明出處及相應(yīng)鏈接本教程元件下載：小樓原創(chuàng)axure元件-郵箱驗(yàn)證最近經(jīng)?？吹疥P(guān)于用axure實(shí)現(xiàn)郵件驗(yàn)證求助，本來(lái)沒(méi)太在意，前兩天閑著沒(méi)事，就決定做一個(gè)郵件驗(yàn)證的axure元件。結(jié)果，做是做出來(lái)了，過(guò)程的曲折，真是搞的蛋都快碎了。因?yàn)?，在這次元件制作的過(guò)程中，又碰到了axure的bug。還是先講思路，希望大家能夠適應(yīng)我使用mindmanager的腦圖來(lái)展現(xiàn)：如上圖所示，我們先準(zhǔn)備使用的2個(gè)元件，建好5個(gè)變量。這些就不細(xì)說(shuō)了。準(zhǔn)備好之后，我們開(kāi)始實(shí)現(xiàn)過(guò)程：1、 在文本框獲取焦點(diǎn)的時(shí)候，相關(guān)提示要清空，文本框失去焦點(diǎn)時(shí)，要提示請(qǐng)輸入郵箱地址。這個(gè)動(dòng)作在之前的教程小樓axure教程（一）文本框焦點(diǎn)效果里面講過(guò)，這里就不贅述了；2、 每次輸入郵件驗(yàn)證都是一個(gè)新的驗(yàn)證過(guò)程，所以我們要在獲取焦點(diǎn)時(shí)，將每個(gè)變量做一次初始化，把這些變量的初始值設(shè)為0；3、 到這里獲取焦點(diǎn)的事件就寫(xiě)完了，下一步就是文本框失去焦點(diǎn)時(shí)的事件了，如腦圖所示：我們使用用條件編輯器，先通過(guò)“包含”來(lái)判斷用戶輸入的郵件地址是否含有和.這兩個(gè)必須的字符，再來(lái)通過(guò)“是-之一”subsrting（0，1）判斷是否郵件地址首位是或.，通過(guò)substring（length-1,length）來(lái)判斷郵件地址末尾是不是或.。只要有一個(gè)驗(yàn)證符合條件，就在文本框給出錯(cuò)誤提示。4、 上面的條件判斷完成后未報(bào)錯(cuò)的情況下，進(jìn)入循環(huán)判斷，一個(gè)字符一個(gè)字符的驗(yàn)證郵件地址的合法性，循環(huán)通過(guò)切換面板的可見(jiàn)性來(lái)實(shí)現(xiàn)，面板顯示時(shí)我們來(lái)執(zhí)行驗(yàn)證判斷，一個(gè)字符判斷不合法時(shí)跳出判斷并提示錯(cuò)誤，字符合法時(shí)通過(guò)切換面板可見(jiàn)性將動(dòng)態(tài)面板轉(zhuǎn)為隱藏，當(dāng)面板隱藏時(shí)不做任何動(dòng)作，直接通過(guò)設(shè)置切換面板可見(jiàn)性，再將動(dòng)態(tài)面板設(shè)置為顯示狀態(tài)進(jìn)行第二輪判斷，這樣就形成了所謂的玄幻判斷。5、 既然循環(huán)判斷是一個(gè)字符一個(gè)字符的驗(yàn)證，那么就需要我們對(duì)字符進(jìn)行截取，這個(gè)時(shí)候我們就需要使用變量來(lái)記錄，我們的截取位置到哪里了。函數(shù)substring（from，to）的用法是截取第一個(gè)字符是substring（0，1）就是從第0個(gè)位置截取到第1個(gè)位置，截取第二個(gè)字符就是substring（1,2）以此類推；那么怎么動(dòng)態(tài)的依次截取每個(gè)字符呢？我們可以使用變量，會(huì)變才能動(dòng)態(tài)嘛。6、 變量num是我們用來(lái)執(zhí)行這個(gè)動(dòng)作的，num的初始值是0，那么截取第1個(gè)字符時(shí)，我們可以通過(guò)substring（num,num+1）代替，軟件會(huì)自動(dòng)把變量值導(dǎo)入函數(shù)的參數(shù)（括號(hào)里的叫參數(shù)）里去，所以就能實(shí)現(xiàn)substring（0,1）的效果。那么第2個(gè)字符substring（1,2）呢？很簡(jiǎn)單，因?yàn)槭茄h(huán)驗(yàn)證我們?cè)诘?個(gè)字符驗(yàn)證完畢時(shí)設(shè)置num=num+1，這就是讓num新值=num舊值+就是num新值=0+1，num變成1了。這時(shí)候驗(yàn)證第二個(gè)字符，我們?cè)侔裯um變量導(dǎo)入函數(shù)substring（num，num+1），就變成了substring（1,1+1）。字符就這樣一個(gè)一個(gè)的截取出來(lái)供我們驗(yàn)證的。7、 我們能夠通過(guò)循環(huán)來(lái)截取字符了，但是當(dāng)一個(gè)郵箱地址的所有字符都截取完畢的時(shí)候，就應(yīng)該停止了。怎么讓他停呢？還是通過(guò)num，但是還要借助另一個(gè)函數(shù)length（長(zhǎng)度）。因?yàn)槲覀兪褂胣um+1確定我們要截取的位置，這個(gè)位置肯定不能大于整個(gè)字符串的長(zhǎng)度。我們可以通過(guò)判斷num+1字符串長(zhǎng)度或者num=字符串長(zhǎng)度，來(lái)判斷是否應(yīng)該結(jié)束循環(huán)。我們可以在條件編輯器里面通過(guò)局部變量獲取文本框字符串，再用“局部變量.length”得到字符串的長(zhǎng)度來(lái)和sum進(jìn)行比較，如果sum=局部變量.length那么就需要結(jié)束，結(jié)束的標(biāo)記就是sum=over。8、 到這里我們知道了如何截取，如何結(jié)束。下面需要的就是驗(yàn)證的過(guò)程了。每當(dāng)截取到一個(gè)字符時(shí)，我們需要驗(yàn)證的是以下幾項(xiàng)：l 首先判斷有沒(méi)有不合法的字符，通過(guò)條件編輯器來(lái)判斷截取到的字符是不是數(shù)字或字母，再判斷是不是或.，如果都不是，報(bào)錯(cuò)！l 字符如果是合法的，我們就再判斷字符是不是或.，是就讓mailnum增加1，是.就讓dotnum增加一；緊接著就判斷mailnum是不是大于1，如果大于1就說(shuō)明我們檢驗(yàn)到字符串里同時(shí)有2個(gè)，報(bào)錯(cuò)！同理，如果當(dāng)前字符是.，我們就判斷dotnum是不是大于1，大于1就報(bào)錯(cuò)；l 在上面的判斷中，檢查到當(dāng)前字符是或.，點(diǎn)的時(shí)候我們還要做一個(gè)動(dòng)作就是如果是就讓mail=num記錄所在位置；如果是.就讓dot=num記錄.的位置；這樣我們?cè)谒凶址?yàn)證都合法時(shí)（num=over代表循環(huán)可以結(jié)束，num=out是報(bào)錯(cuò)退出）通過(guò)判斷mail是不是小于.來(lái)驗(yàn)證是不是在.的前面；l 上面條件成立后，我們就可以做是不是和.中間沒(méi)有字符的判斷，只要當(dāng)前字符是，我們就可以通過(guò)substring把下一個(gè)字符截取出來(lái)判斷是不是.就可以了，如果是，報(bào)錯(cuò)！9、 上面所有驗(yàn)證完成后，一個(gè)字符的檢驗(yàn)結(jié)束，這時(shí)候我們需要進(jìn)行下一次循環(huán)，也就是切換一下面板的可見(jiàn)性，但是這個(gè)動(dòng)作是有條件的，如果num不等over（還沒(méi)截取到最后一個(gè)字符）或者num不等于out（驗(yàn)證沒(méi)有報(bào)錯(cuò)），我們才有必要再次進(jìn)行循環(huán)。那么，到這里整個(gè)實(shí)現(xiàn)過(guò)程就結(jié)束了，不知道各位同學(xué)看懂沒(méi)有？看不懂我也木有辦法了，你就在做原型時(shí)直接旁邊注釋“程序猿，郵件要進(jìn)行驗(yàn)證?！本秃昧?。