表单中的checkValidity方法有什么用？如何手动触发表单验证？

checkValidity()

input

select

textarea

required

minlength

max

type

true

false

reportValidity()

reportValidity()

checkValidity()

<form id="myForm">
  <label for="username">用户名:</label>
  <input type="text" id="username" required minlength="3">

  <label for="email">邮箱:</label>
  <input type="email" id="email" required>

  <button type="button" id="submitBtn">提交</button>
</form>

const myForm = document.getElementById('myForm');
const submitBtn = document.getElementById('submitBtn');

submitBtn.addEventListener('click', () => {
  // 调用 reportValidity() 会检查整个表单并显示错误提示
  if (myForm.reportValidity()) {
    console.log('表单验证通过，可以提交了！');
    // 这里可以执行表单提交的逻辑，比如 AJAX 请求
  } else {
    console.log('表单验证失败，请检查输入。');
  }
});

const usernameInput = document.getElementById('username');
// ... 假设在某个事件中触发
if (!usernameInput.reportValidity()) {
  console.log('用户名输入不合法！');
}

reportValidity()

checkValidity()

checkValidity()

checkValidity()

checkValidity()

setCustomValidity()

reportValidity()

const usernameInput = document.getElementById('username');

usernameInput.addEventListener('input', () => {
  // 每次输入时都清除之前的自定义错误，让浏览器重新评估
  usernameInput.setCustomValidity('');
  if (usernameInput.value.length < 3 && usernameInput.value.length > 0) {
    usernameInput.setCustomValidity('用户名至少需要3个字符哦！');
  } else if (usernameInput.value.includes('admin')) {
    usernameInput.setCustomValidity('用户名不能包含"admin"字样。');
  }
  // 注意：这里不会立即显示错误，需要用户提交或调用 reportValidity()
});

// 当表单提交时，会显示自定义的错误提示
document.getElementById('myForm').addEventListener('submit', (event) => {
  if (!myForm.checkValidity()) {
    // 阻止默认提交，并手动触发显示错误
    event.preventDefault();
    myForm.reportValidity();
  }
});

setCustomValidity()

invalid

event.preventDefault()

const emailInput = document.getElementById('email');
const emailErrorSpan = document.createElement('span');
emailErrorSpan.style.color = 'red';
emailInput.parentNode.appendChild(emailErrorSpan); // 将错误信息容器添加到输入框旁边

emailInput.addEventListener('invalid', (event) => {
  event.preventDefault(); // 阻止浏览器默认的错误提示

  if (emailInput.validity.valueMissing) {
    emailErrorSpan.textContent = '邮箱是必填的哦！';
  } else if (emailInput.validity.typeMismatch) {
    emailErrorSpan.textContent = '请检查邮箱格式是否正确。';
  }
  // 可以根据 emailInput.validity 对象的其他属性来判断具体错误类型
});

emailInput.addEventListener('input', () => {
  // 当用户输入时，如果输入变得有效，就清除错误提示
  if (emailInput.validity.valid) {
    emailErrorSpan.textContent = '';
  }
});

inputElement.validity

validity.valueMissing

validity.typeMismatch

validity.patternMismatch