實(shí)時(shí)表單驗(yàn)證：提升用戶體驗(yàn)的微妙改進(jìn)

核心要點(diǎn):

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

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

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

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

基本概念

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

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

因此，我們將使用 onchange 作為觸發(fā)事件?；蛘?，我們可以使用 oninput 事件，該事件只要在字段中鍵入或粘貼任何值就會(huì)觸發(fā)。但這真的太“即時(shí)”了，因?yàn)樗苋菀自诳焖龠B續(xù)鍵入時(shí)反復(fù)觸發(fā)，從而產(chǎn)生閃爍效果，這會(huì)讓一些用戶感到厭煩或分心。而且，無(wú)論如何，oninput 不會(huì)從編程輸入中觸發(fā)，而 onchange 會(huì)觸發(fā)，我們可能需要它來(lái)處理來(lái)自第三方插件的自動(dòng)完成等操作。

定義HTML和CSS

讓我們看一下我們的實(shí)現(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>

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

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

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

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

添加JavaScript

現(xiàn)在我們有了靜態(tài)代碼，我們可以添加腳本了。首先，我們需要一個(gè)基本的 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);
    });
  }
}

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

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

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

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

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");
    }
  }
}

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

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

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

<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 事件不會(huì)冒泡。我們可以選擇忽略這些瀏覽器，但我認(rèn)為這將是一種遺憾，尤其是在問(wèn)題如此容易解決的情況下。它只是意味著代碼更複雜一些——我們必須獲取輸入和文本區(qū)域元素的集合，遍歷它們並將 onchange 事件分別綁定到每個(gè)字段：

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

結(jié)論和展望

就是這樣——一個(gè)簡(jiǎn)單且非侵入性的實(shí)時(shí)表單驗(yàn)證增強(qiáng)功能，提供可訪問(wèn)和直觀的提示，以幫助用戶完成表單。

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

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

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

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