深圳公司网站制作交互式网站和应用程序如果没有表单，我们就无法想象与我们的用户联系，以及获取数据我们需要确保与他们的顺利交易。我们确实需要有效用户输入然而，我们需要以某种方式获得它不受挫我们的用户太多了。
虽然我们可以通过精心选择的ux设计模式来提高表单的可用性，但html 5也有一种本机制约束验证让我们捕捉前端的输入错误.
在这篇文章中，我们将集中讨论浏览器提供的约束验证，并研究前端开发人员如何使用HTML 5保护有效用户输入.
另读如下： 4表单设计UX提示您应该知道(与示例)
为什么我们需要前端输入验证
输入验证有两个主要目标。我们得到的内容需要：
1.有用
我们需要我们可以使用的可用数据..我们需要让人们进入正确格式的真实数据..例如，200年前没有一个活着的人出生。一开始，获取这样的数据似乎很有趣，但从长远来看，这是很烦人的，并且用无用的数据填充我们的数据库。
2.安全
当提到安全性时，这意味着我们需要防止恶意内容的注入-无论是故意的还是偶然的。
有用的(获得合理的数据)是可以实现的。仅在客户端后端团队在这件事上情不自禁。达到保安, 前端和后端开发人员需要一起工作。.
如果前端开发人员在客户端正确验证输入，则后端团队需要处理的漏洞要少得多。..黑客攻击(一个网站)通常需要提交额外数据，或错误格式的数据..开发人员可以像这样解决安全漏洞，成功地从前端战斗。
例如,本PHP安全指南建议在客户端检查我们所能做的一切。它们通过举例强调了前端输入验证的重要性，例如：输入验证在非常有限的值下最有效，例如，当某些东西必须是整数、字母数字字符串或HTTPURL时。
在前端输入验证中，我们的工作是施加合理约束用户输入。HTML 5的约束验证特性为我们提供了这样做的方法。
另读如下： HTML 5教程：使用HTML 5表单登录页面
HTML 5约束验证
在HTML 5之前，前端开发人员仅限于用JavaScript验证用户输入，这是一个繁琐且容易出错的过程。为了改进客户端表单验证，HTML 5引入了约束验证运行算法在现代浏览器中，和检查提交的输入的有效性。.
若要进行评估，该算法使用与验证相关的输入元素属性，如<input>, <textarea>，和<select>..如果您想知道约束验证是如何在浏览器中一步地进行的，请签出。这个WhatWG医生.
由于HTML 5的约束验证功能，我们可以执行所有的标准输入验证任务在客户端没有JavaScript，只使用HTML 5.
为了执行更复杂的与验证相关的任务，HTML 5向我们提供了一个约束验证JavaScriptAPI我们可以使用它来设置自定义验证脚本。
使用语义输入类型进行验证
深圳公司网站制作HTML 5已经引入了语义输入类型它除了指示用户代理元素的含义之外，还可以用于验证用户输入通过将用户限制为特定的输入格式。
除了HTML 5之前已经存在的输入类型(text, password, submit, reset, radio, checkbox, button, hidden)，我们还可以使用以下方法语义HTML 5输入类型: email,tel,url,number,time,date,datetime,datetime-local, month,week, range, search,color.
我们可以在较旧的浏览器中安全地使用HTML 5输入类型，因为它们将作为<input type="text">字段在不支持它们的浏览器中。
推荐阅读：查看HTML 5表单输入类型：日期、颜色和范围
让我们看看当用户输入错误的输入类型时会发生什么。假设我们已经使用以下代码创建了一个电子邮件输入字段：
1 2 3 4 5 | <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> |
当用户键入不使用电子邮件格式的字符串时，约束验证算法不提交表格，和返回错误消息。:
同样的规则也适用于其他输入类型，例如type="url"用户只能提交遵循URL格式的输入(从协议开始，如http://或ftp://).
某些输入类型使用的设计甚至不允许用户输入错误的输入格式，例如color和range.
1 2 3 4 5 | <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用户的输入类型被限制为从颜色选择器中选择颜色或保留默认的黑色。输入字段是受设计约束因此，它不会为用户错误留下很大的机会。
适当时，值得考虑使用<select>HTML标记，它的工作方式类似于这些受限制的按设计输入类型；它允许用户从下拉列表中进行选择。
1 2 3 4 5 6 7 8 9 10 | <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 5的验证属性
使用语义输入类型对允许用户提交的内容设置了一定的限制，但在许多情况下，我们希望更进一步。这是当验证相关属性.的.<input>泰格能帮我们解决问题。
与验证相关的属性属于某些输入类型(不能用于全)对其施加进一步限制的类型。
1. required通过各种方法获得有效的输入
这个required属性是最著名的HTML验证属性。是个布尔属性意思是没有任何价值，我们只需将它放置在<input>标记，如果我们想使用它：
1 | <input type="email" name="email" id="youremail" required> |
如果用户忘记向所需的输入字段输入值，则浏览器返回错误消息。警告他们填平这片土地，然后他们不能提交表格直到他们提供了一个有效的输入。这就是为什么总是视觉标记用户需要的字段。
这个required属性可以是与下列输入类型一起使用: text, search, url, tel, email, password, date, datetime, datetime-local, month, week,time, number, checkbox, radio, file，再加上<textarea>和<select>HTML标签。
2. min, max和step用于数字验证
这个min, max和step属性使我们能够对数字输入字段施加约束..它们可以与range, number, date, month, week, datetime, datetime-local，和time输入类型。
这个min和max属性提供了一种轻松的好方法。排除不合理数据..例如，下面的示例强制用户提交年龄在18到120之间的数据。
1 2 3 4 5 | <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> |
当约束验证算法遇到小于min，或大于max值时，它将阻止它到达后端，并返回错误消息。
这个step属性指定数字间隔。数值输入字段的法定值之间。例如，如果希望用户只从闰年中选择，则可以添加step="4"属性设置为字段。在下面的示例中，我使用了number输入类型，因为没有type="year"在HTML 5中。
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年间的闰年，只要他们使用附带的小向上箭头。number输入类型他们也可以在输入字段中手动输入一个值，但是如果它不满足约束，浏览器将返回一条错误消息。
3. maxlength用于文本长度验证
这个maxlength属性使得有可能设置最大字符长度用于文本输入字段。它可以与text, search, url, tel, email和password输入类型，并使用<textarea>HTML标签
这个maxlength属性可以是一个很好的解决方案，可以解决电话号码字段中的字符数不能超过一定数量的问题，也可以是不希望用户写入长度超过一定长度的联系人表单的最佳解决方案。
下面的代码片段显示了后者的一个示例，它将用户消息限制为500个字符。
1 2 3 4 5 6 | <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> |
这个maxlength属性不返回错误消息，但浏览器只是不允许用户输入超过指定字符号的字符。这就是为什么将约束通知用户，否则他们就不明白为什么他们不能继续打字了。
4. pattern用于Regex验证
这个pattern属性允许我们使用正则表达式在我们的输入验证过程中。正则表达式是预定义字符集形成某种模式。我们可以使用它搜索遵循模式的字符串，也可以强制执行模式定义的特定格式。
带着pattern属性，我们可以执行后一种约束用户以一种格式提交其输入的方法。匹配给定的正则表达式。.
推荐阅读：正则表达式初学者指南(Regex)
这个pattern属性有许多用例，但当我们想要使用时，它可能特别有用。验证密码字段.
下面的示例要求用户输入至少8个字符长的密码，其中至少包含一个字母和一个数字(我使用的正则表达式的来源).
1 2 3 4 5 6 | <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> |
再来几件事
深圳公司网站制作在本文中，我们了解了如何使用浏览器提供的表单验证由HTML 5的本机约束验证算法提供。为了创建自定义验证脚本，我们需要使用约束验证API这可能是完善表单验证技能的下一步。
HTML 5表单是辅助技术，所以我们不必使用aria-required ARIA属性为屏幕阅读器标记所需的输入字段。但是，添加对旧浏览器的可访问性支持仍然是有用的。也有可能选择退出约束验证通过添加novalidate属性的布尔属性。<form>元素。
