必填项输入

有时候，我们在 表单中会有一些必填项，也就是说，在提交表单之前，用户必须填写这些字段。为了强制执行这一规则，我们可以在 元素中添加 required 属性。

例如：

html
 代码解读
复制代码
<form action="/example.html" method="POST">
  <label for="allergies">你有任何饮食限制吗？label>
  <br>
  <input id="allergies" name="allergies" type="text" required>
  <br>
  <input type="submit" value="提交">
form>

上面的代码会渲染出一个文本输入框，如果我们在不填写的情况下点击“提交”按钮，就会出现一条提示消息：

弹出提示，要求用户填写该字段

提示的样式因浏览器而异，上图展示的是在 Chrome 浏览器中看到的效果。在后面的练习中，我们也会继续展示 Chrome 中的提示样式。

如果想要自定义提示，推荐使用JavaScript自定义验证

html
 代码解读
复制代码
<input id="allergies" name="allergies" type="text" required>

<script>
  const input = document.getElementById("allergies");

  input.addEventListener("invalid", function () {
    if (input.value === "") {
      input.setCustomValidity("这个字段不能为空，请填写您的饮食限制。");
    }
  });

  input.addEventListener("input", function () {
    input.setCustomValidity(""); // 重置错误信息
  });
script>

invalid 是一个 HTML 表单验证事件，它在表单元素的值不符合验证规则时触发。通常，这个事件会在用户尝试提交表单时触发，或者在元素的内容改变时，如果该元素不满足 required、pattern、min、max 等验证规则。

设置最大值和最小值

我们还可以使用内置验证来为数字字段（例如 和 ）设置最小值或最大值。要设置可接受的最小值，我们使用 min 属性并为其指定一个值。反之，要设置可接受的最大值，我们为 max 属性指定一个值。让我们来看一下代码示例：

html
 代码解读
复制代码
<form action="/example.html" method="POST">
  <label for="guests">Enter # of guests:label>
  <input id="guests" name="guests" type="number" min="1" max="4">
  <input type="submit" value="Submit">
form>

如果用户尝试提交一个小于1的输入，系统会显示如下提示：
提示：用户需要输入一个大于或等于1的值

如果用户尝试输入一个大于4的数字，同样会显示类似的消息。接下来我们来看看这个操作。

检查文本长度

在上一节中，我们使用 min 和 max 为数字字段设置了可接受的最小值和最大值。但如果是文本字段呢？在某些情况下，我们并不希望用户输入超过某个字符数的内容（比如 Twitter 消息的字符上限）。有时我们甚至还希望设置最少字符数。好在 HTML5 提供了内建的验证功能来处理这种情况。

要为文本字段设置最小字符数，我们可以添加 minlength 属性，并设置一个值来定义最小长度。同样，要设置最大字符数，我们使用 maxlength 属性，并设定最大值。来看一个示例代码：

html
 代码解读
复制代码
<form action="/example.html" method="POST">
  <label for="summary">Summarize your feelings in less than 250 characterslabel>
  <input id="summary" name="summary" type="text" minlength="5" maxlength="250" required>
  <input type="submit" value="Submit">
form>

如果用户尝试提交少于最小字符数的输入，系统会提示如下信息：

提示：用户需要输入更长的文本内容

而如果用户尝试输入超过最大字符数的内容，不会弹出提示框，但多出的字符将无法输入！

匹配特定格式

除了检查文本的长度外，我们还可以添加验证规则来检查用户输入的格式。当我们希望用户输入遵循特定规则时，可以使用 pattern 属性，并赋值一个正则表达式（regex）。

正则表达式是一串字符序列，组成了一个搜索模式。如果用户输入的内容符合这个正则表达式，表单才能被提交。

举个例子，如果我们想要检查一个有效的信用卡号（14 到 16 位数字），可以使用这个正则表达式：[0-9]{14,16}，它会检查用户是否只输入了数字，且输入的长度在 14 到 16 位之间。

将这个正则表达式添加到表单中：

html
 代码解读
复制代码
<form action="/example.html" method="POST">
  <label for="payment">Credit Card Number (no spaces):label>
  <br>
  <input id="payment" name="payment" type="text" required pattern="[0-9]{14,16}">
  <input type="submit" value="Submit">
form>

设置了 pattern 属性后，如果用户输入的内容不符合规则，就无法提交表单。当他们尝试提交时，会看到类似下面的验证提示：

提示信息：请按照要求的格式输入

If you want to find out more about Regex, read more at the 

Preview: Docs Loading link description

Docs RegEx

总结

我们来快速回顾一下：

• 客户端验证 发生在浏览器中，在信息发送到服务器之前进行。
• 在输入相关元素上添加 required 属性，可以验证该字段是否填写了信息。
• 给数值输入元素的 min 属性赋值，可以验证用户输入的最小允许值。
• 给数值输入元素的 max 属性赋值，可以验证用户输入的最大允许值。
• 给文本输入元素的 minlength 属性赋值，可以验证最小字符数要求。
• 给文本输入元素的 maxlength 属性赋值，可以验证最大字符数限制。
• 给 pattern 属性设置一个正则表达式，可以验证用户输入是否符合指定格式。
• 如果 中的验证未通过，用户会收到提示信息解释原因，并且表单将无法提交。

这些快速的验证检查可以确保输入数据的正确性和安全性，同时为用户提供即时的反馈，让他们知道需要修改什么内容，而不用等待服务器的响应。