后臺產品設計：表單驗證的幾種方式以及錯誤提示

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

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

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

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

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

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

報錯的方式：

1.即時報錯

2.輸入完成后報錯

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在用戶全部輸入完成以后，點擊下一步操作的時候將所有錯誤提示都展示給用戶。

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

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

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

常用于：登錄賬號

你學會了嗎?

猜你喜歡：

如何撰寫產品需求文檔(PRD)？產品經理須知！

怎么做pc端原型？產品經理們你們真得會嗎？

什么是AI產品經理？

中臺產品應用有哪些分類？

前臺和后臺你知道，那么中臺是什么？

傳智教育產品經理培訓課程