怎么用HTML插入用户输入验证_HTML5表单验证属性

<form>
  <label>用户名（至少3个字符）：
    <input type="text" name="username" minlength="3" required>
  </label><br>

  <label>邮箱：
    <input type="email" name="email" required>
  </label><br>

  <label>年龄（18-100）：
    <input type="number" name="age" min="18" max="100" required>
  </label><br>

  <label>密码（至少6位，含数字和字母）：
    <input type="password" name="password" 
           pattern="(?=.*\d)(?=.*[a-zA-Z]).{6,}" 
           title="至少6位，包含字母和数字" required>
  </label><br>

  <label>网站：
    <input type="url" name="website" placeholder="https://...">
  </label><br>

  <button type="submit">提交</button>
</form>

<script>
document.querySelector('form').addEventListener('submit', function(e) {
  const password = document.querySelector('input[name="password"]');
  if (!password.validity.valid) {
    password.setCustomValidity('密码必须包含字母和数字，至少6位');
  } else {
    password.setCustomValidity('');
  }
});
</script>

input:valid {
  border-color: green;
  outline: 2px solid green;
}
input:invalid {
  border-color: red;
  outline: 2px solid red;
}