CSS3中也有关于表单验证的伪类，比如说能够验证成功的添加伪类:valid。效果展示如图3-23所示：图3-233.min和max属性说明：min和max用于数值类型的表单验证，限制用户输入的最大值和最小值，属性值为数字。格式：效果展示如图3-25所示：图3-25将这些验证规则对应的放置到上一节写好的表单控件中，一个表单验证提交的页面就完成了。最终界面如图3-26和图3-27所示：图3-26图3-27表单新增的验证属性可以帮助我们更快地完成表单验证工作。"/>

首页理论教育HTML5实战宝典：表单控件新增验证属性

HTML5实战宝典：表单控件新增验证属性

2023-10-28 理论教育版权反馈

【摘要】：格式：CSS3中也有关于表单验证的伪类，比如说能够验证成功的添加伪类:valid。效果展示如图3-23所示：图3-233.min和max属性说明：min和max用于数值类型的表单验证，限制用户输入的最大值和最小值，属性值为数字。格式：效果展示如图3-25所示：图3-25将这些验证规则对应的放置到上一节写好的表单控件中，一个表单验证提交的页面就完成了。最终界面如图3-26和图3-27所示：图3-26图3-27表单新增的验证属性可以帮助我们更快地完成表单验证工作。

1.required属性

说明：此属性要求该表单必须被填写，否则不能提交且浏览器会有错误提示。

格式：<input type="text”required="required">

效果展示（Chrome）如图3-22所示：

图3-22

2.pattern属性

说明：此类型为正则验证，可以完成很复杂的验证。

格式：<input type="text”pattern="^[0-9]{5}$">

CSS3中也有关于表单验证的伪类，比如说能够验证成功的添加伪类:valid。验证不成功的添加伪类:invalid。

效果展示（Chrome）如图3-23所示：

图3-23

3.min和max属性

说明：min和max用于数值类型的表单验证，限制用户输入的最大值和最小值，属性值为数字。

格式：<input type="number”max="10”min="5">

效果展示（Chrome）如图3-24所示：

(www.chuimin.cn)

图3-24

4.step属性

说明：step控制数值输入时的步幅。

格式：<input type="number”min="0”max="100”step="10">

效果展示（Chrome）如图3-25所示：

图3-25

将这些验证规则对应的放置到上一节写好的表单控件中，一个表单验证提交的页面就完成了。

如：在电话号码验证中可以使用required和placeholder、pattern等属性。

在年龄的验证中可以使用min属性、max属性、required等属性。

最终界面如图3-26和图3-27所示：

图3-26

图3-27

表单新增的验证属性可以帮助我们更快地完成表单验证工作。本书附录B中还提供了更多关于这些属性的介绍。在下一节中，我们将结合本地存储，完成完整的登录注册过程。