教育行业A股IPO第一股(股票代码 003032)

全国咨询/投诉热线:400-618-4000

后台产品设计:表单验证的几种方式以及错误提示

更新时间:2021年03月17日13时49分 来源:传智教育 浏览次数:

后台产品的表现形式比较单一,主要只有两种形式:列表和表单。表单在网页中主要负责数据采集功能。用户在使用后台时,需要大量通过表单提交信息,与系统发生交互,向数据库写入数据。那么你知道常见的表单验证方式有哪些,彼此之间有什么差异吗?分别适用于什么情况?今天我们就来详细聊聊。

做好表单,无非需要注意以下两个方面:

校验触发条件:在什么情况下进行校验。

1.输入的时候进行校验;

2.输入完成失去焦点的时候进行校验;

3.输入完成全部表单内容,操作 保存/提交/下一步 的时候进行校验


报错的方式:

1.即时报错

2.输入完成后报错

由于校验触发条件的不同和报错方式的不同,可以组成下面四种方式:


1、输入校验、即时报错:

在用户输入的时候进行实时的验证,获取焦点的时候显示提示

缺点:影响一些性能,但是这个影响比较小;如果输入一个错误率很高的内容,频繁的给用户错误提示会影响用户体验

优点:减轻后台数据传送压力

常用于:检测数据类型,注册页面的密码检验(输入是否符合规则)


2、失去焦点、即时报错:

用户输入完成后,鼠标点击非输入框的其他位置进行校验,并且如果有错误进行报错

缺点:如果输入有误,用户需要多一步操作,点击回有错误的输入框进行修改,稍微影响用户体验

优点:为用户修改错误节省时间、避免出现很多错误需要改正的情况

常用于:输入验证码、注册等功能


3、操作 保存/提交/下一步 时逐一报错:

在用户全部输入完成以后,点击下一步操作的时候进行表单的校验,如果用户输入有误,从上到下依次进行报错

缺点:如果有很多输入错误,需要多次操作下一步的操作才会提示完,对用户体验有很大的影响

优点:减少后端服务器压力,提高页面性能


4、操作 保存/提交/下一步 时全部报错:

在用户全部输入完成以后,点击下一步操作的时候将所有错误提示都展示给用户。

错误的显示形式,为了让用户更直观的找到错误项,一般是在输入/选择框的下方用红色文字提示,如下:

表单提示

缺点:用户不能及时看到反馈,及时进行修改,如果表单过长的话,会有一种‘为什么这么多错误’的感觉,在一定程度上影响用户体验

优点:减少后端服务器压力,提高页面性能

常用于:登录账号

你学会了吗?


猜你喜欢:

如何撰写产品需求文档(PRD)?产品经理须知!

怎么做pc端原型?产品经理们你们真得会吗?

什么是AI产品经理?

中台产品应用有哪些分类?

前台和后台你知道,那么中台是什么?

传智教育产品经理培训课程

0 分享到:
和我们在线交谈!