HTML表单验证怎么做

在HTML中，可以使用内置的表单验证功能来验证用户输入的数据。这主要通过为表单元素设置required属性和pattern属性来实现。以下是一些简单的示例：

1. 使用required属性：

<form>
  <label for="username">用户名：</label>
  <input type="text" id="username" name="username" required>
  <br>
  <label for="password">密码：</label>
  <input type="password" id="password" name="password" required>
  <br>
  <input type="submit" value="提交">
</form>

在这个例子中，required属性确保用户在提交表单之前必须填写用户名和密码字段。

2. 使用pattern属性：

<form>
  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" pattern="^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$" required>
  <br>
  <input type="submit" value="提交">
</form>

在这个例子中，pattern属性使用正则表达式来验证用户输入的邮箱地址是否符合标准格式。

3. 使用JavaScript进行自定义验证：

<form>
  <label for="age">年龄：</label>
  <input type="number" id="age" name="age">
  <span id="age-error" style="color: red; display: none;">请输入有效的年龄（18-100）</span>
  <br>
  <input type="submit" value="提交">
</form>

<script>
  document.querySelector('form').addEventListener('submit', function(event) {
    const ageInput = document.getElementById('age');
    const ageError = document.getElementById('age-error');
    const age = parseInt(ageInput.value, 10);

    if (age < 18 || age > 100) {
      event.preventDefault();
      ageError.style.display = 'inline';
    } else {
      ageError.style.display = 'none';
    }
  });
</script>

在这个例子中，我们使用JavaScript为表单添加了一个自定义验证规则，要求用户输入的年龄必须在18到100之间。如果不符合要求，表单将不会提交，并显示错误信息。

这些方法可以帮助你实现基本的表单验证。根据实际需求，你可以组合使用这些方法，并添加更多的验证规则。