MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » HTML5 表单应验

HTML5 表单应验

www.MyException.Cn  网友分享于:2013-09-09  浏览:4次
HTML5 表单验证

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>

 

 

文章评论

看13位CEO、创始人和高管如何提高工作效率
看13位CEO、创始人和高管如何提高工作效率
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
鲜为人知的编程真相
鲜为人知的编程真相
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
程序员和编码员之间的区别
程序员和编码员之间的区别
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
程序员都该阅读的书
程序员都该阅读的书
编程语言是女人
编程语言是女人
程序猿的崛起——Growth Hacker
程序猿的崛起——Growth Hacker
我的丈夫是个程序员
我的丈夫是个程序员
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
为什么程序员都是夜猫子
为什么程序员都是夜猫子
一个程序员的时间管理
一个程序员的时间管理
每天工作4小时的程序员
每天工作4小时的程序员
如何成为一名黑客
如何成为一名黑客
旅行,写作,编程
旅行,写作,编程
我是如何打败拖延症的
我是如何打败拖延症的
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
总结2014中国互联网十大段子
总结2014中国互联网十大段子
那些争议最大的编程观点
那些争议最大的编程观点
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
程序员的一天:一寸光阴一寸金
程序员的一天:一寸光阴一寸金
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序员应该关注的一些事儿
程序员应该关注的一些事儿
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
代码女神横空出世
代码女神横空出世
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
中美印日四国程序员比较
中美印日四国程序员比较
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
10个调试和排错的小建议
10个调试和排错的小建议
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有