JavaScript - Forms API（表单 API）

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（）方法显示自定义错误消息。

打印本页