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

这里是修真院前端小课堂，每篇分享文从

八个方面深度解析前端知识/技能，本篇分享的是：

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

标题
【修真院web小课堂】有哪些常见的验证表单方式（即时输入验证，失去焦点验证等），他们各自的优缺点是什么？

开场语
大家好，我是IT修真院北京分院第33期的学员刘仁瑞，一枚正直纯洁善良的文斌程序员，今天给大家分享一下，修真院官网文web任务，深度思考中的知识点——有哪些常见的验证表单方式（即时输入验证，失去焦点验证等），他们各自的优缺点是什么？

1.背景介绍
JavaScript 可在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。以减轻后台数据传送压力，提高数据传送的质量和效率。

HTML5自带的表单验证属性

js代码

js第三方插件

2.知识剖析

验证时间

输入时进行实时验证(.onchange)京东注册

退出焦点时验证(.onblur)修真院官网

提交表单时进行本地验证亚马逊登录

H5自带的表单验证属性

小例子

JS代码

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

缺点：代码量大，耗时多

优点：相比于第三方库，可以减少加载的js文件大小，样式灵活

如果网站的表但很少，或者格式简单，或者对性能的要求高，可以手工写

利用JS第三方插件

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

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

3.常见问题
1.表单验证常见的验证信息

2.不同的方法分别是什么写法?

4.解决方案
表单验证常见信息

是否为空（必填/选填）

字符长度（用户名，密码，姓名，电话，邮编，身份证）

大小写

标点，符号

是否支持中文

格式（