全部学科
通用技术
redis git docker nginx mysql zookeeper rabbitmq
JAVA后端
maven spring Mytatis SpringMVC SpringBoot java
Web前端
TypeScript vue CSS HTML javascript pinia vite
NodeJS全栈
nodejs
Python全栈
python
GO后端
golang gorm gin
小程序首页
HTML / 专题
📝 1 篇文章 20 道配套习题

HTML原生表单验证专题

专题说明

本专题系统讲解HTML5原生表单验证机制，包括验证属性（required、pattern、min/max等）、validity状态对象、验证方法（checkValidity、reportValidity）、自定义错误设置、novalidate属性以及CSS验证伪类等内容。

学习目标

  1. 掌握HTML5表单验证属性的正确使用
  2. 理解validity对象的各状态属性及其含义
  3. 掌握checkValidity和reportValidation方法的区别
  4. 掌握setCustomValidity设置自定义错误的方法
  5. 掌握novalidate和formnovalidate属性的使用场景
  6. 掌握CSS验证伪类的样式定制技巧
  7. 能够实现完整的原生表单验证方案

学习内容

  • 验证属性：required、pattern、min/max、minlength/maxlength、step
  • validity对象：valueMissing、typeMismatch、patternMismatch、valid等状态
  • 验证方法：checkValidity()、reportValidity()、invalid事件
  • 自定义错误：setCustomValidity()、validationMessage
  • 禁用验证：novalidate属性、formnovalidate按钮属性
  • CSS伪类：:valid、:invalid、:in-range、:out-of-range、:required

学习建议

  1. 理解原生验证的设计思路，减少不必要的JavaScript代码
  2. 注意pattern属性不自动添加锚点，需手动处理
  3. setCustomValidity设置的错误需手动清除，否则表单无法提交
  4. CSS伪类可配合placeholder-shown实现更好的用户体验
  5. 原生验证与JavaScript验证结合使用，处理复杂场景

📝 发现内容有误？点击此处直接编辑

📝 配套习题（20 题）

1
单选题

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

A

min 和 max 属性只能用于 type="number" 的 input 元素

B

min 和 max 属性可以用于 type="range" 的 input 元素

C

设置 max="100" 后，用户无法输入大于 100 的值

D

min 属性的默认值始终是 0

2
判断题

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

A

对

B

错

3
多选题

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

A

pattern 属性的值是一个正则表达式，不需要添加前后斜杠

B

pattern 属性适用于 text、password、email、tel、url 等文本类型 input

C

pattern 会自动添加 ^ 和 $ 锚点

D

可以使用 title 属性为 pattern 验证失败提供提示信息

4
单选题

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

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

表单正常提交，因为 email 类型会自动补全

B

表单提交失败，显示 pattern 验证错误

C

表单提交失败，显示 email 类型验证错误

D

表单提交失败，可能显示 email 验证错误或 pattern 验证错误，取决于浏览器实现

5
多选题

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

A

valueMissing - 表示必填字段为空

B

typeMismatch - 表示值不符合 email、url 等类型要求

C

patternMismatch - 表示值不匹配 pattern 正则

D

tooLong - 表示值超过了 maxlength

6
填空题

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

HTML
<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>
7
判断题

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

A

对

B

错

8
判断题

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

A

对

B

错

9
多选题

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

A

setCustomValidity('') 可以清除自定义错误消息

B

设置自定义错误后，validity.customError 属性变为 true

C

setCustomValidity 设置的错误会影响 validity.valid 的值

D

同一输入框只能设置一次自定义错误，再次调用会覆盖之前的

10
单选题

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

HTML
<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>
A

true, true, true

B

true, true, false

C

false, true, false

D

false, false, true

11
填空题

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

HTML
<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>
12
判断题

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

A

对

B

错

13
多选题

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

A

novalidate 是表单元素的属性，不是 input 元素的属性

B

设置 novalidate 后，表单提交时不会进行任何原生验证

C

设置 novalidate 后，元素的 validity 对象仍然存在

D

设置 novalidate 后，调用 checkValidity() 仍然会返回实际的验证结果

14
单选题

以下代码中，点击"保存草稿"按钮后会发生什么？

HTML
<form>
  <input type="email" name="email" required>
  <input type="text" name="title" required>
  <button type="submit" name="action" value="submit">提交</button>
  <button type="submit" name="action" value="draft" formnovalidate>保存草稿</button>
</form>
A

表单不会提交，因为 email 字段为空

B

表单提交，action=draft，验证被跳过

C

表单提交，但 email 和 title 仍然需要填写

D

表单不提交，formnovalidate 只对整个表单有效

15
判断题

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

A

对

B

错

16
单选题

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

A

input:invalid

B

input:invalid:focus

C

input:invalid:not(:placeholder-shown)

D

input:required:invalid

17
多选题

以下关于 CSS 表单验证伪类的说法，正确的有？

A

:valid 和 :invalid 不仅可以用于 input，也可以用于 form 元素

B

:in-range 匹配值在 min 和 max 范围内的数字输入框

C

:out-of-range 匹配值超出 min 和 max 范围的输入框

D

当输入框的值超出范围时，同时匹配 :invalid 和 :out-of-range

18
单选题

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

A

maxlength 会阻止用户输入超过指定长度的字符

B

minlength 会阻止用户输入少于指定长度的字符

C

maxlength 设置为 10 时，用户最多可以输入 10 个字符

D

minlength 设置为 5 时，用户无法在输入框中输入少于 5 个字符

19
判断题

如果设置 minlength="10" 和 maxlength="5"，用户将无法输入任何字符。

A

对

B

错

20
多选题

关于 checkValidity() 和 reportValidity() 方法，以下说法正确的有？

A

checkValidity() 返回布尔值表示验证是否通过

B

reportValidity() 会向用户显示验证错误信息

C

checkValidity() 会触发 invalid 事件

D

reportValidity() 不会触发 invalid 事件

← 上一个专题 HTML SEO基础专题
下一个专题 → HTML基础专题

📝 发现内容有误？点击此处直接编辑

想查看更多习题和详细解析？
小程序提供完整的题库和详细解析

长按或扫描二维码，立即体验

扫码体验小程序
马上就来
使用微信扫描二维码
立即体验完整题库