JavaScript - 表单 API

Web 表单 API

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

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

约束验证 DOM 方法

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

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

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

语法

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

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

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

示例:使用 checkValidity() 方法

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

在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 访问该输入框，并对输入值执行自定义验证。基于验证结果，我们使用 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(""); // 删除自定义错误消息
            output.innerHTML = "Age is valid!";
         }

         ageInp.reportValidity(); // 显示自定义验证消息
      }
   </script>
</body>
</html>

约束验证 DOM 属性

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

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

"validity"的属性属性

在 JavaScript 中，每个元素都具有"validity"属性，该属性包含多个属性。您可以使用"validation"属性中的特定属性来执行验证。

这里，我们列出了"validity"属性的所有属性。

语法

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

element.validity.property;

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

示例

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

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

如果 rangeOverflow 属性返回 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>

示例

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

在validateText()函数中，我们访问字符串输入框。之后，我们使用validity属性的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() 方法显示自定义错误消息。