HTML checkValidity和reportValidity

checkValidity和reportValidity是表单元素的验证方法，用于手动触发验证检查，区别在于是否显示错误提示UI。

方法对比

checkValidity方法

检查元素的验证状态，返回布尔值，不显示任何UI提示。

基本语法

const isValid = element.checkValidity();
// 返回true表示验证通过，false表示验证失败

代码示例

<form id="myForm">
  <label>邮箱：</label>
  <input type="email" id="emailInput" required>
  <span id="emailMsg"></span>
  <br><br>

  <button type="button" id="checkBtn">检查验证</button>
  <button type="submit">提交</button>
</form>

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

  checkBtn.addEventListener('click', () => {
    const isValid = emailInput.checkValidity();

    if (isValid) {
      emailMsg.textContent = '验证通过';
      emailMsg.style.color = 'green';
    } else {
      emailMsg.textContent = '验证失败';
      emailMsg.style.color = 'red';
    }
  });
</script>

表单级checkValidity

<form id="userForm">
  <input type="text" id="name" required placeholder="姓名">
  <input type="email" id="email" required placeholder="邮箱">
  <button type="button" id="validateBtn">验证全部</button>
</form>

<script>
  const form = document.getElementById('userForm');
  const validateBtn = document.getElementById('validateBtn');

  validateBtn.addEventListener('click', () => {
    if (form.checkValidity()) {
      console.log('所有字段验证通过');
    } else {
      console.log('存在验证失败的字段');
      // 遍历检查每个字段
      form.querySelectorAll('input').forEach(input => {
        if (!input.checkValidity()) {
          console.log(`${input.placeholder} 验证失败`);
        }
      });
    }
  });
</script>

reportValidity方法

检查验证状态并显示浏览器原生错误提示，聚焦到第一个错误元素。

基本语法

const isValid = element.reportValidity();
// 返回布尔值，同时显示错误提示气泡

代码示例

<form id="loginForm">
  <label>用户名：</label>
  <input type="text" id="username" required>
  <br><br>

  <label>密码：</label>
  <input type="password" id="password" required minlength="6">
  <br><br>

  <button type="button" id="loginBtn">登录</button>
</form>

<script>
  const loginBtn = document.getElementById('loginBtn');
  const form = document.getElementById('loginForm');

  loginBtn.addEventListener('click', () => {
    // 检查所有字段并显示错误提示
    if (form.reportValidity()) {
      console.log('验证通过，执行登录逻辑');
      // 执行登录操作
    }
  });
</script>

自定义提交逻辑

<form id="dataForm">
  <input type="text" id="name" required placeholder="名称">
  <input type="email" id="email" required placeholder="邮箱">
  <button type="button" id="submitBtn">提交</button>
</form>

<script>
  const submitBtn = document.getElementById('submitBtn');
  const form = document.getElementById('dataForm');

  submitBtn.addEventListener('click', () => {
    // reportValidity会显示原生错误提示
    if (form.reportValidity()) {
      // 验证通过，使用Ajax提交
      const formData = new FormData(form);
      fetch('/api/submit', {
        method: 'POST',
        body: formData
      }).then(res => res.json())
        .then(data => console.log('提交成功', data));
    }
  });
</script>

两者结合使用

<form id="registerForm">
  <input type="text" id="user" required placeholder="用户名">
  <input type="password" id="pwd" required minlength="6" placeholder="密码">
  <input type="password" id="pwdConfirm" required placeholder="确认密码">
  <span id="msg"></span>
  <br>
  <button type="button" id="registerBtn">注册</button>
</form>

<script>
  const registerBtn = document.getElementById('registerBtn');
  const pwd = document.getElementById('pwd');
  const pwdConfirm = document.getElementById('pwdConfirm');
  const msg = document.getElementById('msg');

  registerBtn.addEventListener('click', () => {
    const form = document.getElementById('registerForm');

    // 先用checkValidity做自定义检查
    if (pwd.value !== pwdConfirm.value) {
      msg.textContent = '两次密码不一致';
      pwdConfirm.setCustomValidity('密码不一致');
    } else {
      pwdConfirm.setCustomValidity('');
    }

    // 再用reportValidity显示所有错误
    if (form.reportValidity()) {
      console.log('注册成功');
    }
  });
</script>

注意：reportValidity会触发浏览器的原生错误提示气泡，如果需要完全自定义错误样式，应使用checkValidity配合自定义UI。

要点总结

1. checkValidity只检查不显示，返回布尔值
2. reportValidity检查并显示原生错误提示气泡
3. 两个方法都不会阻止后续代码执行
4. 表单和表单元素都可以调用这两个方法
5. 常用于Ajax提交前手动触发验证