HTML DOM Fieldset 对象

简介

<fieldset> HTML 元素表示单独的一组表单元素，它们共享一些共同的特性，例如共同的外观和相同的验证规则。该元素与 <form> 元素搭配使用，使表单更具可读性，并允许结构化表单元素。DOM 中的 Fieldset 对象表示 <fieldset> 元素。

属性

Fieldset 对象包含多个属性，例如 disabled、form、name 和 validationMessage。下面简要介绍他们：

• disabled: 若该属性设置为 true，则禁用字段集合中的所有表单控件。
• form: 对应当前字段集合所属的 <form> 元素。
• name: 字段集合的名称。
• validationMessage: 表单验证失败时，显示的错误信息。

方法

Fieldset 对象包含以下方法：

• checkValidity(): 验证表单控件中的所有表单元素。如果所有表单控件通过了验证则返回 true，否则返回 false。
• reportValidity(): 在表单控件中执行验证并在未通过验证时显示默认错误消息。如果所有表单控件通过了验证则返回 true，否则返回 false。
• setCustomValidity(): 设置表单控件的自定义错误消息。

使用

通过 document.getElementById() 或 document.querySelector() 获取 <fieldset> 元素，即可获取该元素的 DOM 对象。例如：

const myFieldset = document.getElementById('myFieldset');

获取 DOM 对象之后，即可通过该 DOM 对象获取该元素相应的属性和方法，例如：

const myFieldset = document.getElementById('myFieldset');

console.log(myFieldset.disabled); // 返回 false
console.log(myFieldset.name); // 返回 'myFieldset'

const isFormValid = myFieldset.checkValidity();
console.log(isFormValid); // 返回 true 或 false

总结

HTML DOM 的 Fieldset 对象提供了一系列属性和方法，用于操作表单控件的一组元素。它允许我们将一个表单控件的有关元素组织在一起，并且提供了方便的方法来验证表单控件中的元素。使用 Fieldset 对象可以为表单加入更加严格和有序的结构，使表单控件具有更好的可读性和可操作性。