HTML中的表单验证：必填字段和格式验证

翻滚的胖子
2023-06-06 13:55:27
前端技术
HTML CSS JavaScript

HTML表单是网站开发中常用的交互组件，用户可以通过表单提交数据，完成信息的收集和处理。然而，在提交数据之前，我们需要对表单中的数据进行验证，以确保数据的合法性。本文将介绍HTML表单中的必填字段和格式验证，并通过JavaScript函数的实现方式，帮助小白们更好地掌握表单验证的基本方法。

必填字段验证

必填字段验证是指对表单中的必填项进行验证，确保用户填写了必填项。以下是实现必填字段验证的代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>必填字段验证</title>
</head>
<body>
  <form>
    <div>
      <label for="name">姓名</label>
      <input type="text" id="name" name="name" required>
    </div>
    <div>
      <label for="email">邮箱</label>
      <input type="email" id="email" name="email" required>
    </div>
    <div>
      <label for="tel">电话</label>
      <input type="tel" id="tel" name="tel" required>
    </div>
    <div>
      <input type="submit" value="提交">
    </div>
  </form>
  <script>
    function validate() {
      var name = document.getElementById('name').value;
      var email = document.getElementById('email').value;
      var tel = document.getElementById('tel').value;
      if (name === '' || email === '' || tel === '') {
        alert('请填写必填字段！');
        return false;
      }
    }
    var form = document.querySelector('form');
    form.addEventListener('submit', validate);
  </script>
</body>
</html>

以上代码中，我们使用了HTML5中的required属性对必填项进行了标记，并通过JavaScript函数validate()对表单进行验证。如果必填项为空，则弹出提示框，并返回false，禁止表单提交。

格式验证

格式验证是指对表单中的数据进行格式验证，例如电子邮件、电话号码等。以下是实现电子邮件格式验证的代码示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>格式验证</title>
</head>
<body>
  <form>
    <div>
      <label for="email">邮箱</label>
      <input type="email" id="email" name="email">
    </div>
    <div>
      <input type="submit" value="提交">
    </div>
  </form>
  <script>
    function validateEmail() {
      var email = document.getElementById('email').value;
      var reg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/;
      if (!reg.test(email)) {
        alert('请输入正确的电子邮件地址！');
        return false;
      }
    }
    var form = document.querySelector('form');
    form.addEventListener('submit', validateEmail);
  </script>
</body>
</html>

以上代码中，我们使用了正则表达式对电子邮件的格式进行验证。如果电子邮件格式不正确，则弹出提示框，并返回false，禁止表单提交。