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

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

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

了巨大的损失。

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

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

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

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

或者

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

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

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

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

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

具体写法如下：

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