lucifinilhades

浏览: 86805 次
性别:
来自: 苏州

最近访客更多访客>>

jorum

xyqck163

zhugeyixun

kuangweidoc

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

HTML5 表单验证

博客分类：

HTML5/CSS3

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>

分享到：

使用jQuery的val()方法处理表单元素值 | HTML5 表单新增元素与属性【2】

2011-10-11 07:19
浏览 9371
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 表单验证

自动验证

required属性

pattern属性

min属性与max属性

step属性

显式验证

取消验证

自定义错误信息

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

HTML5 表单验证

自动验证

required属性

pattern属性

min属性与max属性

step属性

显式验证

取消验证

自定义错误信息

评论

发表评论

相关推荐

使用选择器在页面中插入内容

HTML5 绘制图形【4】

CSS3 选择器【2】

HTML5 绘制图形【3】

CSS3 选择器【1】

HTML5 绘制图形【2】

HTML5 绘制图形【1】

CSS3 模块化结构

HTML5 获取地理位置信息

HTML5 使用Web Worker处理线程

HTML5 Web Sockets通信

HTML5 跨文档消息传输

HTML5 离线应用程序【2】

HTML5 离线应用程序【1】

HTML5 本地数据库

HTML5 Web Storage

HTML5 多媒体播放【3】

HTML5 多媒体播放【2】

HTML5 多媒体播放【1】

HTML5 拖放API

最近访客更多访客>>