實時表單驗證：提升用戶體驗的微妙改進

核心要點:

• JavaScript 可用於實現(xiàn)實時表單驗證，此功能可為用戶提供輸入有效性的即時反饋，從而提升用戶體驗並維護數(shù)據(jù)完整性，確保僅提交有效數(shù)據(jù)。
• HTML5 屬性 pattern 和 required 可用於定義表單元素的有效輸入範(fàn)圍。如果瀏覽器不支持這些屬性，則其值可用作 JavaScript 兼容性填充程序的基礎(chǔ)。
• aria-invalid 屬性可用於指示字段是否無效。此屬性提供輔助功能信息，並可用作 CSS 鉤子以直觀地指示無效字段。
• JavaScript 函數(shù) instantValidation() 測試字段並執(zhí)行實際驗證，控制 aria-invalid 屬性以指示字段的狀態(tài)。此函數(shù)可以綁定到 onchange 事件以提供實時表單驗證。

HTML5 引入了幾個用於實現(xiàn)基於瀏覽器的表單驗證的新屬性。 pattern 屬性是一個正則表達式，用於定義文本區(qū)域元素和大多數(shù)輸入類型的有效輸入範(fàn)圍。 required 屬性指定字段是否必填。對於不支持這些屬性的舊版瀏覽器，我們可以使用它們的值作為兼容性填充程序的基礎(chǔ)。我們還可以使用它們來提供更有趣的增強功能——實時表單驗證。

需要注意的是，不要過度使用驗證，以免破壞正常的瀏覽行為並妨礙用戶操作。例如，我見過一些表單，無法使用 Tab 鍵離開無效字段——JavaScript 被用來（更確切地說，是被濫用）強制焦點停留在字段內(nèi)，直到其有效為止。這非常不利於用戶體驗，並且直接違反了輔助功能指南。

本文將介紹一種侵入性較小的實現(xiàn)方法。它甚至不是完整的客戶端驗證——它只是一種細(xì)微的用戶體驗增強，以可訪問的方式實現(xiàn)，在我測試腳本時發(fā)現(xiàn)它幾乎與 Firefox 當(dāng)前原生實現(xiàn)的功能相同！

基本概念

在最新版本的 Firefox 中，如果必填字段為空或其值與模式不匹配，則該字段將顯示紅色邊框，如下圖所示：

當(dāng)然，這不會立即發(fā)生。如果發(fā)生這種情況，則每個必填字段默認(rèn)都會顯示該邊框。相反，只有在您與字段交互後才會顯示這些邊框，這基本上（雖然不完全）類似於 onchange 事件。

因此，我們將使用 onchange 作為觸發(fā)事件?；蛘?，我們可以使用 oninput 事件，該事件只要在字段中鍵入或粘貼任何值就會觸發(fā)。但這真的太“即時”了，因為它很容易在快速連續(xù)鍵入時反復(fù)觸發(fā)，從而產(chǎn)生閃爍效果，這會讓一些用戶感到厭煩或分心。而且，無論如何，oninput 不會從編程輸入中觸發(fā)，而 onchange 會觸發(fā)，我們可能需要它來處理來自第三方插件的自動完成等操作。

定義HTML和CSS

讓我們看一下我們的實現(xiàn)，從它所基於的 HTML 開始：

<form action="#" method="post">
  <fieldset>
    <legend><strong>Add your comment</strong></legend>

    <p>
      <label for="author">Name <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="author"
        name="author"
        pattern="^([- \w\d\u00c0-\u024f]+)$"
        required="required"
        size="20"
        spellcheck="false"
        title="Your name (no special characters, diacritics are okay)"
        type="text"
        value=""
      >
    </p>

    <p>
      <label for="email">Email <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="email"
        name="email"
        pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
        required="required"
        size="30"
        spellcheck="false"
        title="Your email address"
        type="email"
        value=""
      >
    </p>

    <p>
      <label for="website">Website</label>
      <input
        id="website"
        name="website"
        pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
        size="30"
        spellcheck="false"
        title="Your website address"
        type="url"
        value=""
      >
    </p>

    <p>
      <label for="text">Comment <abbr title="Required">*</abbr></label>
      <textarea
        aria-required="true"
        cols="40"
        id="text"
        name="text"
        required="required"
        rows="10"
        spellcheck="true"
        title="Your comment"
      ></textarea>
    </p>

  </fieldset>
  <fieldset>
    <input name="preview" type="submit" value="Preview">
    <input name="save" type="submit" value="Submit Comment">
  </fieldset>
</form>

此示例是一個簡單的評論表單，其中一些字段是必填的，一些字段經(jīng)過驗證，一些字段同時滿足這兩個條件。具有 required 屬性的字段也具有 aria-required 屬性，以便為不支持新輸入類型的輔助技術(shù)提供後備語義。

ARIA 規(guī)範(fàn)還定義了 aria-invalid 屬性，我們將使用它來指示字段是否無效（HTML5 中沒有等效屬性）。 aria-invalid 屬性顯然提供了輔助功能信息，但它也可以用作 CSS 鉤子來應(yīng)用紅色邊框：

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}

我們可以只使用 box-shadow 而不用管邊框，坦白說這樣看起來會更好，但這樣一來，在不支持 box-shadow 的瀏覽器（例如 IE8）中就沒有指示了。

添加JavaScript

現(xiàn)在我們有了靜態(tài)代碼，我們可以添加腳本了。首先，我們需要一個基本的 addEvent() 函數(shù)：

function addEvent(node, type, callback) {
  if (node.addEventListener) {
    node.addEventListener(type, function(e) {
      callback(e, e.target);
    }, false);
  } else if (node.attachEvent) {
    node.attachEvent('on' + type, function(e) {
      callback(e, e.srcElement);
    });
  }
}

接下來，我們需要一個函數(shù)來確定是否應(yīng)該驗證給定字段，該函數(shù)只需測試它既未禁用也未只讀，並且它具有 pattern 或 required 屬性：

function shouldBeValidated(field) {
  return (
    !(field.getAttribute("readonly") || field.readonly) &&
    !(field.getAttribute("disabled") || field.disabled) &&
    (field.getAttribute("pattern") || field.getAttribute("required"))
  );
}

前兩個條件可能看起來很冗長，但它們是必要的，因為元素的 disabled 和 readonly 屬性不一定反映其屬性狀態(tài)。例如，在 Opera 中，具有硬編碼屬性 readonly="readonly" 的字段仍然會為其 readonly 屬性返回 undefined（點屬性只匹配通過腳本設(shè)置的狀態(tài)）。

一旦我們獲得了這些實用程序，我們就可以定義主驗證函數(shù)，該函數(shù)測試字段，然後根據(jù)需要執(zhí)行實際驗證：

function instantValidation(field) {
  if (shouldBeValidated(field)) {
    var invalid =
      (field.getAttribute("required") && !field.value) ||
      (field.getAttribute("pattern") &&
        field.value &&
        !new RegExp(field.getAttribute("pattern")).test(field.value));
    if (!invalid && field.getAttribute("aria-invalid")) {
      field.removeAttribute("aria-invalid");
    } else if (invalid && !field.getAttribute("aria-invalid")) {
      field.setAttribute("aria-invalid", "true");
    }
  }
}

因此，如果字段是必填的但沒有值，或者它具有模式和值，但值與模式不匹配，則該字段無效。

由於模式已經(jīng)定義了正則表達式的字符串形式，所以我們只需要將該字符串傳遞給 RegExp 構(gòu)造函數(shù)，它就會創(chuàng)建一個我們可以針對該值進行測試的正則表達式對象。但是，我們必須預(yù)先測試該值以確保它不為空，這樣正則表達式本身就不必考慮空字符串。

一旦我們確定了字段是否無效，我們就可以控制它的aria-invalid 屬性來指示該狀態(tài)——將其添加到尚未具有該屬性的無效字段中，或?qū)⑵鋸木哂性搶傩缘挠行ё侄沃袆h除。很簡單！最後，為了使這一切都能運行，我們需要將驗證函數(shù)綁定到 onchange 事件。它應(yīng)該像這樣簡單：

<form action="#" method="post">
  <fieldset>
    <legend><strong>Add your comment</strong></legend>

    <p>
      <label for="author">Name <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="author"
        name="author"
        pattern="^([- \w\d\u00c0-\u024f]+)$"
        required="required"
        size="20"
        spellcheck="false"
        title="Your name (no special characters, diacritics are okay)"
        type="text"
        value=""
      >
    </p>

    <p>
      <label for="email">Email <abbr title="Required">*</abbr></label>
      <input
        aria-required="true"
        id="email"
        name="email"
        pattern="^(([-\w\d]+)(\.[-\w\d]+)*@([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2})$"
        required="required"
        size="30"
        spellcheck="false"
        title="Your email address"
        type="email"
        value=""
      >
    </p>

    <p>
      <label for="website">Website</label>
      <input
        id="website"
        name="website"
        pattern="^(http[s]?:\/\/)?([-\w\d]+)(\.[-\w\d]+)*(\.([a-zA-Z]{2,5}|[\d]{1,3})){1,2}(\/([-~%\.\(\)\w\d]*\/*)*(#[-\w\d]+)?)?$"
        size="30"
        spellcheck="false"
        title="Your website address"
        type="url"
        value=""
      >
    </p>

    <p>
      <label for="text">Comment <abbr title="Required">*</abbr></label>
      <textarea
        aria-required="true"
        cols="40"
        id="text"
        name="text"
        required="required"
        rows="10"
        spellcheck="true"
        title="Your comment"
      ></textarea>
    </p>

  </fieldset>
  <fieldset>
    <input name="preview" type="submit" value="Preview">
    <input name="save" type="submit" value="Submit Comment">
  </fieldset>
</form>

但是，為了使這能夠工作，onchange 事件必須冒泡（使用通常稱為事件委託的技術(shù)），但在Internet Explorer 8 及更早版本中，onchange 事件不會冒泡。我們可以選擇忽略這些瀏覽器，但我認(rèn)為這將是一種遺憾，尤其是在問題如此容易解決的情況下。它只是意味著代碼更複雜一些——我們必須獲取輸入和文本區(qū)域元素的集合，遍歷它們並將 onchange 事件分別綁定到每個字段：

input[aria-invalid="true"], textarea[aria-invalid="true"] {
  border: 1px solid #f00;
  box-shadow: 0 0 4px 0 #f00;
}

結(jié)論和展望

就是這樣——一個簡單且非侵入性的實時表單驗證增強功能，提供可訪問和直觀的提示，以幫助用戶完成表單。

這個腳本實現(xiàn)後，我們實際上只需要幾步就能完成一個完整的兼容性填充程序。這樣的腳本超出了本文的範(fàn)圍，但是如果您想進一步開發(fā)它，所有基本模塊都在這裡——測試是否應(yīng)該驗證字段，根據(jù)模式和/或 required 驗證字段，以及綁定觸發(fā)事件。

我必須承認(rèn)，我不確定它是否真的值得！如果您已經(jīng)有了此增強功能（在IE7 及所有現(xiàn)代瀏覽器中都能工作），並且考慮到您別無選擇，也必須實現(xiàn)服務(wù)器端驗證，並且考慮到支持pattern和required 的瀏覽器已經(jīng)使用它們進行預(yù)提交驗證——考慮到所有這些，真的還有必要添加另一個兼容性填充程序嗎？

(此處可以添加關(guān)於實時驗證的常見問題解答部分，內(nèi)容與原文檔中的FAQs部分相同)

以上是使用JavaScript即時表單驗證的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！