HTML5中,在增加了大量的表单元素与属性的同时,也增加了大量在提交时对表单与表单内新增元素进行内容有效性验证的功能。
自动验证
在HTML5中,通过对元素使用属性的方法,可以实现在表单提交时执行自动验证的功能。下例将在提交时自动验证输入的内容是否为数字,若不能通过验证,将显示错误信息,表单验证示例:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>表单验证示例</title> </head> <body> <form method="post"> <input type="text" name="text" required pattern="^\w.*$"/> <input type="submit" value="提交"/> </form> </body> </html>
required属性
HTML5中新增的required属性可以应用在大多数输入元素上(除了隐藏元素、图片元素按钮上)。在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字,提示用户这个元素中必须输入内容。
pattern属性
对input元素使用该属性,并且将属性值设置为某个格式的正则表达式,在提交时会检查共内容是否符合给定格式。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字,提示输入的内容必须符合给定格式,例如:
<input type="text" pattern="[0-9][A-Z]{3}" name="part" placeholder="输入内容:一个数字与三个大写字母。"/>
min属性与max属性
这两个属性是数值类型或日期类型的input元素专用属性,它们限制了在input元素中输入的数值与日期的范围。
step属性
该属性控制input元素中的值增加或减少时的步长。
显式验证
在HTML5中,form元素与input元素(包括select与textarea元素)都具有checkValidity()方法,调用该方法可以显式的对表单内所有元素内容或单个元素内容进行有效性验证。该方法的返回类型为boolean。示例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>checkValidity 示例</title> <script type="text/javascript"> var check = function() { var emailEmnt = document.forms['testForm'].email; var emailTxt = emailEmnt.value; if(emailTxt == "") { alert("请输入E-mail地址!"); return false; } else if(!email.checkValidity()) { alert("请输入正确的E-mail地址!"); return false; } return true; } </script> </head> <body> <form id="testForm" name="testForm" onsubmit="return check();"> <label for="email">E-mail:</label> <input type="email" name="email"/> <button type="submit">提交</button> </form> </body> </html>
另外,在HTML5中,form元素与input元素还存在一个validity属性,该属性返回一个ValidityState对象,该对象具有很多属性,但最简单、最重要的属性为valid属性,它表示了表单内所有元素内容是否有效或单个input元素内容是否有效。
取消验证
有时可能想把表单临时提交一下,但又不想让它进行有效性验证。有两种方法可以取消表单验证。
第一种方法是利用form元素的novalidate属性,它可以关闭整个表单验证。当整个表单需要验证的内容较多,但又想先提交一部分内容时,可以使用该方法。先把表单的该属性设置为true,关闭表单验证,并提交第一部分内容,然后在将要提交第二部分内容时,再将该属性设置为false,打开表单验证,进行第二部分内容的提交。
第二种方法是利用input元素或submit元素的formnovalidate属性,利用input元素的formnovalidate属性可以让表单验证对单个input元素失效;而如果对submit按钮使用该属性,点击按钮时,相当于利用了form元素的novalidate属性,整个表单验证都将关闭。
利用这一点可以实现“假提交”与“真提交”的效果。
自定义错误信息
HTML5中许多新的input元素都带有对输入内容进行有效性检查的功能,如果检查不通过,浏览器会针对该元素提供错误信息。但有时开发者不想使用这些默认的错误信息提示,而想使用自定义的信息提示,或者有时想给某个文本框增加一种错误信息提示等。要实现这样的功能,可以使用JavaScript调用各input元素的setCustomValidity()方法来自定义错误信息。示例如下:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>自定义错误信息示例</title> <script type="text/javascript"> var check = function() { var passwd1 = document.forms['testForm'].passwd1; var passwd2 = document.forms['testForm'].passwd2; if(passwd1.value != passwd2.value) { passwd2.setCustomValidity("密码不一致!"); return false; } else { passwd2.setCustomValidity(""); } var email = document.forms['testForm'].email1; if(!email1.checkValidity()) { email1.setCustomValidity("请输入正确的E-mail地址!"); return false; } return true; } </script> </head> <body> <form id="testForm" name="testForm" onsubmit="return check();"> <label for="pass1">密码:</label><input type="password" name="passwd1"/><br/> <label for="pass2">确认密码:</label><input type="password" name="passwd2"/><br/> <label for="email">E-mail:</label><input type="email" name="email1"/><br/> <button type="submit">提交</button> </form> </body> </html>
发表评论
-
使用选择器在页面中插入内容
2011-11-08 10:09 0使用选择器来插入文字 使用选择器来插入内容 在CSS2中, ... -
HTML5 绘制图形【4】
2011-11-08 08:39 1666绘制变形图形 坐标变换 绘制图形的时候,我们可能会想要旋转 ... -
CSS3 选择器【2】
2011-11-07 14:30 1045UI元素状态伪类选择器 UI元素状态伪类选择器的共同特征是: ... -
HTML5 绘制图形【3】
2011-11-05 19:28 1280绘制渐变图形 渐变是指在填充时从一种颜色慢慢过渡到另外一种颜 ... -
CSS3 选择器【1】
2011-11-06 12:19 1668选择器概述 选择器是CS ... -
HTML5 绘制图形【2】
2011-11-04 11:42 1365使用路径 绘制圆形 要 ... -
HTML5 绘制图形【1】
2011-11-03 12:48 1453canvas元素基础 canvas元素是HTML5中新增的一 ... -
CSS3 模块化结构
2011-11-03 19:12 1456CSS3中的模块 模块名称 功能描述 Basi ... -
HTML5 获取地理位置信息
2011-11-01 18:12 5398Geolocation API的基本知识 在HTML5中,为 ... -
HTML5 使用Web Worker处理线程
2011-11-01 09:16 4599基础知识 Web Worker是在HTML5中新增的,用来在 ... -
HTML5 Web Sockets通信
2011-10-29 20:15 4043基础介绍 Web Sockets是HTML5提供的在Web应 ... -
HTML5 跨文档消息传输
2011-10-29 19:11 1968基本介绍 HTML5提供了在网页文档之间互相接收与发送信息的 ... -
HTML5 离线应用程序【2】
2011-10-27 20:48 1810applicationCache对象 application ... -
HTML5 离线应用程序【1】
2011-10-27 14:02 1511离线Web应用程序介绍 在HTML5中新增了一个API,为离 ... -
HTML5 本地数据库
2011-10-24 21:03 2548本地数据库的基本概念 ... -
HTML5 Web Storage
2011-10-24 15:51 1558Web Storage简单使用 在HTML5中重新提供了一种 ... -
HTML5 多媒体播放【3】
2011-10-23 10:45 1206video元素和audio元素的方法 play()方法:使 ... -
HTML5 多媒体播放【2】
2011-10-22 21:14 1714音频和视频元素的属性 这两种元素所具有的属性大致相同,介绍如 ... -
HTML5 多媒体播放【1】
2011-10-21 18:58 891video与audio元素基础 在HTML5中,video元 ... -
HTML5 拖放API
2011-10-17 19:43 4929在HTML5中,已经支持在浏览器与其他应用程序之间的数据互相拖 ...
相关推荐
HTML5表单验证,有效验证email,数字,字母,数字+字母,位数
bootstrap风格的html5表单验证示例
一个HTML5表单验证效果,本表单是验证用户输入的信用卡卡号是否正确,格式是否答,可为制作HTML5表单的朋友提供一些参考。
HTML5表单验证在Tab标签页中的应用
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5 表单的应用 例4-11 HTML5 表单验证
响应式Web开发项目教程(HTML5+CSS3+Bootstrap)第2版 第4章 HTML5 表单的应用 例4-9 HTML5 表单验证
主要为大家详细介绍了js浏览器html5表单验证,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
html5 Ajax表单验证实例,HTML5真方便,用JS实现的Ajax表单在HTMl5下更方便实现,而且还可轻易实现一个漂亮的表单界面,实属不错。
表单验证功能非常实用,今天要分享的一款HTML5登录表单验证就非常酷,表单默认只对输入的长度作验证,你也可以自己修改正则表达式来完成更复杂的表单验证。当然这款HTML5表单验证最有优势的是他的外观,不但登录表单...
当您想要从所有表单中删除HTML5表单验证时,只需按下简单按钮即可。 删除HTML5表单约束,即使存在必需的属性或其他自定义输入类型,也可以提交任何表单。 该扩展在当前页面的所有表单上都添加了novalidate属性,即使...
自己总结的一些html5表单元素以及表单验证,希望对大家有用!!
HTML5 Web Form With No JavaScript in Sight,html5表单验证 不用js表单验证
Bouncer.js 轻量级表单验证脚本,可增强本地HTML5表单验证元素和属性。 | | | | | | | | 特征: 字段在模糊时验证(当用户移出它们时),该数据显示是认知负荷的最佳时间。 整个表单在提交时经过验证。 带有错误的...
实现效果: html5客户端表单验证,客户端验证,在商城中会大量使用,当你注册会员时、客户端要对表单的数据进行验证,不符合就不发送到后端验证,html5客户端验证,php中文网推荐下载!
网页表单验证
ValidForm是HTML5表单验证功能上的薄JavaScript包装器。 它很小,只有大约200行代码(7k,5.6k压缩),并且没有依赖项。 不,没有 有关背景信息,请查看指向此模块的。 HTML5 表单验证功能非常好,但也有一些缺陷。...
html5开发
js表单验证实例,HTML文件,javascript常用表单验证: 账号、密码、身份证等
jquery_Html5验证表单,适合学习和开发来用,验证表单使用Validate.form来进行相关注册验证。
前端的童鞋在写页面时, 都不可避免的总会踩到 表单验证 这个坑. 这时候, 我们就要跪了, 因为要写一堆 js 来检查. 但是自从 H5 出现后, 很多常见的 表达验证 , 它都已经帮我们实现了, 让我们减轻了很多负担, 就好像...