HTML5引入了幾個新的屬性來實(shí)現(xiàn)基于瀏覽器的表單驗(yàn)證。 pattern屬性是一個正則表達(dá)式，用于定義textarea元素和大多數(shù)input元素類型的有效輸入范圍。 required 屬性指定某個字段是否需要輸入。 對于沒有實(shí)現(xiàn)這些屬性的傳統(tǒng)瀏覽器，我們可以使用它們的值作為填充表單的基礎(chǔ)。 我們還可以使用它們來提供更有趣的增強(qiáng)功能 - 即時表單驗(yàn)證。

來自作者的更多內(nèi)容 一個JavaScript可訪問性的失敗實(shí)驗(yàn)的經(jīng)驗(yàn)教訓(xùn) 可用的多個元素的拖放

我們必須非常小心以避免得意忘形，創(chuàng)建過于侵略性的表單驗(yàn)證，打破了自然的瀏覽行為，給用戶造成麻煩。 例如，我見過無法使用Tab鍵跳出無效字段的表單 - JavaScript被使用（或者被 濫用 ）來強(qiáng)制焦點(diǎn)留在字段中直到有效為止。 這是非常糟糕的可用性，并且直接違反了 可訪問性準(zhǔn)則 。

我們在本文中要做的是更少的侵入性。 它甚至不是完整的客戶端驗(yàn)證 - 它只是一個微妙的可用性增強(qiáng)，以可訪問的方式實(shí)現(xiàn)，（正如我在測試腳本時發(fā)現(xiàn)的）幾乎完全相同于Firefox的原生功能。

基本概念

在最新版本的Firefox中，如果必填（ required ）字段為空，或者其值與模式（ pattern ）不匹配，那么該字段將顯示一個紅色的輪廓，如下圖所示。

當(dāng)然，這種情況不會馬上發(fā)生。如果是這樣的話，則默認(rèn)情況下，每個必填字段都將具有該輪廓。相反，這些輪廓僅在您與該字段進(jìn)行交互 之后 顯示，這基本上（盡管不是精確）類似于onchange事件。

所以這就是我們要做的，使用onchange作為觸發(fā)事件。作為替代方案，我們可以使用oninput事件，一旦任何值被輸入或粘貼到該字段中即可觸發(fā)。但這實(shí)在是 太 快了，因?yàn)樗苋菀自诖蜃謺r快速地觸發(fā)和關(guān)閉，產(chǎn)生一種閃爍的效果，這將使一些用戶感到討厭或不可避免地分散了用戶的注意力。而且，在任何情況下，oninput不會從程序輸入中觸發(fā)，而onchange會，而且我們可能還需要它處理像第三方插件那樣的自動完成的事情。

定義HTML和CSS

讓我們看一看我們的實(shí)現(xiàn)，從它的HTML開始：

<form action='#' method='post'> <fieldset> <legend><strong>Add your comment</strong></legend> <p> <label for='author'>Name <abbr>*</abbr></label> <input aria-required='true' name='author'pattern='^([- wdu00c0-u024f]+)$'required='required'size='20'spellcheck='false' type='text'value=''> </p> <p> <label for='email'>Email <abbr>*</abbr></label> <input aria-required='true' name='email'pattern='^(([-wd]+)(.[-wd]+)*@([-wd]+)(.[-wd]+)*(.([a-zA-Z]{2,5}|[d]{1,3})){1,2})$' required='required'size='30'spellcheck='false' type='email'value=''> </p> <p> <label for='website'>Website</label> <input name='website'pattern='^(http[s]?://)?([-wd]+)(.[-wd]+)*(.([a-zA-Z]{2,5}|[d]{1,3})){1,2}(/([-~%.()wd]*/*)*(#[-wd]+)?)?$'size='30'spellcheck='false' type='url'value=''> </p> <p> <label for='text'>Comment <abbr>*</abbr></label> <textareaaria-required='true'cols='40' name='text'required='required'rows='10'spellcheck='true' ></textarea> </p> </fieldset> <fieldset> <button name='preview' type='submit'>Preview</button> <button name='save' type='submit'>Submit Comment</button> </fieldset></form>

這個例子是一個簡單的評論表單，其中一些字段是必需的，一些是需要驗(yàn)證的，一些是二者都有的。 具有 required屬性的 字段也具有aria-required屬性，這為那些不了解新的input類型的輔助技術(shù)提供了回退語義。

ARIA規(guī)范 還定義了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，而不是border，坦率地說，這看上去更好，但是不支持box-shadow的瀏覽器將不會顯示，比如IE8。

閱讀現(xiàn)代JavaScript 跟上不斷變化的的JavaScript世界

開始閱讀

添加JavaScript

現(xiàn)在我們已經(jīng)有了靜態(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)該被驗(yàn)證，它只是測試該字段既沒被禁用（disabled ）也不是只讀（readonly），并且它具有一個 pattern 或一個 required 屬性：

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

前兩個條件可能看起來很冗長，但它們是必需的，因?yàn)樵氐?disabled 和 readonly 屬性不一定反映其屬性狀態(tài)。 例如，在Opera中，硬編碼屬性readonly =“readonly”的字段對于其readonly屬性仍將返回undefined（點(diǎn)屬性僅匹配通過腳本設(shè)置的狀態(tài)）。

一旦我們得到了這些實(shí)用程序，我們就可以定義主要的驗(yàn)證函數(shù)，它測試這個字段，然后執(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'); } }}

所以當(dāng)一個字段是必需的卻沒有賦值，或者它的值不匹配它的模式，則該字段是無效的。

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

一旦我們確定一個字段是否無效，我們就可以控制它的aria-invalid屬性來指示該狀態(tài) - 將它添加到一個不具有該字段的無效字段中，或者從一個有效的字段中刪除它。 簡單吧！ 最后，為了把這一切付諸實(shí)施，我們需要將驗(yàn)證函數(shù)綁定到一個onchange事件。 就是 這么簡單：

addEvent(document, 'change', function(e, target) { instantValidation(target);});

然而，為了使它工作，onchange事件 必須冒泡 （使用通常稱為 事件委托 的技術(shù)），但在Internet Explorer 8和更早版本中，onchange事件 不會冒泡 。 我們可以選擇忽略這些瀏覽器，但我認(rèn)為這將是一種恥辱，尤其是當(dāng)問題的解決方法是如此簡單。 它只是意味著代碼更加復(fù)雜 - 我們必須獲取input和textarea元素的集合，遍歷它們，并將onchange事件單獨(dú)綁定到每個字段上：

var fields = [ document.getElementsByTagName('input'), document.getElementsByTagName('textarea')];for (var a = fields.length, i = 0; i < a; i++) { for (var b = fields[i].length, j = 0; j < b; j++) { addEvent(fields[i][j], 'change', function(e, target) { instantValidation(target); }); }} 結(jié)論及更多

至此我們已經(jīng)完成了 - 一個簡單和非侵入性的即時表單驗(yàn)證增強(qiáng)，提供可訪問和可視化的提示，以幫助用戶完成表單。 您可以查看以下演示：

請參閱 CodePen 上SitePoint（ @SitePoint ）的Pen 即時表單驗(yàn)證 。

來自：https://coyee.com/article/12365-instant-form-validation-using-javascript