表单效验

 

参考：https://developer.mozilla.org/zh-CN/docs/Learn/HTML/Forms/Data_form_validation

表单验证帮助我们确保用户以正确格式填写表单数据，确保提交的数据能使我们的应用程序正常工作。

方式：

1：JavaScript 校验，这是可以完全自定义的实现方式；

2：HTML5 内置的校验，这不需要 JavaScript ，而且性能更好，但是不能自定义校验过程。

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

当一个元素校验通过时：

    该元素将可以通过 CSS 伪类 :valid 进行特殊的样式化；

    如果用户尝试提交表单，如果没有其它的控制来阻止该操作（比如JavaScript即可阻止提交），那么该表单的数据会被提交

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

   该元素将可以通过 CSS 伪类 :invalid 进行列表的样式化；

    如果用户尝试提交表单，浏览器会展示出错误消息，并停止表单的提交。

required 属性:

 required属性 — 使输入成为必需的。 当设置此属性时，如输入为空（输入也将被视为无效），该表单将不会提交（并将显示错误消息）。

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

 

使用正则表达式验证:

验证功能是 pattern 属性。

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

注意: 一些 <input> 元素类型不需要pattern 属性进行验证. 指定特定 email 类型 就会使用匹配电子邮件格式的正则表达式来校验

注意:  <textarea> 元素不支持pattern 属性.

 

强制条目的长度:

   所有文本框 (<input> 或 <textarea>) 可以强制使用minlength 和 maxlength 属性

 

  在数字条目中 (i.e. <input type="number">), 该 min 和 max 属性也能强制验证长度. 

 

自定义错误信息:

自定义这些消息的外观和文本, 你必须使用 JavaScript; 不能使用 HTML 和 CSS 来改变.

 

 

使用 JavaScript校验表单:

如果你想控制原生错误信息的外观和感觉，或者你想处理不支持HTML内置表单验证的浏览器，则必须使用 Javascript。

现在越来越多的浏览器支持约束验证API，并且它正在变得可靠。这些 API 由一组方法和属性组成，可在每个表单元素上调用。

用于校验的 API 及属性:

 

校验约束 API 的方法:

 

例子：

表单使用 novalidate 属性关闭浏览器的自动验证；这允许我们使用脚本控制表单验证。但是，这并不禁止支持约束验证 API 的应用和以下 CSS 伪类：:valid、:invalid、:in-range 、:out-of-range 。

<form novalidate>
  <p>
    <label for="mail">
      <span>Please enter an email address:</span>
      <input type="email" id="mail" name="mail">
      <span class="error" aria-live="polite"></span>
    </label>
  </p>
  <button>Submit</button>
</form>

aria-live 属性确保我们的自定义错误信息将呈现给所有人，包括使用屏幕阅读器等辅助技术的人。