如果想要檢驗(yàn)密碼的強(qiáng)度，要求能判斷數(shù)字、大寫(xiě)字母、小寫(xiě)字母及符號(hào)，這個(gè)功能對(duì)開(kāi)發(fā)人員來(lái)說(shuō)很簡(jiǎn)單，但在Axure中，默認(rèn)情況下是無(wú)法使用正則表達(dá)式的，所以對(duì)于密碼強(qiáng)度的校驗(yàn)就比較困難。怎么在Axure實(shí)現(xiàn)密碼強(qiáng)度校驗(yàn)功能呢？本文作者對(duì)此進(jìn)行了分析，一起來(lái)看一下吧。

有讀者提出了問(wèn)題：“校驗(yàn)一下密碼的強(qiáng)度？要求能夠判斷數(shù)字、大寫(xiě)字母、小寫(xiě)字母以及符號(hào)。”

如果是開(kāi)發(fā)人員來(lái)實(shí)現(xiàn)此功能非常簡(jiǎn)單，但是在Axure中，默認(rèn)情況下是無(wú)法使用正則表達(dá)式的，所以對(duì)于密碼強(qiáng)度的校驗(yàn)就變得有些困難，我們先依次來(lái)分析每種情況：

• 大寫(xiě)字母：校驗(yàn)大寫(xiě)字母很簡(jiǎn)單，只需要將密碼轉(zhuǎn)為小寫(xiě)形式（通過(guò) .toLowerCase()方法） ，然后與原始密碼進(jìn)行比較，如果它們相等，則說(shuō)明密碼中沒(méi)有大寫(xiě)字母。
• 小寫(xiě)字母：同樣地，將密碼轉(zhuǎn)為大寫(xiě)形式（通過(guò) .toUpperCase()方法），然后與原始密碼比較，如果相等說(shuō)明沒(méi)有小寫(xiě)字母。
• 數(shù)字：由于數(shù)字只有10個(gè)，因此可以采用“暴力窮舉”的方式來(lái)判斷（是否包含0、是否包含1……）但是這種方法不夠“優(yōu)雅”！
• 特殊字符：常見(jiàn)的可在鍵盤(pán)上直接輸入的英文特殊字符在ASCII表里分了好幾段：32-47、58-64、91-96、123-126都有，如果再用“暴力窮舉”的方式實(shí)在是太野蠻了，而且對(duì)于中國(guó)人來(lái)說(shuō)，密碼里塞幾個(gè)漢字或者全角字符好像也很正常，這種情況下窮舉顯然不現(xiàn)實(shí)，因此使用循環(huán)是比較好的辦法。

誒？等等??！循環(huán)？？？都要用循環(huán)了，那前面的分析沒(méi)就用了呀，直接用循環(huán)把每個(gè)字符都判斷一下不就好啦？

所以……以上文字都不重要了[手動(dòng)狗頭]

一、基礎(chǔ)知識(shí)

為了本篇文章，我還專(zhuān)門(mén)寫(xiě)了前置知識(shí)文章。如果你還不知道如何在Axure里使用循環(huán)，請(qǐng)先參考：《如何在Axure中使用“循環(huán)”》

二、真·解決方案

老規(guī)矩，我們先看一下演示鏈接：https://usrsky.axshare.com/#id=thtdwf&g=1

這個(gè)演示密碼強(qiáng)度校驗(yàn)實(shí)現(xiàn)了：

1. 密碼和明文的切換顯示。
2. 當(dāng)密碼為空時(shí)，提示“密碼不能為空”
3. 當(dāng)密碼少于8位時(shí)，提示“密碼至少需要8位”
4. 當(dāng)密碼中沒(méi)有大寫(xiě)字母時(shí)，提示“沒(méi)有大寫(xiě)字母”
5. 當(dāng)密碼中沒(méi)有小寫(xiě)字母時(shí)，提示“沒(méi)有小寫(xiě)字母”
6. 當(dāng)密碼中沒(méi)有數(shù)字時(shí)，提示“沒(méi)有數(shù)字”
7. 當(dāng)密碼中沒(méi)有符號(hào)時(shí)，提示“沒(méi)有符號(hào)”
8. 根據(jù)密碼的強(qiáng)度不同，依次使用“紅、橙、藍(lán)、綠”四色提示增強(qiáng)用戶體驗(yàn)
9. 可以在任意位置插入、修改和刪除字符，即使使用鼠標(biāo)操作也能正確地進(jìn)行校驗(yàn)

三、基本教程

我們先從最最簡(jiǎn)單的開(kāi)始一步一步來(lái)，準(zhǔn)備好以下元件：

• 一個(gè)文本框(命名：Password)，用來(lái)輸入密碼。在測(cè)試時(shí)，可以先將其設(shè)置為文本，成功后再把輸入類(lèi)型改為“密碼”。
• 一個(gè)文本框(命名：Loop)，用來(lái)做循環(huán)計(jì)數(shù)。
• 一個(gè)文本字段（命名：Message），用于反饋信息。
• 一個(gè)“校驗(yàn)密碼強(qiáng)度”按鈕(命名：校驗(yàn)密碼強(qiáng)度)。
• 四個(gè)復(fù)選框(分別命名：大寫(xiě)、小寫(xiě)、數(shù)字、字符)，用于來(lái)記錄對(duì)應(yīng)類(lèi)型是否存在。

首先，我們需要在“校驗(yàn)密碼強(qiáng)度”按鈕上編寫(xiě)交互事件：

由于很多時(shí)候需要使用到Loop里的文本值，所以可著物盡其用的原則，因此我們將盡可能多的交互事件都寫(xiě)在Loop文本框上，分別使用“尺寸改變時(shí)、移動(dòng)時(shí)、選中或切換選中時(shí)”吧：

Loop的“尺寸改變時(shí)”，用來(lái)做做循環(huán)的判斷：

Loop的“移動(dòng)時(shí)”，用來(lái)判斷每一個(gè)字符的類(lèi)別。其中pwd變量是Password元件的文本：

其中“其它”的判斷稍微有點(diǎn)復(fù)雜，需要判斷好幾個(gè)區(qū)間。（注意右上角：符合任意條件）

Loop的“選中或取消選中時(shí)”，用于做最終總結(jié)：

這樣一個(gè)基本的密碼強(qiáng)度校驗(yàn)功能就做好啦。

四、進(jìn)階教程

接下來(lái)讓我們進(jìn)行一些進(jìn)階教程。對(duì)于之前實(shí)現(xiàn)的功能，還有一些可以優(yōu)化的方面：

• 添加明碼和密文轉(zhuǎn)換功能。
• 在符號(hào)范圍判斷時(shí)應(yīng)該考慮全角符號(hào)和雙字節(jié)文字。
• 可以限制每種類(lèi)型字符的最少出現(xiàn)次數(shù)等。
• 為避免影響效率，可以限制密碼框中輸入文本的長(zhǎng)度。
• 如果四個(gè)復(fù)選框都被選中，則無(wú)需再對(duì)后續(xù)字符做檢查，應(yīng)該增加相應(yīng)判斷。
• 應(yīng)該增加一個(gè)可視化的強(qiáng)度展示，提升用戶體驗(yàn)。
• 其它還有很多我沒(méi)想到的，可以評(píng)論區(qū)補(bǔ)充。

前個(gè)都幾個(gè)好解決，我們將重點(diǎn)介紹如何實(shí)現(xiàn)可視化強(qiáng)度展示：

在前面做好的原型基礎(chǔ)上，準(zhǔn)備一個(gè)動(dòng)態(tài)面板，包含5個(gè)狀態(tài)，分別為（空、25%紅色、50%橙色、75%藍(lán)色、100%綠色）。

在“校驗(yàn)密碼強(qiáng)度”按鈕的點(diǎn)擊事件中，增加一步用于重置動(dòng)態(tài)面板狀態(tài)的操作。

順便將循環(huán)邏輯優(yōu)化一下：

在字符類(lèi)型的判斷上刪除全部的區(qū)間判斷，允許全角符號(hào)及雙字節(jié)文字：

在最終判斷時(shí)加入對(duì)動(dòng)態(tài)面板的改變，這里不需要判斷當(dāng)前狀態(tài)，直接下一項(xiàng)即可：

最后，預(yù)覽我們完成的成果。

五、總結(jié)

使用循環(huán)可以對(duì)密碼文本的全部字符進(jìn)行類(lèi)型判斷，無(wú)論在何處增加、修改或刪除。為提升用戶體驗(yàn)，我們還可以增加一些優(yōu)化功能，如文本框轉(zhuǎn)換、符號(hào)范圍限制、最少個(gè)數(shù)限制等，并且通過(guò)可視化強(qiáng)度展示讓用戶更直觀地了解密碼強(qiáng)度。