HTML5中限制验证的示例分析-创新互联

本文将为大家详细介绍“HTML5中限制验证的示例分析”，内容步骤清晰详细，细节处理妥当，而小编每天都会更新不同的知识点，希望这篇“HTML5中限制验证的示例分析”能够给你意想不到的收获，请大家跟着小编的思路慢慢深入，具体内容如下，一起去收获新知识吧。

创新互联专注于企业成都营销网站建设、网站重做改版、魏县网站定制设计、自适应品牌网站建设、H5响应式网站、商城网站建设、集团公司官网建设、成都外贸网站建设、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为魏县等各大城市提供网站开发制作服务。

　　如果没有可以与用户进行连接，并且保存所需数据的表单，互动式网站和程序就无从谈起。不错，我们的确需要有效的用户输入，但是我们要用一种不会让用户感到厌烦的方式来获取它。

　　尽管我们可以使用良好的UX设计来提高表单的可用性，但是HTML5也为我们提供了一个原生的机制来进行限制验证，它可以允许我们在前端就察觉到输入中的错误。

为何需要前端输入验证

　　使用输入验证，主要有两个目的。我们所要的内容，需要：

1. 实用

　　我们需要的是可用数据。我们需要用户在正确的表单中提交切实可行的数据。例如，今天不可能有200年前出生的人还活着。刚一开始获得这样的数据，你可能会觉得很有意思。但是一段时间之后，这样的无效数据会让你觉得厌烦，数据库也会被大量无效数据所充斥。

2. 安全

　　这里所说的安全性，就是要防止恶意内容的注入——无论是用户的故意行为还是无意行为。

　　数据的实用性(获得合理的数据)，这一点只能靠用户的自觉，后端团队无法为你提供太多帮助。然而，保证数据的安全性，这一点需要前端团队和后端团队紧密协作。

　　如果前端开发者可以妥善的验证用户输入的数据，那后端团队所面临的共计就会少很多。黑客在攻击站点的时候，最常用的方法之一，就是提交额外的数据，或是以错误的格式提交数据。开发者完全可以封堵这样的安全漏洞，而且是在前端就可以完成。

　　在前端输入验证中，我们的工作就是给用户所输入的数据添加合理的限制条件。HTML5的限制验证功能就给我们提供了这样的工具。

HTML5限制验证

　　在HTML5出现以前，前端开发者只能使用JavaScript来验证用户输入的内容，但是这个过程对于开发者来说却是痛苦不堪，经常会出现各种错误。为了完善用户端的表单验证，HTML5推出了一个限制验证算法，它可以运行在现代浏览器中，对用户提交的数据进行有效性检查。

　　在对数据进行评估的时候，这个算法使用了输入元素的与验证相关的属性，例如、和<select>。</p><p>　　多亏了HTML5的限制验证功能，在进行用户数据提交验证的时候，我们终于可以摆脱JavaScript了。</p><p>　　要想进行更复杂的验证相关任务，HTML5为我们提供了一个限制验证JavaScript API，我们可以使用这个API来制作个性化验证脚本。</p><p><strong>  使用语义Input类型进行验证</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>　　现在我们来看一下如果一个用户输入了错误的数据类型会发生什么。加入我们已经创建了一个电子邮件输入框，代码如下：</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>　　这个规则也适用于其他的input类型，例如如果你使用了type=“url”，用户将智能提交URL格式的字符串(以协议开头，例如http://或是ftp://)。</p><p>　　还有一些input类型使用了特殊的设计，它们甚至不允许用户输入错误的输入格式，例如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类型，用户只能在颜色选择器中选择颜色，或者使用默认的黑色。由于这个输入框在最初设计时就添加了严格的限制，因此用户基本不可能输入错误数据。</p><center><p><img src="/upload/otherpic25/16851.jpg" alt="HTML5中限制验证的示例分析"></p></center><p>　　在合适的时候，你也可以考虑使用HTML的<select>标签，它的作用与上面那个input类型相似；它会让用户在下拉菜单中进行选择。</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类型，可以限制用户所提交的数据类型，但是在很多时候，这样还不够。在这个时候，<input>标签的验证相关属性可以为我们提供帮助。</p><p>　　验证相关属性应用于某些特定的input类型(并非所有类型都可以使用)，这些属性可以设定更加严格的限制。</p><p><strong>1. 强制用户必须提交有效数据：</strong></p><p>　　required是HTML中最广为人知的验证属性。它是一种布尔值属性，也就是说，它不需要包含任何值，在需要的时候，我们只需要把它放我们只需要把它放在<input>标签里就好了。</p><p>　　<input type="email" name="email" id="youremail" required></p><p>　　当我们给一个输入框赋予required属性之后，如果用户遗漏了这个输入框，浏览器会返回一个提示信息，提醒用户在该输入框内输入有效数据，否则表单无法成功提交。因此，在使用了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标签。　</p><p>　　要注意的是，maxlength这个属性无法返回错误提示，但是当用户输入的长度超过限制的时候，浏览器会阻止用户继续输入。因此，在使用它的时候，你一定要用醒目的文字向用户提示输入长度限制，以免用户不知道自己为何无法继续输入。</p><blockquote><p><strong>2. min, max和step：数字验证</strong></p><p>min, max和step让我们可以对数字输入框添加限制。它们可以与range, number, date, month, week, datetime, datetime-local和time这些input类型搭配使用。</p><p>min和max属性让我们可以轻松的排除那些不合理的数据。例如下面的这段代码，这是用于年龄验证的一段代码：</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>当限制验证算法发现用户输入的数字大于max的值，或是小于min的值的时候，它就会阻止用户的输入进入后端，并且在浏览器中返回一个错误提升。</p><p>step这个属性规定了用户只能按照等差数列的方式输入数字。例如，如果你想让用户选择闰年，给输入框添加step=“4”这个属性值，那么用户只能输入差值为4的倍数的数字。在下面的例子中，我使用了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年这个区间内的闰年。如果用户输入的年份并非闰年（差值不是4的倍数），那么浏览器就会返回一个错误提示。</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标签搭配使用。</p><p>maxlength非常适合使用在电话号码输入框上，因为电话号码的长度是固定的，不能超过某个特定的长度。</p><p>当我们想要限定用户的输入文本长度的时候，也可以使用这个属性。例如下面这段脚本，它将用户的输入长度限制在500个字符以内：</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这个属性允许我们在验证过程中使用 正则表达式(Regular Expressions)。正则表达式是一套预先定义好的字符，它符合某个特定的模式。我们可以使用它来检索符合这个模式的字符串，也可以用它来加强这个模式所定义的特定格式。

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

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

 

  * Your Password:

  

  

如果你能读到这里，小编希望你对“HTML5中限制验证的示例分析”这一关键问题有了从实践层面最深刻的体会，具体使用情况还需要大家自己动手实践使用过才能领会，如果想阅读更多相关内容的文章，欢迎关注创新互联成都网站设计公司行业资讯频道！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

新闻名称：HTML5中限制验证的示例分析-创新互联
标题来源：http://shouzuofang.com/article/dosjde.html