深入探究novalidate

在HTML5中有一個非常實用的屬性–novalidate

一、noValidate屬性值

在HTML5中，表單默認進行驗證，如果用戶的輸入格式不符合表單字段的限制條件，瀏覽器會提示用戶進行更正處理，但在某些情況下，我們可能不希望自動驗證，這個時候可以使用novalidate來關閉表單的驗證功能。

在沒有novalidate屬性的情況下，當我們提交表單時，如果表單字段的輸入內容不符合規則，表單將會在提交前進行驗證提示。而當我們給表單添加novalidate屬性後，在表單提交時就不會進行驗證，即使表單字段不符合規則，也可以提交，瀏覽器也不會提示用戶。

舉個例子，當我們在輸入密碼時，密碼的長度經常會有要求，若不符合要求，我們希望用戶直接提交，而不會在頁面上卡住。這個時候novalidate就可以派上用場。

二、新增的novalidate屬性

在HTML5之前還沒有novalidate屬性，只能使用javascript來禁用表單的驗證。在HTML5之後，我們可以通過在form標籤中添加novalidate屬性來關閉表單驗證功能。

  <form action="submit.php" method="post" novalidate>
    <!-- 表單內容 -->
  </form>

novalidate是一個布爾型屬性，只要存在這個屬性，表單驗證就會被禁用。

三、與novalidate相關的其他屬性選項

novalidate作為一個非常實用的表單屬性，在HTML5中還有其他屬性與之相關：

1、required

required屬性是規定表單字段必須填寫/選中的屬性,若表單字段為空，瀏覽器將會阻止表單提交。

  <form action="submit.php" method="post">
    <input type="text" name="username" required>
    <input type="email" name="email" required>
    <input type="submit" name="submit">
  </form>

在以上代碼中，當我們點擊提交按鈕時，瀏覽器會判斷表單字段是否為空，如果為空，表單將不會被提交。

2、pattern

pattern屬性可用於規定輸入字段的格式，它接受一個正則表達式作為參數。如果用戶輸入的值不符合HTML規定的格式，瀏覽器將預測其輸入錯誤，並返回相應的提示信息。

  <form action="submit.php" method="post">
    <input type="text" name="username" pattern="[A-Za-z]">
    <input type="email" name="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,}$">
    <input type="submit" name="submit">
  </form>

在以上代碼中，pattern屬性對input標籤中的name屬性值進行匹配判斷，並提示用戶相應的錯誤信息。

3、formnovalidate

formnovalidate屬性表示在表單提交時忽略瀏覽器原生的校驗規則，強制提交表單，並且不做校驗

  <form action="submit.php" method="post">
    <input type="text" name="username" required>
    <input type="submit" name="submit" formnovalidate >
  </form>

當單擊提交按鈕時，表單將被提交，而不會執行任何校驗。