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

創(chuàng)新互聯(lián)專注于企業(yè)成都營(yíng)銷網(wǎng)站建設(shè)、網(wǎng)站重做改版、魏縣網(wǎng)站定制設(shè)計(jì)、自適應(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è)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為魏縣等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

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

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

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

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

1. 實(shí)用

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

2. 安全

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

　　數(shù)據(jù)的實(shí)用性(獲得合理的數(shù)據(jù))，這一點(diǎn)只能靠用戶的自覺，后端團(tuán)隊(duì)無法為你提供太多幫助。然而，保證數(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來驗(yàn)證用戶輸入的內(nèi)容，但是這個(gè)過程對(duì)于開發(fā)者來說卻是痛苦不堪，經(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來制作個(gè)性化驗(yàn)證腳本。

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

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

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

　　email,

　　tel,

　　url,

　　number,

　　time,

　　date,

　　datetime,

　　datetime-local, month,

　　week, range, search,

　　color.

　　現(xiàn)在我們來看一下如果一個(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)證屬性

　　使用語義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)證屬性。它是一種布爾值屬性，也就是說，它不需要包含任何值，在需要的時(shí)候，我們只需要把它放我們只需要把它放在<input>標(biāo)簽里就好了。

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

　　當(dāng)我們給一個(gè)輸入框賦予required屬性之后，如果用戶遺漏了這個(gè)輸入框，瀏覽器會(huì)返回一個(gè)提示信息，提醒用戶在該輸入框內(nèi)輸入有效數(shù)據(jù)，否則表單無法成功提交。因此，在使用了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)簽?！?/p>

　　要注意的是，maxlength這個(gè)屬性無法返回錯(cuò)誤提示，但是當(dāng)用戶輸入的長(zhǎng)度超過限制的時(shí)候，瀏覽器會(huì)阻止用戶繼續(xù)輸入。因此，在使用它的時(shí)候，你一定要用醒目的文字向用戶提示輸入長(zhǎng)度限制，以免用戶不知道自己為何無法繼續(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中沒有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)度是固定的，不能超過某個(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)證過程中使用 正則表達(dá)式(Regular Expressions)。正則表達(dá)式是一套預(yù)先定義好的字符，它符合某個(gè)特定的模式。我們可以使用它來檢索符合這個(gè)模式的字符串，也可以用它來加強(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-z\d]{8,}$">

  <input type="submit" value="Submit">

</form>

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

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

新聞標(biāo)題：HTML5中限制驗(yàn)證的示例分析-創(chuàng)新互聯(lián)
網(wǎng)頁地址：http://www.rwnh.cn/article14/dosjde.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供Google、企業(yè)網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、ChatGPT、營(yíng)銷型網(wǎng)站建設(shè)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)