HTML5表单属性和验证方式的示例分析

这篇文章主要介绍了HTML5表单属性和验证方式的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

在HTML5的众多变化中，表单数据合法性和有效性验证是极为重要的一部分。实践证明：大量安全问题是因为表单数据没有进行合法性和有效性验证而引起的。由于表单数据没有进行合法和有效性验证而被攻击和入侵，进而导致数据泄露和安全事故，对政府、企业和个人等都造成

了巨大的损失。

同时，也有很大一部分设计师和制作人员，由于不太会编写浏览器端的数据验证程序，也因为各种原因不太会使用网上的一些框架，导致有些产品缺少对表单数据进行合法性和有效性验证，留下了安全隐患。

鉴于此，HTML5在表单属性和验证其合法性方面进行了规范，大大地节省了浏览器端的代码量，提高了代码效率，也统一了安全问题。虽然服务器端依然需要验证，但已经有效地从两端（客户端和服务器端）中的一端解决了问题。因此，我们更愿意称之为进化，而不是变化。

下面我们将一一讲解其重要属性。正则表达式部分我们只作一些常用的内容过滤介绍，有兴趣的读者可以深入研究一下。

(1) 必填项属性required。防空白提交的写法可以是

<input type=text required>

或者

<input type=text required=yes>

(2) 占位属性placeholder，即还未输入内容的input中默认显示的占位字符。具体写法如下：

<input type=text placeholder="请输入你的姓名">

(3) 数字类型控件提供的max、min属性。

(4) 正则表达式属性pattern。正则表达式判断只能填写a～z、A～Z和0～9内的字符，具体代码如下：

<input type=text pattern=[ a-zA-Z0-9]>

(5) data属性，可外联数据源，例如：

<select data="http://domain/数据源文件"></select>

(6) 自动完成属性autocomplete。这是一个双向属性，它开启时可以帮助用户尽快完成表单填写，关闭后又可以防止泄露个人隐私数据。如果希望替用户在第二次填写表单时能够快速填写完单，节省时间，则可以设定autocomplete 的值为on。

具体写法如下：

<input type="text" name="name" autocomplete="on" >

如果希望整个表单都能够自动完成，则可以这样写：

<form action=" " method=" " autocomplete="on">

如果不希望替用户保存电子邮件地址，则可以设定autocomplete 的值为off，用来防止恶意猜想用户信息，具体写法如下：

<input type="email" name="email" autocomplete="off" >

(7) 步长设定属性step。该属性可以限制输入的数字，step为上一个数字与下一个数字的间隔，例如：

<input type="number" max="9" min="0" step="2"/>

(8) 其他新增属性。除了上述几个属性外，还有几个新增属性，简要介绍如下。

 onerror。当发生错误时运行脚本。

 onhaschange。当发生变化时运行脚本。

 oncontextmenu。当触发上下文菜单时运行脚本。

 onformchange。当表单改变时运行脚本。

 onforminput。当表单获得用户输入时运行脚本。

 oninput。当元素获得用户输入时运行脚本。

 oninvalid。当元素无效时运行脚本。

感谢你能够认真阅读完这篇文章，希望小编分享的“HTML5表单属性和验证方式的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!