JavaScript Forms API 是一种 Web API，它允许我们与 HTML 表单进行交互和操作。它提供了一套方法和属性，用于执行客户端表单验证。它也有助于确保在提交表单之前的数据完整性。Forms API 也被称为 Form Validation API 或 Constraint Validation API。
在这里，我们将讨论如何使用各种方法和属性来利用 JavaScript 验证表单数据。
约束验证 DOM 方法
在 JavaScript 中，约束验证 DOM 方法通过引用输入字段来验证输入值。它根据你在输入框中使用的 HTML 属性来验证输入值。
在验证输入值后，它返回一个布尔值，代表输入值是否有效。
以下是约束验证方法的列表。
| 方法 |
描述 |
| checkValidity() |
根据输入元素是否包含有效值返回布尔值。 |
| setCustomValidity() |
用于设置自定义消息到 validationMessage 属性。 |
语法
我们可以按照以下语法来使用表单验证方法：
element.checkValidity()
或者
element.setCustomValidity(message);
在上面的语法中，你需要使用选择器访问元素，并将其作为 checkValidity() 或 setCustomValidity() 方法的参考。setCustomValidity() 方法需要一个字符串消息作为参数。
示例：使用 checkValidity() 方法
在下面的代码中，我们创建了一个数字输入，并设置了最小值为 10。
在 validateInput() 函数中，我们通过 ID 访问数字输入，并使用 checkValidity() 来验证数字输入的值。
如果 checkValidity() 方法返回 false，我们打印验证消息。否则，我们打印数值。
<html>
<body>
<input type="number" min="10" id="num" required>
<p id="output"> </p>
<button onclick="validateInput()"> 验证数字 </button>
<script>
const output = document.getElementById("output");
function validateInput() {
let num = document.getElementById("num");
if (num.checkValidity() == false) {
output.innerHTML = "请输入大于 10 的数字";
} else {
output.innerHTML = "你的数字是 " + num.value;
}
}
</script>
</body>
</html>
示例：使用 setCustomValidity() 方法
在下面的代码中，我们定义了一个数字输入，用来获取用户的年龄。
在 validateAge() 函数中，我们通过其 ID 访问年龄输入，并对输入值进行自定义验证。根据验证结果，我们使用 setCustomValidity() 设置自定义验证消息。
最后，我们使用 reportValidity() 方法显示使用 setCustomValidity() 设置的验证消息。
你可以输入小于 18 的年龄，并观察验证消息。
<html>
<body>
<form>
<label> 输入你的年龄: </label>
<input type="number" id="age" required> <br> <br>
<button type="button" onclick="validateAge()"> 验证年龄 </button>
</form>
<div id="message"> </div>
<script>
function validateAge() {
const ageInp = document.getElementById("age");
const output = document.getElementById("message");
const age = parseInt(ageInp.value);
if (isNaN(age)) {
ageInp.setCustomValidity("请输入有效的数字。");
} else if (age < 18) {
ageInp.setCustomValidity("你必须至少满 18 岁。");
} else {
ageInp.setCustomValidity("");
output.innerHTML = "年龄有效！";
}
ageInp.reportValidity();
}
</script>
</body>
</html>
约束验证 DOM 属性
JavaScript 也包含了用于约束验证的 DOM 属性。它用于检查特定输入值的验证。
以下是可用于约束验证的所有 DOM 属性。
| 属性 |
描述 |
| validity |
包含多个属性以对输入元素执行特定验证。 |
| validationMessage |
当输入元素不包含有效数据时包含验证消息。 |
| willValidate |
表示输入数据是否会被验证。 |
validity 属性的属性
在 JavaScript 中，每个元素都有一个 'validity' 属性，其中包含多个属性。你可以使用 'validity' 属性的特定属性来进行验证。
以下是 'validity' 属性的所有属性。
| 属性 |
描述 |
| customError |
当你设置了自定义验证消息时包含一个 true 布尔值。 |
| patternMismatch |
当父元素的值不匹配模式时设置为 true。 |
| rangeOverflow |
根据输入值是否大于 max 属性的值返回布尔值。 |
| rangeUnderflow |
根据输入值是否小于 min 属性的值返回布尔值。 |
| stepMismatch |
根据步长是否在数值输入中不匹配返回布尔值。 |
| tooLong |
如果输入元素的值的长度大于 maxLength 属性的值则返回 true。 |
| typeMismatch |
当输入的类型与 'type' 属性的值不匹配时返回 true。 |
| valueMissing |
根据输入元素是否为空返回布尔值。 |
| valid |
如果输入元素有效则返回 true。 |
语法
用户可以按照以下语法来使用验证属性的属性：
element.validity.property;
你可以使用元素的 validity 属性的不同属性来验证输入元素的值。
示例
在下面的代码中，我们定义了一个数字输入，并为 'max' 属性的值设定了 300。
在 validateNumber() 函数中，我们使用输入元素的 validity 属性的 'rangeOverflow' 属性来检查输入值是否大于 300。
如果 rangeOverflow 属性返回 true，我们打印 'Number is too large'。否则，我们打印数值。
<html>
<body>
<form>
<label> 输入任意数字: </label>
<input type="number" id="num" max="300" required> <br> <br>
<button type="button" onclick="validateNumber()"> 验证数字 </button>
</form>
<div id="output"> </div>
<script>
const output = document.getElementById('output');
function validateNumber() {
const numInput = document.getElementById('num');
if (numInput.validity.rangeOverflow) {
output.innerHTML = "数字太大";
} else {
output.innerHTML = "数字有效";
}
}
</script>
</body>
</html>
示例
在下面的代码中，我们定义了一个文本输入。
在 validateText() 函数中，我们访问字符串输入。之后，我们使用 validity 属性的 'valueMissing' 属性来检查输入值是否为空。
在输出中，你可以保持输入值为空，点击验证文本按钮并观察错误消息。
<html>
<body>
<form>
<label> 输入任何文本: </label>
<input type="text" id="str" required> <br> <br>
<button type="button" onclick="validateText()"> 验证文本 </button>
</form>
<div id="output"> </div>
<script>
const output = document.getElementById('output');
function validateText() {
const strInput = document.getElementById('str');
if (strInput.validity.valueMissing) {
output.innerHTML = "请输入一个值。";
} else {
output.innerHTML = "你输入了 " + strInput.value + ".";
}
}
</script>
</body>
</html>
你也可以使用 'validity' 属性的其他属性来验证表单输入数据。如果数据无效，你可以使用 setCustomValidity() 方法显示自定义错误消息。