JavaScript 表单验证

JavaScript 表单验证

什么是表单数据校验？

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

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

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

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

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

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

不同类型的表单数据校验

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

• 客户端校验发生在浏览器端，表单数据被提交到服务器之前，这种方式相较于服务器端校验来说，用户体验更好，它能实时的反馈用户的输入校验结果，这种类型的校验可以进一步细分成下面这些方式：
  • JavaScript 校验，这是可以完全自定义的实现方式；
  • HTML5 内置校验，这不需要 JavaScript，而且性能更好，但是不能像 JavaScript 那样可自定义。
• 服务器端校验则是发生在浏览器提交数据并被服务器端程序接收之后 —— 通常服务器端校验都是发生在将数据写入数据库之前，如果数据没通过校验，则会直接从服务器端返回错误消息，并且告诉浏览器端发生错误的具体位置和原因，服务器端校验不像客户端校验那样有好的用户体验，因为它直到整个表单都提交后才能返回错误信息。但是服务器端校验是你的应用对抗错误/恶意数据的最后防线，在这之后，数据将被持久化至数据库。当今所有的服务端框架都提供了数据校验与清洁功能（让数据更安全）。

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

必填（或必选）项目

下面的函数用来检查用户是否已填写表单中的必填（或必选）项目。假如必填或必选项为空，那么警告框会弹出，并且函数的返回值为 false，否则函数的返回值则为 true（意味着数据没有问题）：

function validateForm()
{
  var x=document.forms["myForm"]["fname"].value;
  if (x==null || x=="")
  {
    alert("姓必须填写");
    return false;
  }
}

以上函数在 form 表单提交时被调用:

<form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post">
姓: <input type="text" name="fname">
<input type="submit" value="提交">
</form>

E-mail 验证

下面的函数检查输入的数据是否符合电子邮件地址的基本语法。

意思就是说，输入的数据必须包含 @ 符号和点号(.)。同时，@ 不可以是邮件地址的首字符，并且 @ 之后需有至少一个点号：

function validateForm(){
  var x=document.forms["myForm"]["email"].value;
  var atpos=x.indexOf("@");
  var dotpos=x.lastIndexOf(".");
  if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
    alert("不是一个有效的 e-mail 地址");
    return false;
  }
}

required 属性

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

添加一个 required 属性到你的 input 元素，如下所示：

<form>
  <label for="choose">Would you prefer a banana or cherry?</label>
  <input id="choose" name="i_like" required>
  <button>Submit</button>
</form>

同时注意在示例文件中包含的 CSS :

input:invalid {
  border: 2px dashed red;
}

input:valid {
  border: 2px solid black;
}

以上样式效果为：在校验失败时 输入框会有一个亮红色的虚线边框，在校验通过时会有一个更微妙的黑色边框。

使用正则表达式校验

另一个常用的校验功能是 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或c.
• [^abc] — 匹配一个字符，但它不可以是 a、b 或 c.
• [a-z] — 匹配字符范围 a-z且全部小写 (你可以使用 [A-Za-z] 涵盖大小写，或 [A-Z] 来限制必须大写).
• a.c——匹配字符 a，中间匹配任意一个字符，最后匹配字符 c。
• a{5} — 匹配字符 a 五次。
• a{5,7} — 匹配字符 a 五到七次，不能多或者少。

你也可以在这些表达式中使用数字和其他字符，例如：

• [ -] — 匹配一个空格或者虚线。
• [0-9] — 匹配数字范围 0~9.

限制输入的长度

所有文本框 ( 或 ) 都可以使用minlength 和 maxlength 属性来限制长度。如果输入的字段长度小于 minlength 的值或大于 maxlength 值则无效。浏览器通常不会让用户在文本字段中键入比预期更长的值，不过更精细的设置总归是更好的。

在数字条目中 (i.e. ), 该 min 和 max 属性同样提供校验约束。如果字段的值小于min 属性的值或大于 max 属性的值，该字段则无效。

让我来看看另外一个例子。创建一个 fruit-start.html 文件副本。

现在删除 元素中的内容，替换成下面的代码：

<form>
  <div>
    <label for="choose">Would you prefer a banana or a cherry?</label>
    <input id="choose" name="i_like" required minlength="6" maxlength="6">
  </div>
  <div>
    <label for="number">How many would you like?</label>
    <input type="number" id="number" name="amount" value="1" min="1" max="10">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

• 这里我们看到 text 条目的属性minlength 和 maxlength 都为 6 — 这 banana 和 cherry 的长度都为 6. 输入少于这个长度的字符显示无效，大多浏览器不能输入超过该限制的长度的字符。
• 我们同时也能让 number 条目数值限制在 min 为 1 和 一个 max 为 10 中 — 输入超出范围则显示无效，并且您将无法使用递增/递减箭头将该值改变到此范围之外。