HTML setCustomValidity自定义错误

setCustomValidity方法允许为表单元素设置自定义验证错误信息，实现原生API无法覆盖的业务验证需求。

基本语法

// 设置错误信息
input.setCustomValidity('错误提示文字');

// 清除错误信息（传空字符串）
input.setCustomValidity('');

工作原理

1. 调用setCustomValidity传入非空字符串时，validity.customError变为true
2. validity.valid变为false，表单无法提交
3. 传入空字符串时，清除自定义错误状态
4. 浏览器会在提交时显示自定义的错误提示

代码示例

密码确认验证

<form id="registerForm">
  <label>密码：</label>
  <input type="password" id="password" required>
  <br><br>

  <label>确认密码：</label>
  <input type="password" id="confirmPassword" required>
  <br><br>

  <button type="submit">注册</button>
</form>

<script>
  const form = document.getElementById('registerForm');
  const password = document.getElementById('password');
  const confirm = document.getElementById('confirmPassword');

  function validatePassword() {
    if (confirm.value !== password.value) {
      confirm.setCustomValidity('两次密码输入不一致');
    } else {
      confirm.setCustomValidity('');
    }
  }

  confirm.addEventListener('input', validatePassword);
  password.addEventListener('input', validatePassword);

  form.addEventListener('submit', (e) => {
    if (confirm.value !== password.value) {
      e.preventDefault();
    }
  });
</script>

异步验证用户名是否存在

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

  <button type="submit">注册</button>
</form>

<script>
  const usernameInput = document.getElementById('username');
  const usernameMsg = document.getElementById('usernameMsg');

  // 模拟已存在的用户名
  const existingUsers = ['admin', 'user', 'test'];

  usernameInput.addEventListener('blur', () => {
    const value = usernameInput.value.trim();

    if (existingUsers.includes(value)) {
      usernameInput.setCustomValidity('该用户名已被使用');
      usernameMsg.textContent = '用户名已存在';
      usernameMsg.style.color = 'red';
    } else {
      usernameInput.setCustomValidity('');
      usernameMsg.textContent = '用户名可用';
      usernameMsg.style.color = 'green';
    }
  });

  // 输入时清除错误
  usernameInput.addEventListener('input', () => {
    usernameInput.setCustomValidity('');
    usernameMsg.textContent = '';
  });
</script>

复杂业务规则验证

<form id="orderForm">
  <label>开始日期：</label>
  <input type="date" id="startDate" required>
  <br><br>

  <label>结束日期：</label>
  <input type="date" id="endDate" required>
  <br><br>

  <button type="submit">提交订单</button>
</form>

<script>
  const startDate = document.getElementById('startDate');
  const endDate = document.getElementById('endDate');

  function validateDateRange() {
    // 清除之前的错误
    endDate.setCustomValidity('');

    if (startDate.value && endDate.value) {
      const start = new Date(startDate.value);
      const end = new Date(endDate.value);
      const diffDays = (end - start) / (1000 * 60 * 60 * 24);

      if (end < start) {
        endDate.setCustomValidity('结束日期不能早于开始日期');
      } else if (diffDays > 30) {
        endDate.setCustomValidity('预订天数不能超过30天');
      } else if (diffDays < 1) {
        endDate.setCustomValidity('至少预订1天');
      }
    }
  }

  startDate.addEventListener('change', validateDateRange);
  endDate.addEventListener('change', validateDateRange);
</script>

检测customError状态

<form>
  <input type="text" id="myInput" required>
  <span id="errorMsg"></span>
  <button type="submit">提交</button>
</form>

<script>
  const input = document.getElementById('myInput');

  // 设置自定义错误
  input.setCustomValidity('这是自定义错误');

  console.log(input.validity.customError); // true
  console.log(input.validity.valid); // false

  // 检测是否有自定义错误
  if (input.validity.customError) {
    document.getElementById('errorMsg').textContent =
      input.validationMessage; // 获取错误信息
  }

  // 清除错误
  input.setCustomValidity('');
  console.log(input.validity.customError); // false
</script>

注意：setCustomValidity设置的错误会阻止表单提交，必须在条件满足时调用setCustomValidity('')清除错误状态。每次调用会覆盖之前的错误信息。

要点总结

1. 传入非空字符串设置错误，传入空字符串清除错误
2. 设置错误后validity.customError为true，valid为false
3. 错误信息通过validationMessage属性获取
4. 必须在条件满足时主动清除错误状态
5. 适用于原生API无法实现的业务逻辑验证场景