JavaScript 表单 API

Web 表单 API

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

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

约束验证 DOM 方法

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

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

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

方法	描述
checkValidity()	它根据输入元素是否包含有效值返回布尔值。
setCustomValidity()	它用于将自定义消息设置到 validationMessage 属性。

语法

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

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

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

示例：使用 checkValidity() 方法

我们在下面的代码中创建了数字输入，并将 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 访问年龄输入，并对输入值执行自定义验证。根据验证结果，我们使用 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属性。它用于检查输入值的特定验证。

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

属性	描述
validity	它包含多个属性，用于对输入元素执行特定验证。
validationMessage	当输入元素不包含有效数据时，它包含验证消息。
willValidate	它表示是否将验证输入数据。

“validity”属性的属性

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

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

属性	描述
customError	当您设置自定义有效性消息时，它包含一个true布尔值。
patternMismatch	当父元素的值与模式不匹配时，它设置为true。
rangeOverflow	它根据输入值是否大于max属性的值返回布尔值。
rangeUnderflow	它根据输入值是否小于min属性的值返回布尔值。
stepMismatch	它根据数值输入中的步长是否不匹配返回布尔值。
tooLong	如果输入元素值的长度大于maxLength属性的值，则返回true。否则，返回false。
typeMismatch	当输入值的类型与“type”属性的值不匹配时，它返回true。
valueMissing	它根据输入元素是否为空返回布尔值。
valid	当输入元素有效时，它返回true。

语法

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

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

打印页面