本文摘自PHP中文网,作者巴扎黑,侵删。
如果没有可以与用户进行连接,并且保存所需数据的表单,互动式网站和程序就无从谈起。不错,我们的确需要有效的用户输入,但是我们要用一种不会让用户感到厌烦的方式来获取它。尽管我们可以使用良好的UX设计来提高表单的可用性,但是HTML5也为我们提供了一个原生的机制来进行限制验证,它可以允许我们在前端就察觉到输入中的错误。
在这篇文章中,我们将会专注于浏览器所提供的限制验证,并且讨论一下前端开发者们如何使用HTML5来获得有效的用户输入。
为何需要前端输入验证
使用输入验证,主要有两个目的。我们所要的内容,需要:
1. 实用
我们需要的是可用数据。我们需要用户在正确的表单中提交切实可行的数据。例如,今天不可能有200年前出生的人还活着。刚一开始获得这样的数据,你可能会觉得很有意思。但是一段时间之后,这样的无效数据会让你觉得厌烦,数据库也会被大量无效数据所充斥。
2. 安全
这里所说的安全性,就是要防止恶意内容的注入――无论是用户的故意行为还是无意行为。
数据的实用性(获得合理的数据),这一点只能靠用户的自觉,后端团队无法为你提供太多帮助。然而,保证数据的安全性,这一点需要前端团队和后端团队紧密协作。
如果前端开发者可以妥善的验证用户输入的数据,那后端团队所面临的共计就会少很多。黑客在攻击站点的时候,最常用的方法之一,就是提交额外的数据,或是以错误的格式提交数据。开发者完全可以封堵这样的安全漏洞,而且是在前端就可以完成。
在前端输入验证中,我们的工作就是给用户所输入的数据添加合理的限制条件。HTML5的限制验证功能就给我们提供了这样的工具。
HTML5限制验证
在HTML5出现以前,前端开发者只能使用JavaScript来验证用户输入的内容,但是这个过程对于开发者来说却是痛苦不堪,经常会出现各种错误。为了完善用户端的表单验证,HTML5推出了一个限制验证算法,它可以运行在现代浏览器中,对用户提交的数据进行有效性检查。
在对数据进行评估的时候,这个算法使用了输入元素的与验证相关的属性,例如<input>、<textarea>和<select>。
多亏了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,
week, range, search,
color.
现在我们来看一下如果一个用户输入了错误的数据类型会发生什么。加入我们已经创建了一个电子邮件输入框,代码如下:
1 2 3 4 5 6 7 8 9 |
|
如果用户输入了一串不符合电子邮件格式的字符串,限制验证算法就会阻止表单的提交,并且返回一个错误提示:
这个规则也适用于其他的input类型,例如如果你使用了type=“url”,用户将智能提交URL格式的字符串(以协议开头,例如http://或是ftp://)。
还有一些input类型使用了特殊的设计,它们甚至不允许用户输入错误的输入格式,例如color和range。
1 2 3 4 5 6 7 8 9 |
|
如果使用了color这个input类型,用户只能在颜色选择器中选择颜色,或者使用默认的黑色。由于这个输入框在最初设计时就添加了严格的限制,因此用户基本不可能输入错误数据。
在合适的时候,你也可以考虑使用HTML的<select>标签,它的作用与上面那个input类型相似;它会让用户在下拉菜单中进行选择。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
|
使用HTML的验证属性
使用语义input类型,可以限制用户所提交的数据类型,但是在很多时候,这样还不够。在这个时候,<input>标签的验证相关属性可以为我们提供帮助。
验证相关属性应用于某些特定的input类型(并非所有类型都可以使用),这些属性可以设定更加严格的限制。
1. 强制用户必须提交有效数据:
required是HTML中最广为人知的验证属性。它是一种布尔值属性,也就是说,它不需要包含任何值,在需要的时候,我们只需要把它放我们只需要把它放在<input>标签里就好了。
<input type="email" name="email" id="youremail" required>
当我们给一个输入框赋予required属性之后,如果用户遗漏了这个输入框,浏览器会返回一个提示信息,提醒用户在该输入框内输入有效数据,否则表单无法成功提交。因此,在使用了required属性之后,我们需要给该输入框配上醒目的提示符号。
required属性可以与下列input类型搭配使用:text, search, url, tel, email, password, date, datetime, datetime-local, month, week,
time, number, checkbox, radio, file。还有<textarea>和<select>这两个HTML标签。
要注意的是,maxlength这个属性无法返回错误提示,但是当用户输入的长度超过限制的时候,浏览器会阻止用户继续输入。因此,在使用它的时候,你一定要用醒目的文字向用户提示输入长度限制,以免用户不知道自己为何无法继续输入。
2. min, max和step:数字验证
min, max和step让我们可以对数字输入框添加限制。它们可以与range, number, date, month, week, datetime, datetime-local和time这些input类型搭配使用。
min和max属性让我们可以轻松的排除那些不合理的数据。例如下面的这段代码,这是用于年龄验证的一段代码:
1
2
3
4
5
6
7
8
9
<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”这个类型。
1
2
3
4
5
6
<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的倍数),那么浏览器就会返回一个错误提示。
3. maxlength:文本长度验证
maxlength这个属性,让我们可以定义输入框的最大字符限制。它可以与text, search, url, tel, email和password这些input类型以及<textarea>这个HTML标签搭配使用。
maxlength非常适合使用在电话号码输入框上,因为电话号码的长度是固定的,不能超过某个特定的长度。
当我们想要限定用户的输入文本长度的时候,也可以使用这个属性。例如下面这段脚本,它将用户的输入长度限制在500个字符以内:
1
2
3
4
5
6
7
8
9
<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个字符的密码,而且字符串中必须含有至少一个字母以及至少一个数字:
1 2 3 4 5 6 7 8 9 10 11 |
|
总结
在这篇文章中,我们探讨了如何使用HTML5原生的限制验证算法来进行浏览器表单验证。要想穿件自定义验证监本,我们需要使用Constraint Validation API 。
以上就是详解HTML5的限制验证的详细内容,更多文章请关注木庄网络博客!
相关阅读 >>
HTML5-xmlhttprequest level 2概述详解
怎样开发优秀的HTML5游戏-迪斯尼《寻找奥兹之路》游戏技术详解(二)
更多相关阅读请进入《HTML5》频道 >>
Vue.js 设计与实现 基于Vue.js 3 深入解析Vue.js 设计细节
本书对 Vue.js 3 技术细节的分析非常可靠,对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪,Vue.js作者