下面這份指南將會探索html5的‘pattern’屬性，這個屬性可以幫助我們定制我們自己的表單驗證。
驗證(Validation)表單校驗在網站的安全性方面啟到的作用與網站的實用性是同等重要的。表單校驗工作原理是在提交表單之前，評估輸入的內容格式是否正確。例如，如果我們有一個郵箱地址框，那填入的信息必須是有效的郵箱地址；它應該是以字母或數字開頭，隨后是‘@’字符，并以一個域名地址結尾。
HTML5自帶的一些新的文本類型極其預先定義好的一些校驗規則，例如email、url及tel等，讓表單校驗變的更加簡單。當輸入的值與期望輸入的格式不匹配時，輸入框會拋出一個錯誤信息來阻止提交。
預估每一種可能的輸入是不切實際的，比如，如果我們需要一個用戶名、郵編、或者其他任何格式的特殊輸入，我們該怎么辦，怎么去校驗這些輸入呢？這就到了我們今天的主題 ’pattern’屬性。
使用’Pattern’屬性‘pattern’屬性只對’input’元素有效。我們可以使用正則表達式定義我們自己的校驗規則。同樣的，如果輸入值不滿足條件，輸入框會拋出一個異常。
例如，加入我們的表格中有一個用戶名輸入框，因為我們沒有針對用戶名的校驗標準，因此，我們需要使用正則表達式來校驗我們的輸入內容。
<form action="somefile.php">在我們的用戶名輸入框中的pattern屬性中添加上述值：
<form action="somefile.php">好了，現在它只支持輸入小寫字母，提交任何其他值都會拋出一個錯誤信息。
就像上面你看到的那樣，錯誤信息是“請按規則輸入(Please match the requested format)”。這表示我們的校驗生效了，但是，這樣的錯誤信息不利于我們理解我們實際上希望輸入怎樣的格式。這樣的用戶體驗很失敗。
定制校驗信息(Customizing the Validation Message)幸運的是，我們有很多種方式去可以定制更加有用的信息。最直觀的方式就是在input元素的’title’屬性上添加。
<form action="somefile.php">現在，標題中包含了默認的提示信息：
然而，這個信息提示框還是前后不一致。如果我們拿它與一個郵箱格式的輸入框相比，實際的說明應該更突出一點。
第二種方案可以幫助我們解決這個問題。
替換默認的校驗信息(Replacing the Default Validation Message)讓我們用一個完全自定義的信息來替換默認的“請按規則輸入(Please match the requested format)”。我們需要用到一點javascript。
開始之前，為了更好的選中input元素，我們先給它加上id。
<form action="somefile.php">現在，我們可以用JavaScript選中元素，并賦值給一個變量。(可以直接使用”script”標簽或者引入一個額外的JavaScript文件)
var input = document.getElementById('username');然后，當輸入框觸發校驗狀態的時候，我們指定特定的信息。
input.oninvalid = function(event) {“oninvalid”事件繼承自”event”對象，其包涵有一系列屬性，包括”target”屬性(校驗的元素)及帶有錯誤信息的”validationMessage”屬性。
在上面的例子中，我們使用”setCustomValidity()”方法替換了提示信息。
現在我們應該可以發現默認的提示信息被無縫替換了。
樣式(Styling)為了補充新的輸入類型及設置一個自定義的驗證消息，CSS3規范帶來了幾個有用的偽類，’:valid’及’:invalid’。這就能夠讓我們根據不同的輸入校驗狀態應用相應的樣式，例如：
input:invalid {當使用這些偽類時，有幾點需要記住的是：
首先，”:valid”是默認樣式，即使輸入值為空。因此，正如上面你看到那樣，我們設置”border-color”為”#ccc”，則輸入框元素默認的顏色也是這個。空值永遠被認為是有效輸入，除非我們已經加了“必填”(required)屬性。那樣的話，輸入校驗無效，邊框將變成給定的紅色。有效和無效樣式將在用戶輸入時立馬生效，即使值為空。即時樣式改變可能會造成用戶的恐慌。彈出框樣式一致性(A Word on Styling the Popup Message)表單校驗作為一個HTM5的特性已經變成了一種規范，然而，錯誤信息提示框如何呈現卻完全取決于瀏覽器廠商。
如果在不同的瀏覽器上呈現不一樣的效果，這對你界面的一致性是沒有幫助的。
谷歌瀏覽器在幾年前阻止用戶去自定義默認的彈框。如果你想做啥改變的話，唯一可供選擇的方式是使用JavaScript覆蓋彈框信息，下面我們來看看應該怎么做。
進階(Going More Advanced)我們先創建一個當我們的輸入值有效的時候才呈現的自定義彈框。在一開始，我們需要選中一些必要的元素，包括”input”及”form”元素：
var input = document.getElementById('username');然后，新建一個包含我們信息的新元素:
var elem = document.createElement('div');上面我們創建了一個新的div元素，設置其id為”notify”，設置其”display”樣式為”none”。最后，將其插入到”form”元素中。
使用事件(Working with Events)我們需要處理兩個事件。首先，當輸入的值不合法的時候，需要觸發”invalid”事件。下面我們添加”invalid”事件：
input.addEventListener('invalid', function(event){在這里，利用”event.preventDefault();”，我們可以阻止默認的行為，這樣瀏覽器就不會顯示默認的彈框。
相反，我們顯示新建的div元素。我們在內容區域里添加文本信息，添加新的樣式”error”，并且通過設置”display”屬性為”block”來顯示信息。
同樣的，我們給輸入框添加一個”invalid”樣式，讓它邊框為紅色。我們也需要在樣式表中設置其樣式：
input.invalid {另外，你也可以加一些抖動樣式通過”Animate.css”，這可以加上一些抖動的動畫。
第二個事件是”input”事件，它將在輸入值改變的時候觸發。我們可以使用這個事件將輸入值恢復到合法輸入的狀態，也可以隱藏彈出框，如下：
input.addEventListener('input', function(event){如上文，我們可以通過移除input元素的樣式來隱藏彈出框。
現在我們可以完全定制自己的彈出校驗框了，試試輸入任何一些非法的值。
最后幾點(Final Thoughts)在標準的輸入類型中加上pattern屬性可以給表單帶來一些額外的校驗形式，但是請注意，你也應該執行一些服務器端的校驗。
神奇的是，即使當用戶禁止了瀏覽器端的JavaScript，最新版的瀏覽器也會顯示校驗提示框并阻止表單提交。
然而，對于Safari瀏覽器來說，在用戶輸入時，不支持pattern屬性。不過使用”Webshim Lib”也可以啟到類似的效果。
最后，希望你能喜歡本教程，并且將其作為一個針對HTML5表單校驗的簡單參考指南。
(本文譯自： HTML5 Form Validation With the “pattern” Attribute )
