1.背景介绍

  表单验证是javascript中的高级选项之一。
  表单数据一般都通过浏览器端的Javascript 验证。浏览器端的验证速度快，若有不符合要求的输入，响应信息快速的返回给用户。由于验证数据不需要提交给服务器，不会加重服务器的负载。

2.知识剖析

什么是表单验证？表单验证的作用

  访问任何一个带注册表单的网站，你都会发现，当你提交没有输入任何信息的表单时，注册页面都会给你提交一个反馈，它告诉你提交了错误的数据，这些信息可能看起来像下面这样的：

“该字段是必填的”（该字段不能留空）

“请输入你的电话号码，它的格式是：xxx-xxxx”（它要求你输入的数据格式为三个数字接一个横杠，然后再接着是四个数字）

“请输入一个合法的邮箱地址”（如果你输入的数据不具有“somebody@example.com“的邮箱格式）

“你的密码长度应该是8至30位的，并且至少应该包含一个大写字母、一个符号以及一个数字”

  这就是表单验证 —— 当你向 Web 应用提交数据时，应用会校验你输入的数据是否是正确的。如果验证通过，则这些数据可能会被保存至数据库中（通常都是这样的）或者执行下一步操作，如果校验未通过，则 Web 应用会提示你有错误的数据，并且一般都会明确的告诉你错误发生在哪里。表单验证可以通过许多不同的方式实现。

3.常见问题

常见的表单验证方式

1.输入时进行实时验证(.keydown)

2.离开(失去)焦点时验证(.onblur)

3.提交表单时验证

4.解决方案

5.代码实战

1.输入时进行实时验证

2.离开（失去)焦点时验证

是否填写以及长度限制

6.拓展思考

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

1.输入时进行实时验证(.keydown)

优点: 只要有输入就会开始进行验证，随着输入的实时给予用户验证反馈，反应速度快。

​缺点：影响一些性能，比如正在输入验证码或者检测是否重名等，频繁出现的验证错误影响用户体验。

适用于检测数据类型，比如注册页面的密码项

2.失去焦点验证（.onBlur)

优点: 用户体验好比第一种要好一点

​缺点：必须输入框失去焦点(即鼠标点击别处，或tab键）后才能知道结果

常见于输入验证码，注册等功能

3.提交时验证

优点: 性能上更好，可以降低服务器压力

缺点：如果输入项过多的话，用户体验会很差

适合登陆账号时检测输入内容是否合法