HTML5中表单验证
2014-03-30 15:23
309 查看
(推荐链接)精通h5编程:http://www.html5zhan.com/jingyanSubjectList/detail/531eab4c2e05e82568b33dc1
一、 自动验证
在HTML 5中,通过对元素使用属性的方法,可以实现在表单提交时执行自动验证的功能。执行示例1后,将在表单提交时自动验证输入的内容是否为数字,如果验证通不过,将显示错误信息文字。示例1:
折叠XML/HTML 代码复制内容到剪贴板
?
1.required属性
HTML 5中新增的required属性可以应用在大多数输入元素上(除了隐藏元素、图片元素按钮上)。在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字,提示用户这个元素中必须输入内容。
2.pattern属性
之前提到的一些新增的input元素,譬如email、number、url等,要求输入内容符合一定的格式,对input元素使用pattern 属性,并且将属性值设为某个格式的正则表达式,在提交时会检查其内容是否符合给定格式。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示 信息提示文字,提示输入的内容必须符合给定格式。譬如下面所示,要求输入内容为一个数字与三个大写字母。
折叠XML/HTML 代码复制内容到剪贴板
?
min与max这两个属性是数值类型或日期类型的input元素的专用属性,它们限制了在input元素中输入的数值与日期的范围。
4.step属性
step属性控制input元素中的值增加或减少时的步幅。例如当你想让用户输入的值在0与100之间,但必须是5的倍数时,你可以指定step为5。
二、显式验证
除了对inut元素添加属性进行元素内容有效性的自动验证外,在HTML 5中,form元素与input元素(包括select元素与textarea元素)都具有一个checkValidity方法。调用该方法,可以显式地 对表单内所有元素内容或单个元素内容进行有效性验证。checkValidity方法以boolean的形式返回验证结果。请看示例2中的示例。示例2:
折叠XML/HTML 代码复制内容到剪贴板
?
最重要的属性为valid属性,它表示了表单内所有元素内容是否有效或单个input元素内容是否有效。
三、取消验证
有时我们可能想要把表单临时提交一下,但又不想让它进行表单中所有元素内容的有效性检查。譬如,一个非常大的表单需要分成两部分(或几部分),在第 二部分中有个文本框中内容是必须要填的,如果填每一部分内容则会耗时较多,或填完第一部分之后,第二部分要过一段时间再填,在这种情况下应该允许用户先提 交保存第一部分内容,但是同时需要临时取消第二部分的内容表单验证。有两种方法取消表单验证,第一种方法是利用form元素的novalidate属性,它可以关闭整个表单验证。当整个表单的第二部分需要验证的内容 比较多,但又想先提交表单的第一部分内容时,可以使用这种方法。先把该属性设为true,关闭表单验证,提交第一部分内容,然后在提交第二部分时再把它设 为false,打开表单验证,提交第二部分内容。
第二种方法是利用input元素或submit元素的formnovalidate属性,利用input元素的formnovalidate属性可 以让表单验证对单个input元素失效,在前面所举例子中,当表单的第二部分中需要验证的元素数量很少时,可以只利用这些元素的 formnovalidate属性,让表单验证对这些元素失效。
而如果对submit按钮使用了formnovalidate属性,点击该按钮时,相当于利用了form元素的novalidate属性,整个表单验证都失效了。
利用这一点,可以实现“假提交”与“真提交”的效果,例如一个提交按钮,不带表单验证,提交时不进行数据有效性检查,提交时临时保存到文件或什么地方,另一个提交按钮为真提交,提交后保存到数据库中。
HTML 5中许多新的input元素都带有对于输入内容的有效性的检查,如果检查不通过,浏览器会针对该元素提供错误信息。但有时开发者不想使用这些默认的错误信 息提示,而想使用自己定义的错误信息提示。或者有时,想给某个文本框增加一种错误信息提示,譬如密码与确认密码不一致时用浏览器错误信息提示方式提供关于 密码不一致的错误信息。
在HTML 5中,可以使用JavaScript调用各input元素的setCustomValidity方法来自定义错误信息。请看示例3中的示例。
示例3:
折叠XML/HTML 代码复制内容到剪贴板
?
Opera是目前唯一支持自定义错误信息提示的浏览器。对于“值***不允许页面上的脚本使用!”这个前缀文字,也是该浏览器加在前面的,不能修改。所以,请小心使用自定义错误信息提示。
文章地址:html5经验学习教程 http://www.html5zhan.com/jingyan/info/5306cdab2e05e80fece3d255
相关文章推荐
- 如何禁用HTML5自带的表单验证功能
- [转]让你的表单升级到CSS3和HTML5客户端验证
- HTML5验证表单内容是否为空
- 【技术】基于jQuery/HTML5表单验证(可下载代码)
- HTML5表单及其验证
- HTML5表单自动验证
- HTML5表单及其验证
- HTML5 表单验证
- 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
- HTML5表单验证特性
- HTML5入门----表单验证及实例
- html5 表单样式 表单验证1 2 3
- HTML5表单教程之4种自动验证属性
- HTML5内置表单验证 Build-in Form Validation
- HTML5表单信息验证工作原理
- 【HTML5初探之form标签】解放表单验证、增加文件上传、集成拖放
- HTML5中表单验证的8种方法
- js浏览器html5表单验证
- HTML5中表单验证的8种方法
- html5 JavaScript表单验证实现方法