当前位置:  首页  >  前端开发  >  Html5

详解HTML5的限制验证-

在这篇文章中,我们将会专注于浏览器所提供的限制验证,并且讨论一下前端开发者们如何使用HTML5来获得有效的用户输入。,HTML5中国,中国最大的HTML5中文门户。
  如果没有可以与用户进行连接,并且保存所需数据的表单,互动式网站和程序就无从谈起。不错,我们的确需要有效的用户输入,但是我们要用一种不会让用户感到厌烦的方式来获取它。

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

  在这篇文章中,我们将会专注于浏览器所提供的限制验证,并且讨论一下前端开发者们如何使用HTML5来获得有效的用户输入。

  为何需要前端输入验证

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

  1. 实用

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

  2. 安全

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

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

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

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

  HTML5限制验证

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

  在对数据进行评估的时候,这个算法使用了输入元素的与验证相关的属性,例如

  4. pattern:Regex验证

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

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

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

 

  总结

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

以上就是详解HTML5的限制验证的详细内容,更多请关注 第一PHP社区 其它相关文章!

吐了个 "CAO" !
扫码关注 PHP1 官方微信号
PHP1.CN | 中国最专业的PHP中文社区 | PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | PHP问答
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved PHP1.CN 第一PHP社区 版权所有