Web 表单 API
JavaScript Forms API 是一个 Web API，允许我们与 HTML 表单进行交互和操作。它提供了一组用于执行客户端表单验证的方法和属性。在提交表单之前确保数据完整性也很有帮助。表单 API 也称为表单验证 API 或约束验证 API。
在这里，我们将讨论如何使用各种方法和属性来验证 JavaScript 的表单数据。
约束验证 DOM 方法
在 JavaScript 中，约束验证 DOM 方法通过引用输入字段来验证输入值。它根据您与输入一起使用的 HTML 属性验证输入值。
验证输入值后，它将返回一个布尔值，表示输入值是否有效。
以下是约束验证方法的列表。
| 方法 | 描述 |
|---|---|
| checkValidity() | 根据 input 元素是否包含有效值返回布尔值。 |
| setCustomValidity() | 用于将自定义消息设置为 validationMessage 属性。 |
语法
我们可以按照下面的语法来使用表单验证方法。
element.checkValidity()
OR
element.setCustomValidity(message);
在上面的语法中，你需要使用 selector 访问元素，并将其作为 checkValidity（） 或 setCustomValidity（） 方法的引用。setCustomValidity（） 方法将字符串 message 作为参数。
示例：使用 checkValidity（） 方法
我们在下面的代码中创建了 number input，并将 10 设置为 min 属性。
在 validateInput（） 函数中，我们使用 id 访问数字输入，并使用 checkValidity（） 验证数字输入的值。
如果 checkValidity（） 方法返回 false，则打印验证消息。否则，我们将打印数值。
<html>
<body>
<input type = "number" min = "10" id = "num" required>
<p id = "output"> </p>
<button onclick = "validateInput()"> Validate Number </button>
<script>
const output = document.getElementById("output");
function validateInput() {
let num = document.getElementById("num");
if (num.checkValidity() == false) {
output.innerHTML = "Please enter a number greater than 10";
} else {
output.innerHTML = "Your number is " + num.value;
}
}
</script>
</body>
</html>
示例：使用 setCustomValidity（） 方法
在下面的代码中，我们定义了数字输入，以在输入中获取用户的年龄。
在 validateAge（） 函数中，我们使用 id 访问 age 输入，并对输入值执行自定义验证。根据验证，我们使用 setCustomValidity（） 来设置自定义验证消息。
最后，我们使用 reportValidity（） 方法显示使用 setCustomValidity（） 方法设置的验证消息。
您可以输入 18 岁以下的年龄，并观察验证消息。
<html>
<body>
<form>
<label> Enter your age: </label>
<input type = "number" id = "age" required> <br> <br>
<button type = "button" onclick = "validateAge()"> Validate Age </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("Please enter a valid number.");
} else if (age < 18) {
ageInp.setCustomValidity("You must be at least 18 years old.");
} else {
ageInp.setCustomValidity(""); // To remove custom error message
output.innerHTML = "Age is valid!";
}
ageInp.reportValidity(); // To display custom validation message
}
</script>
</body>
</html>
约束验证 DOM 属性
JavaScript 还包含用于约束验证的 DOM 属性。它用于检查 input 值的特定验证。
在这里，我们列出了所有可用于约束验证的 DOM 属性。
| 属性 | 描述 |
|---|---|
| validity | 包含多个属性，用于对 input 元素执行特定验证。 |
| validationMessage | 当 input 元素不包含有效数据时，它包含验证消息。 |
| willValidate | 表示是否将验证输入数据。 |
'validity' 属性的属性
在 JavaScript 中，每个元素都有 'validity' 属性，其中包含多个属性。您可以使用 'validation' 属性的特定属性来执行验证。
在这里，我们列出了 'validity' 属性的所有属性。
| 属性 | 描述 |
|---|---|
| customError | 当您设置自定义有效性消息时，它包含一个 true 布尔值。 |
| patternMismatch | 当父元素的值与模式不匹配时，它会设置 true。 |
| rangeOverflow | 根据输入值是否大于 max 属性的值返回布尔值。 |
| rangeUnderflow | 根据输入值是否小于 min 属性的值返回布尔值。 |
| stepMismatch | 根据步骤在数字输入中是否不匹配返回布尔值。 |
| tooLong | 如果 input 元素的值的长度大于 maxLength 属性的值，则返回 true。否则，它将返回 false。 |
| typeMismatch | 当输入的值的类型与 'type' 属性的值不匹配时，它将返回 true。 |
| valueMissing | 根据 input 元素是否为空返回布尔值。 |
| valid | 当 input 元素有效时，它返回 true。 |
语法
用户可以按照以下语法来使用 validation 属性的属性。
element.validity.property;
您可以使用元素的 validity 属性的不同属性来验证 input 元素的值。
例在下面的代码中，我们定义了数字输入，并将 'max' 属性的值设置为 300。
在 validateNumber（） 函数中，我们使用 input 元素的 'validity' 属性的 'rangeOverflow' 属性来检查输入值是否大于 300。
如果 rangeOverflow 属性返回 true，则打印 'Number is too large'。否则，我们将打印数值。
<html>
<body>
<form>
<label> Enter Any Number: </label>
<input type = "number" id = "num" max = "300" required> <br> <br>
<button type = "button" onclick = "validateNumber()"> Validate Number </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 = "Number is too large";
} else {
output.innerHTML = "Number is valid";
}
}
</script>
</body>
</html>
例
在下面的代码中，我们定义了文本输入。
在 validateText（） 函数中，我们访问字符串 input。之后，我们使用 validity 属性的 'valueMissing' 属性来检查输入值是否为空。
在输出中，您可以将输入值留空，单击 validate text 按钮并观察错误消息。
<html>
<body>
<form>
<label> Enter any text: </label>
<input type = "text" id = "str" required> <br> <br>
<button type = "button" onclick = "validateText()"> Validate Text </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 = "Please enter a value.";
} else {
output.innerHTML = "You have entered " + strInput.value + ".";
}
}
</script>
</body>
</html>
您还可以使用 'validity' 属性的其他属性来验证表单输入数据。如果数据无效，您可以使用 setCustomValidity（） 方法显示自定义错误消息。
