Javascript 简明教程

JavaScript - Forms API

Web Forms API

JavaScript Forms API 是一种 Web API，允许我们与 HTML 表单进行交互并操控它们。它提供了一组用于执行客户端表单验证的方法和属性。它还有助于在提交表单之前确保数据的完整性。Forms API 也被称为表单验证 API 或约束验证 API。

在这里，我们将讨论如何使用各种方法和属性来使用 JavaScript 验证表单数据。

Constraint Validation DOM Methods

在 JavaScript 中，约束验证 DOM 方法通过引用输入字段来验证输入值。它根据你与输入一起使用的 HTML 属性验证输入值。

验证输入值后，它返回布尔值，表示输入值是否有效。

以下是约束验证方法的列表。

Method

Description

checkValidity()

它根据输入元素是否包含有效值返回布尔值。

setCustomValidity()

它用于将自定义消息设置为 validationMessage 属性。

Syntax

我们可以遵循以下语法来使用表单验证方法。

element.checkValidity()
OR
element.setCustomValidity(message);

在上述语法中，你需要使用选择器访问元素，并将其作为 checkValidity() 或 setCustomValidity() 方法的引用。setCustomValidity() 方法将字符串消息作为参数。

Example: Using the checkValidity() method

我们在下面的代码中创建了数字输入并将 10 设置为 min 属性。

在 validateInput() 函数中，我们使用 id 访问数字输入并使用 checkValidity() 验证数字输入的值。

如果 checkValidity() 方法返回假，我们打印验证消息。否则，我们打印数字值。

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

Example: Using the setCustomValidity() Method

在下面的代码中，我们定义了数字输入以输入用户年龄。

在 validateAge() 函数中，我们使用其 id 访问年龄输入，并在输入值上执行自定义验证。根据验证，我们使用 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>

Constraint Validation DOM Properties

JavaScript 还包含约束验证的 DOM 属性。它用于检查输入值的特定验证。

在此，我们列出了可用于约束验证的所有 DOM 属性。

Property

Description

validity

它包含多个属性来对输入元素执行特定验证。

validationMessage

当输入元素不包含有效数据时，它包含验证消息。

willValidate

它表示是否会验证输入数据。

Properties of the 'validity' Property

在 JavaScript 中，每个元素都有包含多个属性的“有效性”属性。您可以使用“验证”属性的特定属性来执行验证。

在此，我们列出了“有效性”属性的所有属性。

Property

Description

customError

当您设置自定义有效性消息时，它包含一个 true 布尔值。

patternMismatch

当父元素的值与模式不匹配时，它会设置为 true。

rangeOverflow

它根据输入值是否大于 max 属性的值返回一个布尔值。

rangeUnderflow

它根据输入值是否小于 min 属性的值返回一个布尔值。

stepMismatch

它根据数字输入中步长是否不匹配返回一个布尔值。

tooLong

如果输入元素值长度大于 maxLength 属性的值，则返回 true。否则，它返回 false。

typeMismatch

当输入值的类型与“类型”属性的值不匹配时，它返回 true。

valueMissing

它根据输入元素是否为空返回一个布尔值。

valid

当输入元素有效时，它返回 true。

Syntax

用户可以按照以下语法使用验证属性的属性。

element.validity.property;

您可以使用元素有效性属性的不同属性来验证输入元素的值。

Example

在下面的代码中，我们定义数字输入，并将“max”属性的值设置为 300。

在 validateNumber() 函数中，我们使用 input 元素“validity”属性的“rangeOverflow”属性来检查输入值是否大于 300。

如果范围溢出属性返回 true，则我们打印“数字太大”。否则，我们打印数字值。

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

Example

在以下代码中，我们定义了文本输入。

在 validateText() 函数中，我们访问字符串输入。然后，我们使用有效性属性的“valueMissing”属性来检查输入值是否为空。

在输出中，你可以让输入值保持为空，点击验证文本按钮并观察错误信息。

<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() 方法显示自定义错误信息。