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

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