表单数据校验方法

表单校验帮助我们确保用户以正确格式填写表单数据，确保提交的数据能使我们的应用程序正常工作。本文将告诉你需要了解的有关表单校验的内容。

前提条件	html、css、Javascript
目标	理解表单数据校验

一、什么是表单数据校验

访问任何一个带注册表单的网站，你都会发现，当你提交了没有输入符合预期格式的信息的表单时，注册页面都会给你一个反馈，这些信息可能看起来像下面这样的：

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

这就是表单校验——当你向 Web 应用输入数据时，应用会验证你输入的数据是否是正确的。如果验证通过，应用允许提交这些数据到服务器并储存到数据库中（通常情况下），如果验证未通过，则 Web 应用会提示你有错误的数据，并且一般都会明确的告诉你错误发生在哪里。表单校验可以通过许多不同的方式实现。

（事实上，没有人愿意填写表单——很多证据表明，用户对填写表单这件事情都感到很烦恼，如果他们在填写表单的过程中遇到一些自己无法理解的问题，通常都会导致他们直接离开你的 Web 应用，简而言之，表单是一个很烦人的东西。）

我们希望把填写表单变的越简单越好。那么，为什么我们还坚持进行表单的数据校验呢？这有三个最主要的原因：

• 我们希望以正确的格式获取到正确的数据——如果我们的用户数据以不正确的格式存储，或者他们没有输入正确的信息/完全省略信息，我们的应用程序将无法正常运行。
• 我们希望保护我们的用户——强制用户输入安全的密码，有利于保护他们的账户信息。
• 我们希望保护我们自己——恶意用户有很多通过滥用应用中缺乏保护的表单破坏应用的方法（具体请参见网站安全）。

二、不同类型表单验证

在 Web 中，你可能会遇见各种不同的表单校验：

• 客户端校验发生在浏览器端，表单数据被提交到服务器之前，这种方式相较于服务器端校验来说，用户体验更好，它能实时的反馈用户的输入校验结果，这种类型的校验可以进一步细分成下面这些方式：

  • JavaScript 校验，这是可以完全自定义的实现方式；
  • HTML5 内置校验，这不需要 JavaScript，而且性能更好，但是不能像 JavaScript 那样可自定义。

• 服务器端校验则是发生在浏览器提交数据并被服务器端程序接收之后——通常服务器端校验都是发生在将数据写入数据库之前，如果数据没通过校验，则会直接从服务器端返回错误消息，并且告诉浏览器端发生错误的具体位置和原因，服务器端校验不像客户端校验那样有好的用户体验，因为它直到整个表单都提交后才能返回错误信息。但是服务器端校验是你的应用对抗错误/恶意数据的最后防线，在这之后，数据将被持久化至数据库。当今所有的服务端框架都提供了数据校验与清洁功能（让数据更安全）。

在真实的项目开发过程中，开发者一般都倾向于使用客户端校验与服务器端校验的组合校验方式以更好的保证数据的正确性与安全性。

1、使用内置表单验证

 HTML5一个特别有用的新功能就是，可以在不写一行脚本代码的情况下，即对用户的输入进行数据校验，这都是通过表单元素的校验属性实现的，这些属性可以让你定义一些规则，用于限定用户的输入，比如某个输入框是否必须输入，或者某个输入框的字符串的最小最大长度限制，或者某个输入框必须输入一个数字、邮箱地址等；还有数据必须匹配的模式。如果表单中输入的数据都符合这些限定规则，那么表示这个表单校验通过，否则则认为校验未通过。

当一个元素校验通过时：

• 该元素将可以通过 CSS 伪类 :valid 进行特殊的样式化；
• 如果用户尝试提交表单，如果没有其他的控制来阻止该操作（比如 JavaScript 即可阻止提交），那么该表单的数据会被提交。

如果一个元素未校验通过：

• 该元素将可以通过 CSS 伪类 :invalid 进行特殊的样式化；
• 如果用户尝试提交表单，浏览器会展示出错误消息，并停止表单的提交。

input 元素的校验约束 — starting simple

在这一节，我们将会看到一些用于<input>元素校验的 HTML5 的特性。

让我们用一个简单的例子开始 — 一个可以让你从香蕉或樱桃中选择你最喜欢的水果的 input。这个包含了一个简单的文本<input> 和一个与之匹配的 label，还有一个 submit <button>。你可以在 GitHub fruit-start.html找到源码。

required 属性

最简单的 HTML5 校验功能是 required属性 — 如果要使输入成为必需的，则可以使用此属性标记元素。当设置此属性时，如果输入为空，该表单将不会提交（并将显示错误消息），输入也将被视为无效。

使用正则表达式校验

另一个常用的校验功能是 pattern 属性，以 Regular Expression 作为 value 值。正则表达式 (regex) 是一个可以用来匹配文本字符串中字符的组合的模式，所以它们是理想的表单校验器，也可以支持 JavaScript 中许多其他的用途。

正则表达式相当复杂，我们不打算在本文中详尽地教你。

下面是一些例子，让你对它们的工作原理有个基本的了解：

• a — 匹配一个字符a(不能匹配 b, aa等等.)
• abc — 匹配 a、其次 b、最后 c.
• a* — 匹配 0 个或者多个字符 a (+ 代表至少匹配一个或者多个).
• [^a] — 匹配一个字符，但它不能是a.
• a|b — 匹配一个字符 a 或者 b.
• [abc] — 匹配一个字符，它可以是a、b