老余博客上线了!!!

表单验证的几种方式以及错误提示方式总结

前端 老余 11℃ 0评论

输入表单的时候,会有多种校验形式,具体都有什么呢?它们的优缺点是什么呢?适用于什么场景下呢? 如果不是很明确的话就来看下面的总结吧~ 校验触发条件: 输入的时候进行校验; 输入完成失去焦点的时候进行校验; 输入完成全部表单内容,操作 保存/提交/下一步 的时候进行...

表单验证的几种方式以及错误提示方式总结

输入表单的时候,会有多种校验形式,具体都有什么呢?它们的优缺点是什么呢?适用于什么场景下呢?

如果不是很明确的话就来看下面的总结吧~

校验触发条件:

  • 输入的时候进行校验;

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

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

报错的方式:

  • 即时报错

  • 输入完成后报错

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

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

在用户输入的时候进行实时的验证,获取焦点的时候显示提示,随着输入的过程,符合要求后已与用户通过验证的反馈

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

常用于:登录账号时检测输入内容是否合法

转载请注明:老余博客 » 表单验证的几种方式以及错误提示方式总结

读后有收获可以请作者喝咖啡:

喜欢 (0)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址