这里是修真院前端小课堂，每篇分享文从
【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】
八个方面深度解析前端知识/技能，本篇分享的是：
【有哪些常见的验证表单方式，他们各自的优缺点是什么？】
大家好，我是IT修真院武汉分院web第17期的学员吴三水，一枚正直纯洁善良的web程序员。
今天给大家分享一下，修真院官网js（职业）任务十，深度思考中的知识点——有哪些常见的验证表单方式，他们各自的优缺点是什么？
1.背景介绍
表单验证是javascript中的高级选项之一。
表单数据一般都通过浏览器端的Javascript 验证。浏览器端的验证速度快，若有不符合要求的输入，响应信息快速的返回给用户。由于验证数据不需要提交给服务器，不会加重服务器的负载。
2.知识剖析
什么是表单验证？表单验证的作用
访问任何一个带注册表单的网站，你都会发现，当你提交没有输入任何信息的表单时，注册页面都会给你提交一个反馈，它告诉你提交了错误的数据，这些信息可能看起来像下面这样的：
“该字段是必填的”（该字段不能留空）
“请输入你的电话号码，它的格式是：xxx-xxxx”（它要求你输入的数据格式为三个数字接一个横杠，然后再接着是四个数字）
“请输入一个合法的邮箱地址”（如果你输入的数据不具有“[email protected]“的邮箱格式）
“你的密码长度应该是8至30位的，并且至少应该包含一个大写字母、一个符号以及一个数字”
这就是表单验证 —— 当你向 Web 应用提交数据时，应用会校验你输入的数据是否是正确的。如果验证通过，则这些数据可能会被保存至数据库中（通常都是这样的）或者执行下一步操作，如果校验未通过，则 Web 应用会提示你有错误的数据，并且一般都会明确的告诉你错误发生在哪里。表单验证可以通过许多不同的方式实现。
3.常见问题
常见的表单验证方式
1.输入时进行实时验证(.KEYDOWN)
2.离开(失去)焦点时验证(.ONBLUR)
3.提交表单时验证
4.解决方案
5.代码实战
1.输入时进行实时验证
2.离开（失去)焦点时验证
3.是否填写以及长度限制
提交
6.拓展思考
这些验证的优缺点各是什么？
1.输入时进行实时验证(.keydown)**
优点: 只要有输入就会开始进行验证，随着输入的实时给予用户验证反馈，反应速度快。
缺点：影响一些性能，比如正在输入验证码或者检测是否重名等，频繁出现的验证错误影响用户体验。
适用于检测数据类型，比如注册页面的密码项
2.失去焦点验证（.onBlur)
优点: 用户体验好比第一种要好一点
缺点：必须输入框失去焦点(即鼠标点击别处，或tab键）后才能知道结果
常见于输入验证码，注册等功能
3.提交时验证
优点: 性能上更好，可以降低服务器压力
缺点：如果输入项过多的话，用户体验会很差
适合登陆账号时检测输入内容是否合法
7.参考文献
有哪些常见的验证表单方式,他们各自的优缺点是什么？
表单数据校验
8.更多讨论
常见问题：
1.一些常见的大型网站用的都是什么类型的表单验证？
答：京东是实时验证，腾讯、阿里、百度用的失去焦点验证。
2.为什么会有的Input会无法输入?
答：它使用了disable这个属性，它特性是为满足条件禁用此表单，因此我们可以很灵活的选择禁用input或者满足一些特定条件才可以使用input
3.表单验证有几种写法？
答：我们目前比较流行的表单验证写法有：
1.js原生写法：
利用if/switch/或者正则表达式/+DOM操作来进行表单验证的制作。
优点：相比于第三方库，可以减少加载的js文件大小，样式灵活,适用于表单少/格式简单/对性能需求高的网站。
缺点：代码量大，耗时多。
2.第三方插件
利用js第三方插件来进行网站的表单验证
优点：全站适用，手工代码量少。
缺点：有可能加重服务器负担，样式相对固定
3.HTML5内置的校验
优点：不需要javascript,用自带的html就可以进行验证，而且性能好
缺点：不能自定义验证，也不够灵活。
鸣谢！
更多内容，可以加入IT交流群565734203与大家一起讨论交流
这里是技能树·IT修真院：https://www.jnshu.com，初学者转行到互联网的聚集地