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

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

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

我們?cè)诒疚闹幸龅氖歉俚那秩胄浴?它甚至不是完整的客戶端驗(yàn)證 - 它只是一個(gè)微妙的可用性增強(qiáng)，以可訪問(wèn)的方式實(shí)現(xiàn)，（正如我在測(cè)試腳本時(shí)發(fā)現(xiàn)的）幾乎完全相同于Firefox的原生功能。

基本概念

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

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

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

定義HTML和CSS

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

<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>

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

ARIA規(guī)范 還定義了aria-invalid屬性，這就是我們將要用來(lái)指示字段何時(shí)無(wú)效（HTML5中沒(méi)有等效屬性）的屬性。 aria-invalid屬性顯然提供了可訪問(wèn)的信息，但它也可以用作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，而不是border，坦率地說(shuō)，這看上去更好，但是不支持box-shadow的瀏覽器將不會(huì)顯示，比如IE8。

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

開(kāi)始閱讀

添加JavaScript

現(xiàn)在我們已經(jīng)有了靜態(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)確定一個(gè)給定的字段是否應(yīng)該被驗(yàn)證，它只是測(cè)試該字段既沒(méi)被禁用（disabled ）也不是只讀（readonly），并且它具有一個(gè) pattern 或一個(gè) 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”的字段對(duì)于其readonly屬性仍將返回undefined（點(diǎn)屬性僅匹配通過(guò)腳本設(shè)置的狀態(tài)）。

一旦我們得到了這些實(shí)用程序，我們就可以定義主要的驗(yàn)證函數(shù)，它測(cè)試這個(gè)字段，然后執(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)一個(gè)字段是必需的卻沒(méi)有賦值，或者它的值不匹配它的模式，則該字段是無(wú)效的。

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

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

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

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

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)完成了 - 一個(gè)簡(jiǎn)單和非侵入性的即時(shí)表單驗(yàn)證增強(qiáng)，提供可訪問(wèn)和可視化的提示，以幫助用戶完成表單。 您可以查看以下演示：

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

來(lái)自：https://coyee.com/article/12365-instant-form-validation-using-javascript