來源：攜程UED
你是否經常碰到在填寫表單時，提交無數次卻還是無法通過校驗的情況；或者你是否在為不知道填寫中哪裡出現錯誤而抓狂；再或者你是否碰到過當你填寫了一大堆資訊，之後點選按鈕提交時，校驗報錯的同時，你發現你所填寫的所有的資訊都被清空；或者你還碰到過很多很多校驗當中出現的問題，那麼我們現在就開始進行表單校驗設計的思考。
那校驗有哪些情況呢？
1、 READY？
提到校驗，我們往往會聯絡到提交表單後出現的錯誤提示類資訊，但是其實在填寫表單前的提示資訊與表單填寫校驗有著莫大的關係。
此類提示資訊能夠幫助使用者在填寫表單前，降低出錯的可能性。它出現的形式分為以下幾類：
a) 簡要提示——有如：icon，icon+文字，文字，暗提示。
出現情況：一般提示資訊比較簡短，能夠讓使用者一目瞭然的記住，並且不干擾表單的填寫項。
alipay.com付款頁面
alibaba.com註冊
b) 複雜提示——以縮略資訊或icon來顯示，通過點選和hover進行檢視。
出現情況：提示資訊內容較多，需要使用者仔細閱讀，並且無法簡單記憶，直接全部顯示會影響整個表單填寫，因此此類情況需要hover或者點選操作進行檢視。hover或者點選後有浮層，蒙板，或者跳轉新頁面等情況。
taobao.com機票登機人填寫頁
ctrip.com機票登機人填寫頁
c) 限制操作——在表單填寫前，對某些需要填寫或者操作項會有一些disabled的狀態，只有當某些條件被啟用使用者才能進行操作。
出現情況：當填寫項與項之間帶有關聯性，前面的填寫項會影響後面填寫項的內容或狀態；或當填寫項較少，填寫項均可以即時校驗，就可以將主提交操作項做狀態限制。
livestream.com機票登機人填寫頁
d) 其他提示——填寫表單的時候，還有一種比較特殊但又更簡單明瞭的提示，例如：使用圖片說明。
出現情況：當填寫表單項的提示說明很難用文字清晰表述，這時候可以使用圖片，視訊等輔助方式來幫助使用者快速理解。
alipay.com水電煤繳費頁面
2、 ING~
當您瀏覽完整體的表單，接下來就是進行填寫的步驟。在填寫的過程中，我們會碰到很多型別的校驗，比如：即時校驗的友情類提示，即時校驗的警示提示，關聯性校驗的提示。即時的校驗也分為三種狀態一種是on focus後的幫助提示、輸入中的校驗、lost focus後的校驗。
出現情況：提示資訊內容較多，需要使用者仔細閱讀，並且無法簡單記憶，直接全部顯示會影響整個表單填寫，因此此類情況需要hover或者點選操作進行檢視。hover或者點選後有浮層，蒙板，或者跳轉新頁面等情況
a) 即時校驗的友情類提示
即時校驗的友情類提示不是提交時無法通過的出錯警示，而是給到使用者一些更合理的建議或者幫助。
Ctrip.com填寫登機人頁
（當你選擇了兒童票時會提示兒童票的某些特定限制。當你輸入的出生日期與你之前選擇的購買型別不一致的時候會建議你去購買更合適的型別，但並不強制。）
Buy360.com的註冊頁
（當onfocus的時候會出現下方幫助提示類資訊，當然也有很多網站會做成暗提示。）
163.com的註冊頁
（當onfocus的時候會出現右邊密碼的強度，會根據你輸入密碼的改變而提示你的密碼強弱。）
b) 即時校驗的警示提示
即時校驗的警示提示是屬於錯誤類提示，這類錯誤會影響表單無法提交。
警示提示類的校驗重要級別非常高，因此在顏色和位置上都需要非常明顯。有很多網站甚至將出錯內容和出錯後如何修改的建議都放在了該提示中顯示。
163.com的註冊頁
Buy360.com的註冊頁
c) 關聯性校驗
關聯性校驗是所填寫項之間會有相互影響的邏輯關係，後一項的填寫是否正確會取決與前幾項的填寫內容。
Buy360.com的註冊頁
（設定密碼填寫項與確認密碼填寫項不一致時會提示錯誤。）
招商銀行信用卡支付頁
攜程旅行計劃建立頁
（旅行計劃目的地1和目的地2的時間段有衝突時就會提示錯誤。）
3、 ACTION！
當您填寫完表單，開始觸發提交按鈕的時候，表單會開始進行表單提交後的校驗。目前比較多的有兩種，一種是逐條提示，另一種是一次性全部提示。
a) 逐條提示
逐條提示是在提交表單後，雖然有多項錯誤，但是每次提交只按順序顯示一條錯誤。逐條告知錯誤提示，會導致使用者改完之後再次提交又需要重複修改，視線流上下來回，不停的修改不停的提交，多次操作才能完成整個表單的過程。
yihaodian.com註冊頁
b) 一次性全部提示
一次性全部提示是在提交表單時將所有錯誤全部羅列。
Yahoo.com註冊頁
Hotels.com預訂頁
（該網站設計不僅將所有錯誤一次性全部羅列在填寫框右側，並且提交按鈕的hover狀態再次將所有錯誤呈現，點選某項錯誤會直接錨點跳轉至該錯誤填寫區域。）
思考：
出錯提示有4個基本原則：即時反饋出錯提示，出錯提示的位置顯示恰當並且明顯突出，提示資訊內容清晰易懂，一次性顯示全部出錯提示。
除了這些基本的設計原則，在設計表單的校驗中，還會有很多讓我很糾結的點，以下羅列一些我個人認為比較好的經驗。
1、 在設計校驗時雖然需要考慮到出錯提示的明顯突出，但是在實際情況中，會和頁面的空間大小和佈局相關，需要考慮實際情況來定奪。
2、 儘量避免不必要的錯誤，一是自動噴入值；二是限制型操作；
比如，在身份證填寫項中填寫了身份證資訊時，如果下面還需要填寫出生日期，完全可以直接噴入身份證上的出生日期值。
3、 有的錯誤校驗會自動修正一些資訊，但是這類行為請不要忘記告知使用者。
4、 友情類提示的校驗重要級別永遠低於警示類錯誤校驗，在視覺和互動的位置上應該酌情考慮。
5、 錯誤資訊出現的位置視覺等效果應該統一，並且在位置上保持在使用者可見的範圍內。
6、 頁面自動錨記至出錯項處，如果是多條可錨記至第一項，最好還能on focus至出錯的填寫項。
7、 不要輕易清空使用者填寫的內容。
8、 錯誤提示不僅顯示錯誤點，更可以推薦使用者一些正確填寫建議。
9、 出現了錯誤提示後，再次on focus至填寫項時，不要隱藏錯誤提示。