使用 HTML5 中的自訂驗證訊息形成必需屬性-js教程-PHP中文網

使用 HTML5 中的自訂驗證訊息形成必需屬性

WBOY

發布： 2023-08-25 10:29:15

轉載

718 人瀏覽過

使用 HTML5 中的自定义验证消息形成必需属性

HTML5 包含許多內建的表單驗證功能，讓開發人員可以輕鬆地將驗證新增至其表單。這些功能之一是「required」屬性，它指定輸入欄位是必需的並且必須在提交表單之前填寫。

“required”屬性是一個布林屬性。如果表單中存在任何具有「必填」屬性的輸入字段，則必須在提交表單之前填寫此字段。

如果在提交表單之前該特定欄位留空，使用者將在瀏覽器中看到錯誤訊息，通知他們該輸入欄位是必需的。

使用「必需」屬性

要使用「required」屬性，只需將該屬性新增至您想要設為必填的輸入欄位 -

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" required>
   </form>
</body>
</html>

登入後複製

瀏覽器將在提交表單之前驗證輸入欄位是否已填寫，如果沒有填寫，則會顯示錯誤訊息。根據瀏覽器的不同，預設錯誤訊息可能有所不同，但通常會指出該欄位是必需的。

自訂驗證訊息

我們也可以透過指定一條唯一的訊息來更改無效輸入的訊息，該訊息將在欄位無效時發送給使用者。我們可以使用“title”屬性來更改預設驗證訊息 -

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" id="name" required title="Please enter your name">
   </form>
</body>
</html>

登入後複製

如果提交表單時輸入欄位留空，此程式碼將向使用者顯示訊息「請輸入您的姓名」。

為了指定每次填寫表單時輸入都必須符合的正規表示式，HTML5 除了「title」屬性之外還提供了「pattern」元素，允許程式設計師指定輸入必須符合的正規表示式，以便被接受。如果輸入不符合所需模式，使用者將在瀏覽器中看到錯誤通知

範例

這裡是如何使用「pattern」屬性來指定輸入欄位的最小長度的範例 -

<html>
<body>
   <form>
      <label for="name">Name:</label>
      <input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
   </form>
</body>
</html>

登入後複製

如果輸入不符合此條件，將顯示訊息「請輸入至少 3 個字元」。此代碼要求輸入欄位至少包含 3 個字元。

自訂錯誤訊息樣式

使用 CSS，可以更改錯誤訊息的外觀。預設情況下，錯誤訊息會作為小文字節點新增至輸入字段，並以紅色字體書寫。但是，我們可以修改錯誤訊息的外觀並使用 CSS 控制其顯示方式。

“:invalid”偽類可用於在輸入字段無效時選擇輸入字段，且 CSS 屬性可用於更改錯誤訊息的樣式。

範例

以下是如何使用 CSS 自訂錯誤訊息樣式的範例 -

<html>
   <style>
      input:invalid {
         border: 2px solid red;
      }
      input:invalid + span {
         color: red;
         font-weight: bold;
      }
   </style>
   <body>
      <form>
         <label for="name">Name:</label>
         <input type="text" required pattern=".{3,}" title="Please enter at least 3 characters">
      </form>
   </body>
</html>

登入後複製

當輸入欄位無效時，此程式碼會將其邊框變成紅色，並以粗體和紅色顯示錯誤訊息。

使用 JavaScript 自訂錯誤訊息

除了使用 CSS 之外，我們還可以使用 JavaScript 來自訂錯誤訊息，並控制其顯示方式。

要使用 JavaScript 自訂錯誤訊息，我們可以使用「setCustomValidity」方法，該方法允許我們為輸入欄位指定自訂錯誤訊息。

範例

< /p>

以下是如何使用「setCustomValidity」方法設定自訂錯誤訊息的範例 -

<html>
<body>
   <h2>JavaScript Validation</h2>
   <p>Enter a number and click OK:</p>
   <input id="InputField" type="text" required>
   <button onclick="myFunction()">OK</button>
   <p id="demo"></p>
   <script>
      function myFunction() {
         const txt = document.getElementById("InputField").value;
         console.log(txt);
         const txtLen = txt.length;
         console.log(txtLen);
         if (txtLen<3) {
            document.getElementById("demo").innerHTML = "Must be atleast 3 characters";
         } else {
            document.getElementById("demo").innerHTML = "Input OK";
         }
      }
   </script>
</body>
</html>

登入後複製

此程式碼會將輸入欄位的錯誤訊息設定為「請輸入有效值。」