表單驗證功能設計需要注意哪些問題？【后臺產(chǎn)品設計】

后臺產(chǎn)品的表現(xiàn)形式比較單一，主要只有兩種形式：列表和表單。表單在網(wǎng)頁中主要負責數(shù)據(jù)采集功能。用戶在使用后臺時，需要大量通過表單提交信息，與系統(tǒng)發(fā)生交互，向數(shù)據(jù)庫寫入數(shù)據(jù)。那么你知道常見的表單驗證方式有哪些，彼此之間有什么差異嗎?分別適用于什么情況?今天我們就來詳細聊聊。

做好表單，無非需要注意以下兩個方面：

校驗觸發(fā)條件：在什么情況下進行校驗。

1.輸入的時候進行校驗;

2.輸入完成失去焦點的時候進行校驗;

3.輸入完成全部表單內(nèi)容，操作 保存/提交/下一步 的時候進行校驗

報錯的方式：

1.即時報錯

2.輸入完成后報錯

由于校驗觸發(fā)條件的不同和報錯方式的不同，可以組成下面四種方式：

1、輸入校驗、即時報錯：

在用戶輸入的時候進行實時的驗證，獲取焦點的時候顯示提示

缺點：影響一些性能，但是這個影響比較小;如果輸入一個錯誤率很高的內(nèi)容，頻繁的給用戶錯誤提示會影響用戶體驗

優(yōu)點：減輕后臺數(shù)據(jù)傳送壓力

常用于：檢測數(shù)據(jù)類型，注冊頁面的密碼檢驗(輸入是否符合規(guī)則)

2、失去焦點、即時報錯：

用戶輸入完成后，鼠標點擊非輸入框的其他位置進行校驗，并且如果有錯誤進行報錯

缺點：如果輸入有誤，用戶需要多一步操作，點擊回有錯誤的輸入框進行修改，稍微影響用戶體驗

優(yōu)點：為用戶修改錯誤節(jié)省時間、避免出現(xiàn)很多錯誤需要改正的情況

常用于：輸入驗證碼、注冊等功能

3、操作 保存/提交/下一步 時逐一報錯：

在用戶全部輸入完成以后，點擊下一步操作的時候進行表單的校驗，如果用戶輸入有誤，從上到下依次進行報錯

缺點：如果有很多輸入錯誤，需要多次操作下一步的操作才會提示完，對用戶體驗有很大的影響

優(yōu)點：減少后端服務器壓力，提高頁面性能

4、操作 保存/提交/下一步 時全部報錯：

在用戶全部輸入完成以后，點擊下一步操作的時候?qū)⑺绣e誤提示都展示給用戶。

錯誤的顯示形式，為了讓用戶更直觀的找到錯誤項，一般是在輸入/選擇框的下方用紅色文字提示，如下：

缺點：用戶不能及時看到反饋，及時進行修改，如果表單過長的話，會有一種‘為什么這么多錯誤’的感覺，在一定程度上影響用戶體驗

優(yōu)點：減少后端服務器壓力，提高頁面性能

常用于：登錄賬號

你學會了嗎?

猜你喜歡：

工具型產(chǎn)品如何變現(xiàn)？

pc端原型如何畫？產(chǎn)品經(jīng)理必看

什么是多參數(shù)事件埋點？

從傳統(tǒng)行業(yè)轉(zhuǎn)型做產(chǎn)品經(jīng)理需要什么條件？

黑馬程序員產(chǎn)品經(jīng)理培訓課程