如果沒(méi)有可以與用戶進(jìn)行連接，并且保存所需數(shù)據(jù)的表單，互動(dòng)式網(wǎng)站和程序就無(wú)從談起。不錯(cuò)，我們的確需要有效的用戶輸入，但是我們要用一種不會(huì)讓用戶感到厭煩的方式來(lái)獲取它。

　　盡管我們可以使用良好的UX設(shè)計(jì)來(lái)提高表單的可用性，但是HTML5也為我們提供了一個(gè)原生的機(jī)制來(lái)進(jìn)行限制驗(yàn)證，它可以允許我們?cè)谇岸司筒煊X(jué)到輸入中的錯(cuò)誤。

　　在這篇文章中，我們將會(huì)專注于瀏覽器所提供的限制驗(yàn)證，并且討論一下前端開發(fā)者們?nèi)绾问褂肏TML5來(lái)獲得有效的用戶輸入。

　　為何需要前端輸入驗(yàn)證

　　使用輸入驗(yàn)證，主要有兩個(gè)目的。我們所要的內(nèi)容，需要：

　　1. 實(shí)用

　　我們需要的是可用數(shù)據(jù)。我們需要用戶在正確的表單中提交切實(shí)可行的數(shù)據(jù)。例如，今天不可能有200年前出生的人還活著。剛一開始獲得這樣的數(shù)據(jù)，你可能會(huì)覺(jué)得很有意思。但是一段時(shí)間之后，這樣的無(wú)效數(shù)據(jù)會(huì)讓你覺(jué)得厭煩，數(shù)據(jù)庫(kù)也會(huì)被大量無(wú)效數(shù)據(jù)所充斥。

　　2. 安全

　　這里所說(shuō)的安全性，就是要防止惡意內(nèi)容的注入——無(wú)論是用戶的故意行為還是無(wú)意行為。

　　數(shù)據(jù)的實(shí)用性(獲得合理的數(shù)據(jù))，這一點(diǎn)只能靠用戶的自覺(jué)，后端團(tuán)隊(duì)無(wú)法為你提供太多幫助。然而，保證數(shù)據(jù)的安全性，這一點(diǎn)需要前端團(tuán)隊(duì)和后端團(tuán)隊(duì)緊密協(xié)作。

　　如果前端開發(fā)者可以妥善的驗(yàn)證用戶輸入的數(shù)據(jù)，那后端團(tuán)隊(duì)所面臨的共計(jì)就會(huì)少很多。黑客在攻擊站點(diǎn)的時(shí)候，最常用的方法之一，就是提交額外的數(shù)據(jù)，或是以錯(cuò)誤的格式提交數(shù)據(jù)。開發(fā)者完全可以封堵這樣的安全漏洞，而且是在前端就可以完成。

　　在前端輸入驗(yàn)證中，我們的工作就是給用戶所輸入的數(shù)據(jù)添加合理的限制條件。HTML5的限制驗(yàn)證功能就給我們提供了這樣的工具。

　　HTML5限制驗(yàn)證

　　在HTML5出現(xiàn)以前，前端開發(fā)者只能使用JavaScript來(lái)驗(yàn)證用戶輸入的內(nèi)容，但是這個(gè)過(guò)程對(duì)于開發(fā)者來(lái)說(shuō)卻是痛苦不堪，經(jīng)常會(huì)出現(xiàn)各種錯(cuò)誤。為了完善用戶端的表單驗(yàn)證，HTML5推出了一個(gè)限制驗(yàn)證算法，它可以運(yùn)行在現(xiàn)代瀏覽器中，對(duì)用戶提交的數(shù)據(jù)進(jìn)行有效性檢查。

　　在對(duì)數(shù)據(jù)進(jìn)行評(píng)估的時(shí)候，這個(gè)算法使用了輸入元素的與驗(yàn)證相關(guān)的屬性，例如<input>、<textarea>和<select>。

　　多虧了HTML5的限制驗(yàn)證功能，在進(jìn)行用戶數(shù)據(jù)提交驗(yàn)證的時(shí)候，我們終于可以擺脫JavaScript了。

　　要想進(jìn)行更復(fù)雜的驗(yàn)證相關(guān)任務(wù)，HTML5為我們提供了一個(gè)限制驗(yàn)證JavaScript API，我們可以使用這個(gè)API來(lái)制作個(gè)性化驗(yàn)證腳本。

　 使用語(yǔ)義Input類型進(jìn)行驗(yàn)證

　　HTML5推出了一種語(yǔ)義input類型，它可以被用來(lái)驗(yàn)證用戶的輸入，方法是將用戶限制在某個(gè)特定的輸入表單上。

　　除了以前的input類型之外(例如text, password, submit, reset, radio, checkbox, button, hidden)，HTML5還添加了新的語(yǔ)義input類型：

　　email,

　　tel,

　　url,

　　number,

　　time,

　　date,

　　datetime,

　　datetime-local, month,

　　week, range, search,

　　color.

　　現(xiàn)在我們來(lái)看一下如果一個(gè)用戶輸入了錯(cuò)誤的數(shù)據(jù)類型會(huì)發(fā)生什么。加入我們已經(jīng)創(chuàng)建了一個(gè)電子郵件輸入框，代碼如下：

<form name="form" action="#" method="post">       <label for="youremail">Your Email:</label>       <input type="email" name="email" id="youremail">       <input type="submit" value="Submit">     </form>

　　如果用戶輸入了一串不符合電子郵件格式的字符串，限制驗(yàn)證算法就會(huì)阻止表單的提交，并且返回一個(gè)錯(cuò)誤提示：

　　這個(gè)規(guī)則也適用于其他的input類型，例如如果你使用了type=“url”，用戶將智能提交URL格式的字符串(以協(xié)議開頭，例如http://或是ftp://)。

　　還有一些input類型使用了特殊的設(shè)計(jì)，它們甚至不允許用戶輸入錯(cuò)誤的輸入格式，例如color和range。

 <form name="form" action="#" method="post">      <label for="bgcol">Background Color:</label>      <input type="color" name="color" id="bgcol">      <input type="submit" value="Submit">    </form>

　　如果使用了color這個(gè)input類型，用戶只能在顏色選擇器中選擇顏色，或者使用默認(rèn)的黑色。由于這個(gè)輸入框在最初設(shè)計(jì)時(shí)就添加了嚴(yán)格的限制，因此用戶基本不可能輸入錯(cuò)誤數(shù)據(jù)。

　　在合適的時(shí)候，你也可以考慮使用HTML的<select>標(biāo)簽，它的作用與上面那個(gè)input類型相似；它會(huì)讓用戶在下拉菜單中進(jìn)行選擇。

<form name="form" action="#" method="post">      <label for="favfruit">Your Favourite Fruit:</label>      <select name="fruit" id="favfruit">        <option value="apple">Apple</option>        <option value="pear">Pear</option>        <option value="orange">Orange</option>        <option value="raspberry">Raspberry</option>      </select>      <input type="submit" value="Submit">    </form>

　　使用HTML的驗(yàn)證屬性

　　使用語(yǔ)義input類型，可以限制用戶所提交的數(shù)據(jù)類型，但是在很多時(shí)候，這樣還不夠。在這個(gè)時(shí)候，<input>標(biāo)簽的驗(yàn)證相關(guān)屬性可以為我們提供幫助。

　　驗(yàn)證相關(guān)屬性應(yīng)用于某些特定的input類型(并非所有類型都可以使用)，這些屬性可以設(shè)定更加嚴(yán)格的限制。

　　1. 強(qiáng)制用戶必須提交有效數(shù)據(jù)：

　　required是HTML中最廣為人知的驗(yàn)證屬性。它是一種布爾值屬性，也就是說(shuō)，它不需要包含任何值，在需要的時(shí)候，我們只需要把它放我們只需要把它放在<input>標(biāo)簽里就好了。

　　<input type="email" name="email" id="youremail" required>

　　當(dāng)我們給一個(gè)輸入框賦予required屬性之后，如果用戶遺漏了這個(gè)輸入框，瀏覽器會(huì)返回一個(gè)提示信息，提醒用戶在該輸入框內(nèi)輸入有效數(shù)據(jù)，否則表單無(wú)法成功提交。因此，在使用了required屬性之后，我們需要給該輸入框配上醒目的提示符號(hào)。

　　required屬性可以與下列input類型搭配使用：text, search, url, tel, email, password, date, datetime, datetime-local, month, week,

time, number, checkbox, radio, file。還有<textarea>和<select>這兩個(gè)HTML標(biāo)簽。　

　　要注意的是，maxlength這個(gè)屬性無(wú)法返回錯(cuò)誤提示，但是當(dāng)用戶輸入的長(zhǎng)度超過(guò)限制的時(shí)候，瀏覽器會(huì)阻止用戶繼續(xù)輸入。因此，在使用它的時(shí)候，你一定要用醒目的文字向用戶提示輸入長(zhǎng)度限制，以免用戶不知道自己為何無(wú)法繼續(xù)輸入。

2. min, max和step：數(shù)字驗(yàn)證

min, max和step讓我們可以對(duì)數(shù)字輸入框添加限制。它們可以與range, number, date, month, week, datetime, datetime-local和time這些input類型搭配使用。

min和max屬性讓我們可以輕松的排除那些不合理的數(shù)據(jù)。例如下面的這段代碼，這是用于年齡驗(yàn)證的一段代碼：

 <form name="form" action="#" method="post">      <label for="yourage">Your Age:</label>      <input type="number" name="age" id="yourage" min="18" max="120">      <input type="submit" value="Submit">    </form>

當(dāng)限制驗(yàn)證算法發(fā)現(xiàn)用戶輸入的數(shù)字大于max的值，或是小于min的值的時(shí)候，它就會(huì)阻止用戶的輸入進(jìn)入后端，并且在瀏覽器中返回一個(gè)錯(cuò)誤提升。

step這個(gè)屬性規(guī)定了用戶只能按照等差數(shù)列的方式輸入數(shù)字。例如，如果你想讓用戶選擇閏年，給輸入框添加step=“4”這個(gè)屬性值，那么用戶只能輸入差值為4的倍數(shù)的數(shù)字。在下面的例子中，我使用了number這個(gè)input類型，因?yàn)镠TML5中沒(méi)有type=“year”這個(gè)類型。

 <form name="form" action="#" method="post">    <label for="yourleapyear">Your Favourite Leap Year:</label>    <input type="number" name="leapyear" id="yourleapyear"        min="1972" max="2016" step="4">    <input type="submit" value="Submit">  </form>

使用了這個(gè)限制，用戶只能選擇1972-2016年這個(gè)區(qū)間內(nèi)的閏年。如果用戶輸入的年份并非閏年（差值不是4的倍數(shù)），那么瀏覽器就會(huì)返回一個(gè)錯(cuò)誤提示。

3. maxlength：文本長(zhǎng)度驗(yàn)證

maxlength這個(gè)屬性，讓我們可以定義輸入框的最大字符限制。它可以與text, search, url, tel, email和password這些input類型以及<textarea>這個(gè)HTML標(biāo)簽搭配使用。

maxlength非常適合使用在電話號(hào)碼輸入框上，因?yàn)殡娫捥?hào)碼的長(zhǎng)度是固定的，不能超過(guò)某個(gè)特定的長(zhǎng)度。

當(dāng)我們想要限定用戶的輸入文本長(zhǎng)度的時(shí)候，也可以使用這個(gè)屬性。例如下面這段腳本，它將用戶的輸入長(zhǎng)度限制在500個(gè)字符以內(nèi)：

 <form name="form" action="#" method="post">    <label for="yourmsg">Message (max 500 characters):</label>    <textarea name="msg" id="yourmsg" cols="25" rows="4"          maxlength="500"></textarea>      <input type="submit" value="Submit">    </form>

　　4. pattern：Regex驗(yàn)證

　　pattern這個(gè)屬性允許我們?cè)隍?yàn)證過(guò)程中使用 正則表達(dá)式(Regular Expressions)。正則表達(dá)式是一套預(yù)先定義好的字符，它符合某個(gè)特定的模式。我們可以使用它來(lái)檢索符合這個(gè)模式的字符串，也可以用它來(lái)加強(qiáng)這個(gè)模式所定義的特定格式。

　　使用pattern屬性，我們可以完成后者——限制用戶只能提交符合所給與的正則表達(dá)式的輸入格式。

　　下面這個(gè)例子需要用戶輸入最少8個(gè)字符的密碼，而且字符串中必須含有至少一個(gè)字母以及至少一個(gè)數(shù)字：

 <form name="form" action="#" method="post">      <label for="yourpw">* Your Password:</label>      <input type="password" name="pw" id="yourpw" required            pattern="^(?=.*[A-Za-z])(?=.*d)[A-Za-zd]{8,}$">      <input type="submit" value="Submit">    </form>

　　總結(jié)

　　在這篇文章中，我們探討了如何使用HTML5原生的限制驗(yàn)證算法來(lái)進(jìn)行瀏覽器表單驗(yàn)證。要想穿件自定義驗(yàn)證監(jiān)本，我們需要使用Constraint Validation API 。