HTML5表单验证checkValidity方法详解：手动触发与reportValidity对比实践

来源：站长平台作者：陈平安时间：04-26

导读：本期聚焦于小伙伴创作的《HTML5表单验证checkValidity方法详解：手动触发与reportValidity对比实践》，敬请观看详情，探索知识的价值。以下视频、文章将为您系统阐述其核心内容与价值。如果您觉得《HTML5表单验证checkValidity方法详解：手动触发与reportValidity对比实践》有用，将其分享出去将是对创作者最好的鼓励。

HTML5表单checkValidity方法详解与手动触发验证实践

在HTML5规范中，表单验证能力得到了原生支持，开发者无需依赖第三方库即可实现基础的输入校验逻辑。其中checkValidity方法是表单校验体系中的核心方法之一，本文将详细介绍该方法的作用、使用方式，以及如何手动触发表单验证。

一、checkValidity方法的作用

checkValidity是HTML5为表单元素（包括<form>标签和所有表单输入类元素）提供的原生方法，核心作用是检查当前元素或整个表单是否符合预设的验证规则。

当调用该方法时，浏览器会自动检查元素是否满足以下类型的验证约束：

必填字段约束：设置了required属性的元素是否填写了内容
输入格式约束：type为email、url等类型的元素输入内容是否符合格式要求
长度约束：minlength、maxlength属性限定的输入长度是否合规
数值范围约束：type为number、range的元素输入值是否在min和max限定的范围内
正则约束：pattern属性定义的正则表达式是否匹配输入内容

方法返回值类型为布尔值：如果所有验证规则都通过，返回true；如果存在任意一项验证不通过，返回false。需要注意的是，checkValidity方法仅做校验判断，不会触发浏览器的默认验证提示UI。

二、checkValidity方法的基础使用

该方法既可以作用于单个表单输入元素，也可以作用于整个<form>表单，使用方式如下：

1. 单个表单元素的校验

以下示例定义了一个必填的邮箱输入框，通过按钮点击调用checkValidity方法检查输入是否合规：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>单个元素checkValidity示例</title>
</head>
<body>
  <input type="email" id="emailInput" required placeholder="请输入邮箱">
  <button type="button" id="checkBtn">检查邮箱格式</button>
  <p id="result"></p>

  <script>
    const emailInput = document.getElementById('emailInput');
    const checkBtn = document.getElementById('checkBtn');
    const result = document.getElementById('result');

    checkBtn.addEventListener('click', () => {
      const isValid = emailInput.checkValidity();
      if (isValid) {
        result.textContent = '邮箱格式正确';
      } else {
        result.textContent = '邮箱格式错误，请检查输入';
      }
    });
  </script>
</body>
</html>

2. 整个表单的校验

如果调用<form>元素的checkValidity方法，会遍历表单内所有可校验的元素，只有当所有元素都通过验证时，才返回true，否则返回false：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>表单checkValidity示例</title>
</head>
<body>
  <form id="testForm">
    <input type="text" name="username" required placeholder="用户名（必填）">
    <input type="number" name="age" min="1" max="120" placeholder="年龄（1-120）">
    <button type="button" id="formCheckBtn">校验整个表单</button>
  </form>
  <p id="formResult"></p>

  <script>
    const form = document.getElementById('testForm');
    const formCheckBtn = document.getElementById('formCheckBtn');
    const formResult = document.getElementById('formResult');

    formCheckBtn.addEventListener('click', () => {
      const isFormValid = form.checkValidity();
      if (isFormValid) {
        formResult.textContent = '表单所有字段验证通过';
      } else {
        formResult.textContent = '表单存在未通过验证的字段';
      }
    });
  </script>
</body>
</html>

三、手动触发表单验证的方法

在很多场景下，我们需要主动触发表单验证，并且显示浏览器的默认验证提示（比如点击自定义提交按钮、在非提交场景下提前校验），此时可以结合reportValidity方法或者模拟submit事件实现。

1. 使用reportValidity方法

reportValidity是和checkValidity配套的方法，它首先会执行和checkValidity相同的校验逻辑，如果校验不通过，会自动显示浏览器默认的验证提示UI，返回值同样是布尔值表示校验是否通过。这是手动触发表单验证最推荐的方式。

以下示例通过自定义按钮手动触发表单验证并提示：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>手动触发表单验证示例</title>
</head>
<body>
  <form id="registerForm">
    <div>
      <label>用户名：<input type="text" name="username" required minlength="3" maxlength="10"></label>
    </div>
    <div>
      <label>手机号：<input type="tel" name="phone" pattern="^1[3-9]d{9}$" required></label>
    </div>
    <button type="button" id="manualSubmitBtn">手动提交表单</button>
  </form>

  <script>
    const form = document.getElementById('registerForm');
    const manualSubmitBtn = document.getElementById('manualSubmitBtn');

    manualSubmitBtn.addEventListener('click', () => {
      // 手动触发表单验证并显示提示
      const isValid = form.reportValidity();
      if (isValid) {
        // 验证通过，执行提交逻辑
        console.log('表单验证通过，可以提交数据');
        // 实际场景中可以在这里发送请求到 https://www.ipipp.com/api/submit 接口
      } else {
        console.log('表单验证不通过，请检查输入');
      }
    });
  </script>
</body>
</html>

2. 模拟submit事件触发验证

如果不想使用reportValidity，也可以通过调用表单的requestSubmit方法或者触发submit事件来触发验证，这种方式会走完整的表单提交流程，如果验证不通过会阻止提交并显示提示：

// 方式1：使用requestSubmit方法，支持传入指定提交按钮
const form = document.getElementById('testForm');
const submitBtn = document.getElementById('submitBtn');
form.requestSubmit(submitBtn);

// 方式2：创建submit事件并分发
const submitEvent = new Event('submit', { cancelable: true });
form.dispatchEvent(submitEvent);

需要注意的是，直接调用表单的submit()方法会跳过验证直接提交，因此不建议用这种方式手动触发表单验证。

四、两种方法的对比

以下是checkValidity和reportValidity的核心差异对比：

方法名	校验逻辑	是否显示验证提示	适用场景
checkValidity	执行完整校验规则	否	仅需要判断校验结果，不需要用户提示的场景
reportValidity	执行完整校验规则	是	需要触发验证并给用户反馈的场景

如果表单元素设置了novalidate属性，那么checkValidity和reportValidity方法都会直接返回true，不会执行任何校验逻辑，因此手动验证前需要确认表单没有禁用原生验证。
自定义验证通过setCustomValidity方法设置错误提示后，checkValidity会返回false，调用reportValidity会显示自定义的错误提示，需要清除错误提示时可以调用setCustomValidity('')。
不同浏览器对默认验证提示的样式和显示逻辑可能有差异，如果需要统一提示样式，可以结合checkValidity方法自行实现提示UI，不使用reportValidity的默认提示。

HTML5表单验证 checkValidity reportValidity 表单验证手动触发验证

免责声明：已尽一切努力确保本网站所含信息的准确性。网站部分内容来源于网络或由用户自行发表，内容观点不代表本站立场。本站是个人网站免费分享，内容仅供个人学习、研究或参考使用，如内容中引用了第三方作品，其版权归原作者所有。若内容触犯了您的权益，请联系我们进行处理。