原生表单验证专题测试

以下关于 HTML5 中 min 和 max 属性的说法，正确的是？

对于以下代码，用户输入 "test@" 后提交表单，会发生什么？

<form>
  <input type="email" pattern="^[a-z]+@[a-z]+\.[a-z]+$">
  <button type="submit">提交</button>
</form>

以下关于 HTML5 required 属性的说法，错误的是？

以下哪个 HTML5 input type 会自动验证输入内容是否为有效的 URL 格式？

关于 HTML5 的 minlength 和 maxlength 属性，以下说法正确的是？

以下代码的执行结果是什么？

<input type="text" id="username" required>
<script>
const input = document.getElementById('username');

input.setCustomValidity('用户名已存在');
input.value = '';  // 清空值

console.log(input.validity.valueMissing, input.validity.customError, input.validity.valid);
</script>

以下 CSS 选择器中，哪个可以实现在用户开始输入后才显示验证失败样式？

<input type="number" min="10" max="50" step="5"> 允许用户输入的合法值包括 10、15、20、25 等直到 50。

可以通过 input.validity.valid = true 强制将输入框设为验证通过状态。

validity.badInput 属性在用户在 number 类型输入框中输入非数字字符时返回 true。

调用 input.checkValidity() 方法时，如果验证失败，会触发该输入框的 invalid 事件。

在 invalid 事件处理函数中调用 e.preventDefault() 可以阻止浏览器显示默认的验证错误提示气泡。

对于一组具有相同 name 属性的单选按钮，只需要在其中一个按钮上设置 required 属性，整组就会被标记为必选。

<input type="email"> 会严格验证邮箱格式，只接受符合 RFC 5322 标准的邮箱地址。

关于 HTML5 的 pattern 属性，以下说法正确的有？

HTML5 的 validity 对象包含以下哪些属性？

关于 setCustomValidity() 方法，以下说法正确的有？

关于 HTML5 的 novalidate 属性，以下说法正确的有？

完成以下代码，检查输入框是否通过所有验证：

<input type="number" id="age" min="0" max="150" required>
<script>
const input = document.getElementById('age');
input.value = 200;

// 检查是否通过所有验证
if (input.validity.!!1_valid!!) {
  console.log('验证通过');
} else if (input.validity.!!2_rangeOverflow!!) {
  console.log('值超过最大限制');
}
</script>

完成以下代码，实现提交前静默验证，验证失败时再显示错误：

<form id="myForm">
  <input type="email" required>
  <button type="submit">提交</button>
</form>
<script>
const form = document.getElementById('myForm');

form.addEventListener('submit', (e) => {
  // 先静默检查验证状态
  if (!form.!!1_checkValidity!!()) {
    e.preventDefault();
    // 显示错误提示给用户
    form.!!2_reportValidity!!();
  }
});
</script>