有哪些常见的验证表单方式，他们各自的优缺点是什么？

  大家好，我是IT修真院武汉分院web第17期的学员吴三水，一枚正直纯洁善良的web程序员。
今天给大家分享一下，修真院官网js（职业）任务十，深度思考中的知识点——有哪些常见的验证表单方式，他们各自的优缺点是什么？

1.背景介绍

表单验证是javascript中的高级选项之一。

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

2.知识剖析

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

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

1. “该字段是必填的”（该字段不能留空）
2. “请输入你的电话号码，它的格式是：xxx-xxxx”（它要求你输入的数据格式为三个数字接一个横杠，然后再接着是四个数字）
3. “请输入一个合法的邮箱地址”（如果你输入的数据不具有“somebody@example.com“的邮箱格式）
4. “你的密码长度应该是8至30位的，并且至少应该包含一个大写字母、一个符号以及一个数字”

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

3.常见问题

常见的表单验证方式

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

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

3.提交表单时验证

4.解决方案

5.代码实战

1.输入时进行实时验证

<form name="a">
      <input type="text" name="b" placeholder="不超过5个字符" onkeydown="keydown()">
</form>

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

<form name="c">
     <input type="text" name="d" placeholder="不超过5个字符" onblur="onBlur()">
 </form>

3.是否填写以及长度限制

<form name="e" onsubmit="return test()">
    <input type="text" name="f" placeholder="不超过5个字符">
  <br>
    <input type="submit" name="Submit" value="提交">
  <br>
</form>

6.拓展思考

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

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

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

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

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

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

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

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

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

3.提交时验证

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

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

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

7.参考文献

有哪些常见的验证表单方式,他们各自的优缺点是什么？
表单数据校验

8.更多讨论

鸣谢