html5中validate

<!-- HTML5 表单验证示例 -->

<form>
  <!-- 需要验证的输入框 -->
  <label for="email">电子邮件:</label>
  <input type="email" id="email" name="email" required>
  <span class="error-message"></span><br>

  <label for="password">密码 (至少6个字符):</label>
  <input type="password" id="password" name="password" minlength="6" required>
  <span class="error-message"></span><br>

  <label for="age">年龄 (必须是数字):</label>
  <input type="number" id="age" name="age" min="18" max="100" required>
  <span class="error-message"></span><br>

  <input type="submit" value="提交">
</form>

<script>
  // JavaScript 用于显示内置的验证错误信息
  document.querySelector('form').addEventListener('submit', function(event) {
    var form = event.target;
    var inputs = form.querySelectorAll('input');

    inputs.forEach(function(input) {
      if (!input.checkValidity()) {
        input.nextElementSibling.textContent = input.validationMessage;
        event.preventDefault();
      } else {
        input.nextElementSibling.textContent = '';
      }
    });
  });
</script>

<style>
  .error-message {
    color: red;
    font-size: 0.8em;
  }
</style>

解释说明

1. HTML5 表单元素:

   • <input type="email">: 确保输入的是有效的电子邮件格式。
   • <input type="password">: 密码输入框，使用 minlength 属性确保密码长度不少于6个字符。
   • <input type="number">: 数字输入框，使用 min 和 max 属性确保输入的年龄在18到100之间。

2. 表单验证属性:

   • required: 确保用户必须填写该字段。
   • minlength, min, max: 分别限制输入的最小长度和数值范围。

3. JavaScript 验证:

   • 使用 checkValidity() 方法检查每个输入框是否有效。
   • 如果无效，则通过 validationMessage 获取内置的错误消息，并显示在页面上。
   • 使用 event.preventDefault() 阻止表单提交，直到所有输入都有效。

4. CSS 样式:

   • 设置错误消息的颜色为红色，字体大小较小，以增强用户体验。