HTML5提供网站制作的表单验证属性

148

HTML5为网站制作时的表单验证提供了极大的方便，在验证表单的方式上显得更加灵活。表单验证，首先会基于前面讲解的表单类型的规则进行验证；其次是为表单元素提供了一些用于辅助表单验证的属性。
一． required属性
一旦在某个表单元素标签中添加了required属性，则该表单元素的值不能为空，否则无法提交表单。以文本域为例，只需要添加required属性即可。使用方法如下。
<input type="text" id="uname" name="uname" placeholder="请输入用户名" required>
如果该文本域为空，则无法提交。required属性可用于大多数输入或选择元素，隐藏的元素除外。
二． pattern属性
pattern属性用于为input元素定义一个验证模式。该属性值是一个正则表达式，提交时，会检查输入的内容是否符合给定的格式，如果输入内容不符合格式，则不能提交。使用方法如下。
<input type="text" id="code" name="code" value="" placeholder="6位邮政编码" pattern="[0-9]{6}">
使用pattern属性验证表单非常灵活。例如，前面讲到的email类型的input元素，使用pattern属性完全可以实现相同的验证功能。
三． min、max和step属性
min、max和step属性专门用于指定针对数字或日期限制。min属性表示允许的最小值；max属性表示允许的最大值；step属性表示合法数据的间隔步长。使用方法如下。
<input type="range" name="volume" id="volume" min="0" max="1" step="0.2">
在该HTML代码中，最小值是0，最大值是1，步长为0.2，合法的取值有0、0.2、0.4、0.6、0.8和1。
四． novalidate属性
novalidate属性用于指定表单或表单内的元素在提交时不进行验证。如果在<form>标签中应用novalidate属性，则表单中的所有元素在提交时都不再验证。使用方法如下。
<form id="form1" name="form1" method="post" novalidate="novalidate">
<input type="email" id="umail" name="umail" placeholder="请输入电子邮箱">
<input type="submit" value="提交">
</form>
则提交该表单时，不会对表单中的表单元素进行验证。
实战验证网页中的表单元素
最终文件：最终文件\第5章\5-5-4.html 视频：视频\第5章\5-5-4.mp4
01 打开页面“源文件\第5章\5-5-4.html”，可以看到页面效果，如图5-50所示。切换到代码视图，可以看到页面中表单部分的HTML代码，如图5-51所示。