本文將為大家詳細(xì)介紹“HTML5中限制驗證的示例分析”，內(nèi)容步驟清晰詳細(xì)，細(xì)節(jié)處理妥當(dāng)，而小編每天都會更新不同的知識點，希望這篇“HTML5中限制驗證的示例分析”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

創(chuàng)新互聯(lián)專注于企業(yè)成都營銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、魏縣網(wǎng)站定制設(shè)計、自適應(yīng)品牌網(wǎng)站建設(shè)、H5響應(yīng)式網(wǎng)站、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為魏縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

　　盡管我們可以使用良好的UX設(shè)計來提高表單的可用性，但是HTML5也為我們提供了一個原生的機制來進(jìn)行限制驗證，它可以允許我們在前端就察覺到輸入中的錯誤。

為何需要前端輸入驗證

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

1. 實用

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

2. 安全

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

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

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

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

HTML5限制驗證

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

　　在對數(shù)據(jù)進(jìn)行評估的時候，這個算法使用了輸入元素的與驗證相關(guān)的屬性，例如、和<select>。</p><p>　　多虧了HTML5的限制驗證功能，在進(jìn)行用戶數(shù)據(jù)提交驗證的時候，我們終于可以擺脫JavaScript了。</p><p>　　要想進(jìn)行更復(fù)雜的驗證相關(guān)任務(wù)，HTML5為我們提供了一個限制驗證JavaScript API，我們可以使用這個API來制作個性化驗證腳本。</p><p><strong>  使用語義Input類型進(jìn)行驗證</strong></p><p>　　HTML5推出了一種語義input類型，它可以被用來驗證用戶的輸入，方法是將用戶限制在某個特定的輸入表單上。</p><p>　　除了以前的input類型之外(例如text, password, submit, reset, radio, checkbox, button, hidden)，HTML5還添加了新的語義input類型：</p><p>　　email,</p><p>　　tel,</p><p>　　url,</p><p>　　number,</p><p>　　time,</p><p>　　date,</p><p>　　datetime,</p><p>　　datetime-local, month,</p><p>　　week, range, search,</p><p>　　color.</p><p>　　現(xiàn)在我們來看一下如果一個用戶輸入了錯誤的數(shù)據(jù)類型會發(fā)生什么。加入我們已經(jīng)創(chuàng)建了一個電子郵件輸入框，代碼如下：</p><pre><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></pre><p>　　如果用戶輸入了一串不符合電子郵件格式的字符串，限制驗證算法就會阻止表單的提交，并且返回一個錯誤提示：</p><center><p><img src="/upload/otherpic25/16850.jpg" alt="HTML5中限制驗證的示例分析"></p></center><p>　　這個規(guī)則也適用于其他的input類型，例如如果你使用了type=“url”，用戶將智能提交URL格式的字符串(以協(xié)議開頭，例如http://或是ftp://)。</p><p>　　還有一些input類型使用了特殊的設(shè)計，它們甚至不允許用戶輸入錯誤的輸入格式，例如color和range。</p><pre> <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></pre><p>　　如果使用了color這個input類型，用戶只能在顏色選擇器中選擇顏色，或者使用默認(rèn)的黑色。由于這個輸入框在最初設(shè)計時就添加了嚴(yán)格的限制，因此用戶基本不可能輸入錯誤數(shù)據(jù)。</p><center><p><img src="/upload/otherpic25/16851.jpg" alt="HTML5中限制驗證的示例分析"></p></center><p>　　在合適的時候，你也可以考慮使用HTML的<select>標(biāo)簽，它的作用與上面那個input類型相似；它會讓用戶在下拉菜單中進(jìn)行選擇。</p><pre><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></pre><center><p><img src="/upload/otherpic25/16852.jpg" alt="HTML5中限制驗證的示例分析"></p></center><p><strong>使用HTML的驗證屬性</strong></p><p>　　使用語義input類型，可以限制用戶所提交的數(shù)據(jù)類型，但是在很多時候，這樣還不夠。在這個時候，<input>標(biāo)簽的驗證相關(guān)屬性可以為我們提供幫助。</p><p>　　驗證相關(guān)屬性應(yīng)用于某些特定的input類型(并非所有類型都可以使用)，這些屬性可以設(shè)定更加嚴(yán)格的限制。</p><p><strong>1. 強制用戶必須提交有效數(shù)據(jù)：</strong></p><p>　　required是HTML中最廣為人知的驗證屬性。它是一種布爾值屬性，也就是說，它不需要包含任何值，在需要的時候，我們只需要把它放我們只需要把它放在<input>標(biāo)簽里就好了。</p><p>　　<input type="email" name="email" id="youremail" required></p><p>　　當(dāng)我們給一個輸入框賦予required屬性之后，如果用戶遺漏了這個輸入框，瀏覽器會返回一個提示信息，提醒用戶在該輸入框內(nèi)輸入有效數(shù)據(jù)，否則表單無法成功提交。因此，在使用了required屬性之后，我們需要給該輸入框配上醒目的提示符號。</p><p>　　required屬性可以與下列input類型搭配使用：text, search, url, tel, email, password, date, datetime, datetime-local, month, week,</p><p>time, number, checkbox, radio, file。還有<textarea>和<select>這兩個HTML標(biāo)簽。　</p><p>　　要注意的是，maxlength這個屬性無法返回錯誤提示，但是當(dāng)用戶輸入的長度超過限制的時候，瀏覽器會阻止用戶繼續(xù)輸入。因此，在使用它的時候，你一定要用醒目的文字向用戶提示輸入長度限制，以免用戶不知道自己為何無法繼續(xù)輸入。</p><blockquote><p><strong>2. min, max和step：數(shù)字驗證</strong></p><p>min, max和step讓我們可以對數(shù)字輸入框添加限制。它們可以與range, number, date, month, week, datetime, datetime-local和time這些input類型搭配使用。</p><p>min和max屬性讓我們可以輕松的排除那些不合理的數(shù)據(jù)。例如下面的這段代碼，這是用于年齡驗證的一段代碼：</p><pre> <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></pre><p>當(dāng)限制驗證算法發(fā)現(xiàn)用戶輸入的數(shù)字大于max的值，或是小于min的值的時候，它就會阻止用戶的輸入進(jìn)入后端，并且在瀏覽器中返回一個錯誤提升。</p><p>step這個屬性規(guī)定了用戶只能按照等差數(shù)列的方式輸入數(shù)字。例如，如果你想讓用戶選擇閏年，給輸入框添加step=“4”這個屬性值，那么用戶只能輸入差值為4的倍數(shù)的數(shù)字。在下面的例子中，我使用了number這個input類型，因為HTML5中沒有type=“year”這個類型。</p><pre> <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></pre><p>使用了這個限制，用戶只能選擇1972-2016年這個區(qū)間內(nèi)的閏年。如果用戶輸入的年份并非閏年（差值不是4的倍數(shù)），那么瀏覽器就會返回一個錯誤提示。</p><p><img src="/upload/otherpic25/16854.jpg" alt="HTML5中限制驗證的示例分析"></p><p><strong>3. maxlength：文本長度驗證</strong></p><p>maxlength這個屬性，讓我們可以定義輸入框的大字符限制。它可以與text, search, url, tel, email和password這些input類型以及<textarea>這個HTML標(biāo)簽搭配使用。</p><p>maxlength非常適合使用在電話號碼輸入框上，因為電話號碼的長度是固定的，不能超過某個特定的長度。</p><p>當(dāng)我們想要限定用戶的輸入文本長度的時候，也可以使用這個屬性。例如下面這段腳本，它將用戶的輸入長度限制在500個字符以內(nèi)：</p><pre> <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">   

　4. pattern：Regex驗證

　　pattern這個屬性允許我們在驗證過程中使用 正則表達(dá)式(Regular Expressions)。正則表達(dá)式是一套預(yù)先定義好的字符，它符合某個特定的模式。我們可以使用它來檢索符合這個模式的字符串，也可以用它來加強這個模式所定義的特定格式。

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

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

 

  * Your Password:

  

  

如果你能讀到這里，小編希望你對“HTML5中限制驗證的示例分析”這一關(guān)鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領(lǐng)會，如果想閱讀更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道！

另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務(wù)器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國服務(wù)器、虛擬主機、免備案服務(wù)器”等云主機租用服務(wù)以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務(wù)可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應(yīng)用場景需求。

當(dāng)前名稱：HTML5中限制驗證的示例分析-創(chuàng)新互聯(lián)
本文鏈接：http://weahome.cn/article/dosjde.html