JavaScript 表单验证

表单验证是 Web 开发中非常重要的一环，通过验证表单数据的有效性可以提高用户体验和数据的可靠性。在 JavaScript 中，我们可以通过一些内置函数或自定义函数实现表单验证。

内置表单验证方法

required

required 用于验证表单中的必填项，如果该项未填写，则提交表单时会提示用户必填项不能为空。

<input type="text" required>

pattern

pattern 用于验证表单中的数据格式是否正确，可以使用正则表达式进行匹配。

<!-- 验证手机号 -->
<input type="text" pattern="^1[3-9]\d{9}$">

<!-- 验证邮箱 -->
<input type="email" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$">

min, max, minlength, maxlength

这些属性可以用于验证表单中数字、字符串的最小、最大值或最小、最大长度。

<!-- 验证年龄不小于18岁 -->
<input type="number" min="18">

<!-- 验证用户名长度不小于6，不大于16 -->
<input type="text" minlength="6" maxlength="16">

checkValidity

checkValidity() 方法用于检查整个表单的有效性，如果表单中有任何一个验证失败的字段，则该方法返回 false。

const form = document.querySelector('form');
form.addEventListener('submit', function (event) {
  if (!form.checkValidity()) {
    event.preventDefault();
    alert('表单验证失败');
  }
});

自定义表单验证方法

除了内置的表单验证方法，我们也可以自定义验证方法来实现特定需求的验证。比如，我们可以通过自定义验证方法来验证两次输入的密码是否一致。

<!-- 验证两次输入的密码是否一致 -->
<input type="password" id="password">
<input type="password" id="confirm-password" onchange="validatePassword()">
<span id="password-info"></span>

function validatePassword() {
  const password = document.getElementById('password').value;
  const confirmPassword = document.getElementById('confirm-password').value;
  const passwordInfo = document.getElementById('password-info');
  
  if (password !== confirmPassword) {
    passwordInfo.textContent = '两次输入的密码不一致';
  } else {
    passwordInfo.textContent = '';
  }
}

总结

表单验证是 Web 开发中重要的一环，我们可以使用 JavaScript 提供的内置表单验证方法和自定义表单验证方法来实现验证需求。在实际应用中，我们需根据不同的业务需求来选择最合适的验证方法。