DOM 表单验证

表单是和用户交互的一个重要元素，本文整理了表单验证相关的一些方法。

表单是和用户交互的一个重要元素，本文整理了表单验证相关的一些方法。

表单验证

使用 JavaScript 可以 验证 HTML 表单的内容。如果验证不通过则阻止表达提交，防止错误的数据提交到服务器，从而减轻服务器的压力。

!! 注意：JavaScript 验证表单只是一种前端的验证方法，不能代替服务器端对数据的验证。

如果表单域 (fname) 为空，此函数会发出一条警告消息，并返回 false，以防止表单被提交：

以下是一个验证函数，验证 fname 字是否为空，如果为空，给出要给提示，并返回 false 来组织表单提交。

function validateForm() {
  let x = document.forms["myForm"]["fname"].value;
  if (x == "") {
    alert("必须输入名称");
    return false;
  }
}

将验证函数绑定到表单的提交事件上：

<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  名称: <input type="text" name="fname" />
  <input type="submit" value="Submit" />
</form>

验证数字输入

以下示例验证输入的数字是否是 1 到 10 之间的数字：

<!DOCTYPE html>
<html>
  <body>
    <h2>JavaScript 验证</h2>

    <p>请输入 1 到 10 之间的数字:</p>

    <input id="numb" />

    <button type="button" onclick="myFunction()">提交</button>

    <p id="demo"></p>

    <script>
      function myFunction() {
        // 获取 id="numb" 的输入框中输入的值
        let x = document.getElementById("numb").value;
        // 如果输入的内容不是 1 到 10 之间的数字，给出错误信息，否则给出正确信息
        let text;
        if (isNaN(x) || x < 1 || x > 10) {
          text = "输入不正确";
        } else {
          text = "输入正确";
        }
        document.getElementById("demo").innerHTML = text;
      }
    </script>
  </body>
</html>

自动 HTML 表单验证

浏览器可以自动验证 HTML 表单的某些属性，比如 required 表示输入是必须的。

如果表单字段(fname)为空， required 属性会阻止提交此表单：

<form action="/action_page.php" method="post">
  <input type="text" name="fname" required />
  <input type="submit" value="Submit" />
</form>

自动 HTML 表单验证在 Internet Explorer 9 或更早版本中不起作用。

数据验证

数据验证是确保用户输入干净、正确和有用的过程。

典型的验证任务可能包括：

  • 用户是否填写了所有必填字段
  • 用户是否输入了有效日期
  • 用户是否在数字字段中输入了文本
  • 用户输入的是否一个有效的邮箱

大多数情况下，数据验证的目的是确保用户输入正确。验证可以通过许多不同的方法定义，并以许多不同的方式部署。

服务器端验证由 Web 服务器在输入发送到服务器后执行。

在将输入发送到 Web 服务器之前，客户端验证由 Web 浏览器执行。

HTML 约束验证

HTML5 引入了一个新的 HTML 验证概念，称为约束验证。

HTML 约束验证基于：

  • 约束验证 HTML 输入属性
  • 约束验证 CSS 伪选择器
  • 约束验证 DOM 属性和方法

约束输入属性

下表中的元素属性可以提示输入值的要求。

属性 说明
disabled 指示元素是不可用的
max 指示输入框可输入的最大值
min 指示输入框可输入的最小值
pattern 指示输入框输入的内容需要匹配的正则表达式模式
required 指示输入内容必须的
type 指示输入框输入内容的类型

如需查看完整列表，请访问 HTML 表单属性章节。

约束验证 CSS 伪选择器

以下 CSS 伪选择可以根据元素的状态选择元素。

选择器 说明
:disabled 选择不可用的输入元素
:invalid 选择验证不通过的输入元素
:optional 选择那些没有 required 属性的输入元素
:required 选择那些有 required 属性的输入元素
:valid 选择验证通过的输入元素

如需查看完整列表，请访问CSS 伪类章节。

DOM 修改元素 DOM 更改 CSS