【JS-task10】有哪些常见的验证表单方式（即时输入验证，失去焦点验证等），他们各自的优缺点是什么？

小课堂

分享人：杨星

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

一.背景介绍

表单验证是javascript中的高级选项之一。JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证,以减轻后台数据传送压力，提高数据传送的质量和效率。

二.知识剖析

表单验证的作用

用户是否已填写表单中的必填项目？
用户输入的邮件地址是否合法？
用户是否已输入合法的日期？
用户是否在数据域(numeric field) 中输入了文本？

如何使用表单验证

利用手工js代码

if/switch，或者正则表达式，+DOM操作

缺点：代码量大，耗时多
优点：相比于第三方库，可以减少加载的js文件大小，样式灵活
如果网站的表但很少，或者格式简单，或者对性能的要求高，可以手工写

利用js第三方插件

优点：全站适用，手工代码量少

缺点：有可能加重服务器负担，样式相对固定

三.常见问题

表单验证有那几种方式？

四.解决方案

  • 输入时进行实时验证(.keydown)
  • 退出焦点时验证(.onblur)
  • 提交表单时进行本地验证

五.编码实战

见demo

6.拓展思考

这些验证方法的优缺点是什么？

第一种输入时进行实时验证，获取焦点时显示提示，随着输入的过程，符合要求后给予用户通过验证的反馈，缺点是会影响一些性能，这个缺点也是很小的，一般情况下注册页都是单独出现的，所以只是执行几个keydown这种小函数应该也谈不上影响性能。 第二种失去焦点验证，会导致用户输入完账号后发现上边不符合标准，还要点回去进行修改，也是会影响一些用户体验。第三种提交时才验证，这种就有些故意为了降低服务器而设置的表单验证了，考虑机器的成分大，对用户体验不够重视，是不被推荐的验证方式。

7.参考资料

表单展示

亚马逊注册

8.更多讨论

还有那些判断方式

鸣谢： 冯馨雨

感谢大家观看

BY : 杨星