后臺(tái)產(chǎn)品設(shè)計(jì)：表單驗(yàn)證的幾種方式以及錯(cuò)誤提示

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

做好表單，無(wú)非需要注意以下兩個(gè)方面：

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

1.輸入的時(shí)候進(jìn)行校驗(yàn);

2.輸入完成失去焦點(diǎn)的時(shí)候進(jìn)行校驗(yàn);

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

報(bào)錯(cuò)的方式：

1.即時(shí)報(bào)錯(cuò)

2.輸入完成后報(bào)錯(cuò)

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

1、輸入校驗(yàn)、即時(shí)報(bào)錯(cuò)：

在用戶輸入的時(shí)候進(jìn)行實(shí)時(shí)的驗(yàn)證，獲取焦點(diǎn)的時(shí)候顯示提示

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

優(yōu)點(diǎn)：減輕后臺(tái)數(shù)據(jù)傳送壓力

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

2、失去焦點(diǎn)、即時(shí)報(bào)錯(cuò)：

用戶輸入完成后，鼠標(biāo)點(diǎn)擊非輸入框的其他位置進(jìn)行校驗(yàn)，并且如果有錯(cuò)誤進(jìn)行報(bào)錯(cuò)

缺點(diǎn)：如果輸入有誤，用戶需要多一步操作，點(diǎn)擊回有錯(cuò)誤的輸入框進(jìn)行修改，稍微影響用戶體驗(yàn)

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

常用于：輸入驗(yàn)證碼、注冊(cè)等功能

3、操作 保存/提交/下一步 時(shí)逐一報(bào)錯(cuò)：

在用戶全部輸入完成以后，點(diǎn)擊下一步操作的時(shí)候進(jìn)行表單的校驗(yàn)，如果用戶輸入有誤，從上到下依次進(jìn)行報(bào)錯(cuò)

缺點(diǎn)：如果有很多輸入錯(cuò)誤，需要多次操作下一步的操作才會(huì)提示完，對(duì)用戶體驗(yàn)有很大的影響

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

4、操作 保存/提交/下一步 時(shí)全部報(bào)錯(cuò)：

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

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

缺點(diǎn)：用戶不能及時(shí)看到反饋，及時(shí)進(jìn)行修改，如果表單過(guò)長(zhǎng)的話，會(huì)有一種‘為什么這么多錯(cuò)誤’的感覺(jué)，在一定程度上影響用戶體驗(yàn)

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

常用于：登錄賬號(hào)

你學(xué)會(huì)了嗎?

猜你喜歡：

如何撰寫(xiě)產(chǎn)品需求文檔(PRD)？產(chǎn)品經(jīng)理須知！

怎么做pc端原型？產(chǎn)品經(jīng)理們你們真得會(huì)嗎？

什么是AI產(chǎn)品經(jīng)理？

中臺(tái)產(chǎn)品應(yīng)用有哪些分類？

前臺(tái)和后臺(tái)你知道，那么中臺(tái)是什么？

傳智教育產(chǎn)品經(jīng)理培訓(xùn)課程