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

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

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

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

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

 

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

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

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

HTML5自带的表单验证属性

js代码

js第三方插件

2.知识剖析
 

验证时间

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

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

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

H5自带的表单验证属性

小例子

JS代码

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

缺点：代码量大，耗时多

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

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

利用JS第三方插件

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

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

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

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

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

是否为空（必填/选填）

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

大小写

标点，符号

是否支持中文

格式（邮箱，手机，银行卡）

两次密码

链接

主要介绍三大类写法，分别是：js原生写法、angular js的表单验证写法、angular插件ng-message写法。

5.编码实战
1.js原生写法

 

2.angularJs ng-show写法

 

3.angularjs ng-message(angular表单验证插件）（推荐）

 

6.扩展思考
其他的插件

BootstrapValidator

教程

7.参考文献
angularJs的表单验证

ng-show指令

AngularJS 输入验证

bootstrap validator插件使用流程

HTML 5 input required 属性

8.更多讨论
Q1：不同验证时间的优缺点是什么？

A1：第一种输入时进行实时验证，获取焦点时显示提示，随着输入的过程，符合要求后给予用户通过验证的反馈，缺点是会影响一些性能，这个缺点也是很小的，一般情况下注册页都是单独出现的，所以只是执行几个keydown这种小函数应该也谈不上影响性能。

第二种失去焦点验证，会导致用户输入完账号后发现上边不符合标准，还要点回去进行修改，也是会影响一些用户体验。

第三种提交时才验证，这种就有些故意为了降低服务器而设置的表单验证了，考虑机器的成分大，对用户体验不够重视，是不被推荐的验证方式。

Q2：为什么要做表单验证？

A2：减少后端的压力，提高页面性能，提高用户体验性，减少不必要的数据交互。

Q3：自己写判断还是用正则好？

A3：如果是常用的，简单一些，非特殊的条件，可以用正则来进行判断，减少代码量，但有些时候用正则无法适用，或者用正则会出现报错，就需要我们自己来写。

9.鸣谢
感谢易文秋师姐，此教程是在他们之前技术分享的基础上完善而成。

10.结束语
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~