在这个教程中，我们将学习如何使用 JavaScript 来进行表单验证。表单验证是确保用户输入数据正确性的重要步骤，它可以帮助我们避免无效或错误的数据提交。

什么是表单验证？

表单验证是指对用户在表单中输入的数据进行检查的过程。这些检查可以包括检查数据的格式、长度、有效性等。JavaScript 提供了多种方法来进行表单验证。

常见验证类型

  1. 必填项验证
  2. 邮箱验证
  3. 电话号码验证
  4. 密码强度验证
  5. 自定义验证

示例

以下是一个简单的表单验证示例：

<form id="myForm">
  <label for="email">邮箱:</label>
  <input type="text" id="email" name="email">
  <button type="submit">提交</button>
</form>

<script>
  document.getElementById('myForm').onsubmit = function(event) {
    event.preventDefault();
    var email = document.getElementById('email').value;
    if(email === '') {
      alert('请填写邮箱');
      return false;
    }
    if(!validateEmail(email)) {
      alert('邮箱格式不正确');
      return false;
    }
    // 如果验证通过，则提交表单
    this.submit();
  };

  function validateEmail(email) {
    var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    return re.test(email);
  }
</script>

更多资源

想要了解更多关于 JavaScript 表单验证的知识，可以访问我们的 JavaScript 基础教程。

图片示例

JavaScript 表单验证示例