文本框（Text fields）迷守，也常被稱作輸入框廊敌，廣泛存在于各種界面中俊抵。Material Design對其的解釋是：“文本框允許用戶在界面中輸入和編輯文本埋哟，經(jīng)常出現(xiàn)在表單和對話框中÷运”那么价卤，當(dāng)用戶在文本框內(nèi)的輸入內(nèi)容不符合文本框設(shè)定的校驗要求時（比如，輸入字?jǐn)?shù)超過限定字?jǐn)?shù)）渊涝，就會出現(xiàn)報錯提示慎璧。前段時間剛完成一個面向B端用戶招商的項目，根據(jù)項目要求跨释，交互方案中出現(xiàn)了大量供用戶填寫的文本框胸私。結(jié)合項目過程中的一些思考，本文將對文本框的校驗機(jī)制和報錯提示進(jìn)行比較和總結(jié)鳖谈。

圖1 文本框報錯提示

舉個例子：一個文本框的最大限制字?jǐn)?shù)為10字岁疼。當(dāng)用戶輸入的文本超出了10字，需要出現(xiàn)報錯提示缆娃。我們依次來看一下可能的方案捷绒，各方案的示例如下圖所示。

圖2 超出限定字?jǐn)?shù)的4種報錯方案

方案1：采用失焦校驗的方式贯要，報錯提示為“超出限定字?jǐn)?shù)”暖侨。

的確是起到了報錯的作用，但是其提示文案卻不夠清晰崇渗。用戶看完后字逗，仍然不知道這個輸入框到底可以輸入幾個字。

方案2：采用失焦校驗的方式宅广，報錯提示為“超出限定字?jǐn)?shù)10字”扳肛。

看似是解決了方案1存在的問題。因為這句提示既指出了報錯原因乘碑，又告知了解決方案。

然而金拒，這句文案卻存在著歧義：限定字?jǐn)?shù)是10字兽肤？還是現(xiàn)在已經(jīng)超出限定字?jǐn)?shù)10字？對于10字這種數(shù)量不多的情況绪抛，用戶在比照著輸入框內(nèi)現(xiàn)有的字?jǐn)?shù)后资铡，還可以較快地辨別。但是幢码，在允許輸入較多字?jǐn)?shù)的文本框中笤休，辨別的難度就增大了很多。比如症副，當(dāng)用戶看到“超出限定字?jǐn)?shù)200字”這句提示時店雅，就很難辨別出是限定字?jǐn)?shù)為200字政基，還是在限定字?jǐn)?shù)的基礎(chǔ)上超出了200字。

方案3：采用失焦校驗的方式闹啦，報錯提示“最多可輸入10字”沮明。

解決了方案1中存在的問題，而且不像方案2那樣存在歧義窍奋。是一個可行的解決方案荐健。

方案4：采用輸入校驗（oninput，輸入過程中就實時地進(jìn)行校驗）的方式琳袄，始終在輸入框下方顯示當(dāng)前的輸入字?jǐn)?shù)與限定字?jǐn)?shù)江场。

這個方案能實時地反饋給用戶現(xiàn)在已經(jīng)輸入了多少字，還可以輸入多少字窖逗，或者是超出了多少字址否。相比于失焦校驗，輸入校驗?zāi)茏層脩粼谳斎氲倪^程中就獲得及時的反饋滑负，而非輸入完成后在张。因此，在當(dāng)前的例子下矮慕，方案4也是一個可行的解決方案帮匾。

說到輸入校驗，最為大家所熟知的形式應(yīng)該就是Twitter的推文輸入框和微博的博文輸入框了痴鳄。由于推特和微博都會對單條博文進(jìn)行字?jǐn)?shù)限制瘟斜，因此，采用輸入校驗的方式痪寻，讓用戶實時地知道已輸入字?jǐn)?shù)以及還能輸入的字?jǐn)?shù)螺句，是再合適不過的了。如下圖所示橡类，Twitter在字?jǐn)?shù)未超長時模糊提示蛇尚，接近超長時則通過輸入校驗的方式精確提示剩余可輸入字?jǐn)?shù)，在已經(jīng)超長時提示已超出字?jǐn)?shù)并將其高亮顯示顾画，方便用戶分成多條發(fā)送取劫。

圖3 Twitter對推文的字?jǐn)?shù)校驗

另外，輸入校驗還可以被運(yùn)用于點評的場景中研侣，一方面是通過輸入校驗做字?jǐn)?shù)限制谱邪，另一方面還可以通過輸入校驗來鼓勵用戶適當(dāng)?shù)囟鄬懸稽c。下圖中的截圖來源于驢媽媽旅游的點評頁面庶诡，通過輸入校驗與提示文案的配合惦银，鼓勵用戶產(chǎn)出更優(yōu)質(zhì)的點評內(nèi)容。

圖4?驢媽媽旅游網(wǎng)的點評模塊

那么，輸入校驗的方式是否存在著一些問題呢扯俱？當(dāng)然存在书蚪。比如，對于某些需要服務(wù)器驗證的內(nèi)容蘸吓，這種校驗方式會加大服務(wù)器的壓力善炫。舉個例子：一個文本框，需要進(jìn)行敏感詞校驗库继。如果采用輸入校驗的方式箩艺，服務(wù)端需要在數(shù)據(jù)庫中查詢敏感詞，然后與用戶輸入的文本進(jìn)行對比宪萄，每一次查詢可能需要較多的時間艺谆。如果大量且連續(xù)地查詢服務(wù)器，可能造成服務(wù)器無法響應(yīng)的問題拜英。這時静汤，失焦后都不會出現(xiàn)報錯提示，更別說實時地出現(xiàn)報錯提示了居凶。

另外虫给，輸入校驗也不適合于某些唯一性的文本校驗。比如侠碧，在一般情況下抹估，用戶名都要求是唯一的，那就適合用失焦校驗的方式：當(dāng)用戶輸入完畢并移出光標(biāo)后弄兜，再判斷并提示是否已經(jīng)被別人使用药蜻。如果這種情況下使用輸入校驗來校驗其唯一性，用戶在輸入的過程中替饿，就可能會被不斷彈出的報錯提示弄得十分煩惱语泽。

圖5 對文本唯一性的校驗

綜上所述，總結(jié)如下：

1视卢、當(dāng)文本框出現(xiàn)報錯提示時踱卵，不僅要告訴用戶出現(xiàn)了什么問題，還要告訴用戶如何解決這個問題据过；

2颊埃、報錯提示文案需簡潔易懂，避免使用具有歧義的提示文案蝶俱；

3、輸入校驗在微型博客和點評的場景下比較適合饥漫。在點評的文本框中榨呆，恰當(dāng)?shù)厥褂幂斎胄ｒ災(zāi)芷鸬郊钣脩舻男Ч?/p>

4、對于需要服務(wù)器驗證的內(nèi)容庸队，或某些唯一性的文本校驗积蜻，則不適合使用輸入校驗闯割，而適合采用失焦校驗。

（在寫這篇文章的過程中竿拆，向前端組的同事請教了很多問題宙拉。感謝前端組同事們的耐心解答。）

參考

Text?fields?- Material Design, https://material.io/design/components/text-fields.html

文章修訂記錄

1丙笋、2018年11月12日：增加了圖5（對文本唯一性的校驗）以及文末的參考谢澈。

2、2018年12月4日：將標(biāo)題由“關(guān)于文本框報錯提示的思考”改為了“文本框的校驗機(jī)制與報錯提示”御板；增加了圖3（Twitter對推文的字?jǐn)?shù)校驗）以輔助說明锥忿；將圖4（驢媽媽旅游網(wǎng)的點評模塊）改大了一點，以便于在移動端閱讀時也能看得清怠肋；將圖5（對文本唯一性的校驗）進(jìn)行了更新和替換敬鬓。