首頁  >  文章  >  web前端  >  詳解HTML5的限制驗證

詳解HTML5的限制驗證

巴扎黑
巴扎黑原創
2017-05-27 10:57:402974瀏覽

  如果沒有可以與使用者進行連接,並且保存所需資料的表單,互動式網站和程式就無從談起。不錯,我們的確需要有效的使用者輸入,但是我們要用一種不會讓使用者感到厭煩的方式來取得它。

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

  在這篇文章中,我們將會專注於瀏覽器所提供的限制驗證,並且討論一下前端開發者們如何使用HTML5來獲得有效的用戶輸入。

  為何需要前端輸入驗證

#  使用輸入驗證,主要有兩個目的。我們想要的內容,需要:

  1. 實用

  我們需要的是可用資料。我們需要使用者在正確的表單中提交切實可行的資料。例如,今天不可能有200年前出生的人還活著。一開始獲得這樣的數據,你可能會覺得很有趣。但是一段時間之後,這樣的無效資料會讓你覺得厭煩,資料庫也會被大量無效資料充斥。

  2. 安全性

  這裡所說的安全性,就是要防止惡意內容的注入-無論是使用者的故意行為還是無意行為。

  資料的實用性(獲得合理的資料),這一點只能靠使用者的自覺,後端團隊無法為你提供太多幫助。然而,確保資料的安全性,這一點需要前端團隊和後端團隊緊密合作。

  如果前端開發者可以妥善的驗證使用者輸入的數據,那後端團隊所面臨的共計就會少很多。駭客在攻擊網站的時候,最常用的方法之一,就是提交額外的數據,或是以錯誤的格式提交數據。開發者完全可以封鎖這樣的安全漏洞,而且是在前端就可以完成。

  在前端輸入驗證中,我們的工作就是為使用者所輸入的資料新增合理的限制條件。 HTML5的限制驗證功能就提供了我們這樣的工具。

  HTML5限制驗證

#  在HTML5出現以前,前端開發者只能使用JavaScript來驗證使用者輸入的內容,但是這個過程對開發者來說卻是痛苦不堪,常常會出現各種錯誤。為了完善用戶端的表單驗證,HTML5推出了一個限制驗證演算法,它可以運行在現代瀏覽器中,對用戶提交的資料進行有效性檢查。

  在評估資料的時候,這個演算法使用了輸入元素的與驗證相關的屬性,例如d5fd7aea971a85678ba271703566ebfd、680204f04b0c98aa3c923e36bb5ad6ed和221f08282418e2996498697df914ce4e。

  多虧了HTML5的限制驗證功能,在進行使用者資料提交驗證的時候,我們終於可以擺脫JavaScript了。

  要想進行更複雜的驗證相關任務,HTML5為我們提供了一個限制驗證JavaScript API,我們可以使用這個API來製作個人化驗證腳本。

   使用語意Input類型進行驗證

  HTML5推出了一種語意input類型,它可以用來驗證使用者的輸入,方法是將使用者限制在某個特定的輸入表單上。

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

  email,

  tel,

  url,

  number,

  time,

  date,

  datetime,

  datetime-local, month,

   , range, search.H. .

  現在我們來看看如果一個使用者輸入了錯誤的資料類型會發生什麼。加入我們已經建立了一個電子郵件輸入框,程式碼如下:

<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>
  如果使用者輸入了一串不符合電子郵件格式的字串,限制驗證演算法就會阻止表單的提交,並且回傳一個錯誤提示:

  这个规则也适用于其他的input类型,例如如果你使用了type=“url”,用户将智能提交URL格式的字符串(以协议开头,例如http://或是ftp://)。

  还有一些input类型使用了特殊的设计,它们甚至不允许用户输入错误的输入格式,例如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这个input类型,用户只能在颜色选择器中选择颜色,或者使用默认的黑色。由于这个输入框在最初设计时就添加了严格的限制,因此用户基本不可能输入错误数据。

詳解HTML5的限制驗證

  在合适的时候,你也可以考虑使用HTML的221f08282418e2996498697df914ce4e标签,它的作用与上面那个input类型相似;它会让用户在下拉菜单中进行选择。

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

詳解HTML5的限制驗證

  使用HTML的验证属性

  使用语义input类型,可以限制用户所提交的数据类型,但是在很多时候,这样还不够。在这个时候,d5fd7aea971a85678ba271703566ebfd标签的验证相关属性可以为我们提供帮助。

  验证相关属性应用于某些特定的input类型(并非所有类型都可以使用),这些属性可以设定更加严格的限制。

  1. 强制用户必须提交有效数据:

  required是HTML中最广为人知的验证属性。它是一种布尔值属性,也就是说,它不需要包含任何值,在需要的时候,我们只需要把它放我们只需要把它放在d5fd7aea971a85678ba271703566ebfd标签里就好了。

  33a1e3d5bd794eb12ad4fbe928026f29

  当我们给一个输入框赋予required属性之后,如果用户遗漏了这个输入框,浏览器会返回一个提示信息,提醒用户在该输入框内输入有效数据,否则表单无法成功提交。因此,在使用了required属性之后,我们需要给该输入框配上醒目的提示符号。

  required属性可以与下列input类型搭配使用:text, search, url, tel, email, password, date, datetime, datetime-local, month, week,

time, number, checkbox, radio, file。还有4750256ae76b6b9d804861d8f69e79d3和221f08282418e2996498697df914ce4e这两个HTML标签。 

  要注意的是,maxlength这个属性无法返回错误提示,但是当用户输入的长度超过限制的时候,浏览器会阻止用户继续输入。因此,在使用它的时候,你一定要用醒目的文字向用户提示输入长度限制,以免用户不知道自己为何无法继续输入。

2. min, max和step:数字验证

min, max和step让我们可以对数字输入框添加限制。它们可以与range, number, date, month, week, datetime, datetime-local和time这些input类型搭配使用。

min和max属性让我们可以轻松的排除那些不合理的数据。例如下面的这段代码,这是用于年龄验证的一段代码:

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

当限制验证算法发现用户输入的数字大于max的值,或是小于min的值的时候,它就会阻止用户的输入进入后端,并且在浏览器中返回一个错误提升。

step这个属性规定了用户只能按照等差数列的方式输入数字。例如,如果你想让用户选择闰年,给输入框添加step=“4”这个属性值,那么用户只能输入差值为4的倍数的数字。在下面的例子中,我使用了number这个input类型,因为HTML5中没有type=“year”这个类型。

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

使用了这个限制,用户只能选择1972-2016年这个区间内的闰年。如果用户输入的年份并非闰年(差值不是4的倍数),那么浏览器就会返回一个错误提示。

 詳解HTML5的限制驗證

3. maxlength:文本长度验证

maxlength这个属性,让我们可以定义输入框的最大字符限制。它可以与text, search, url, tel, email和password这些input类型以及4750256ae76b6b9d804861d8f69e79d3这个HTML标签搭配使用。

maxlength非常适合使用在电话号码输入框上,因为电话号码的长度是固定的,不能超过某个特定的长度。

当我们想要限定用户的输入文本长度的时候,也可以使用这个属性。例如下面这段脚本,它将用户的输入长度限制在500个字符以内:

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

  pattern这个属性允许我们在验证过程中使用 正则表达式(Regular Expressions)。正则表达式是一套预先定义好的字符,它符合某个特定的模式。我们可以使用它来检索符合这个模式的字符串,也可以用它来加强这个模式所定义的特定格式。

  使用pattern属性,我们可以完成后者——限制用户只能提交符合所给与的正则表达式的输入格式。

  下面这个例子需要用户输入最少8个字符的密码,而且字符串中必须含有至少一个字母以及至少一个数字:

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

  总结

  在这篇文章中,我们探讨了如何使用HTML5原生的限制验证算法来进行浏览器表单验证。要想穿件自定义验证监本,我们需要使用Constraint Validation API 。

以上是詳解HTML5的限制驗證的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn