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()方法顯示自定義錯誤訊息。

列印頁面