HTML5的表单验证范例

HTML5的表单验证实例

HTML5新增加的表单验证可以大大减少你对JavaScript代码的依赖，并且进行丰富的客户端校验，下面提供两个例子。

1.HTML5客户端校验：checkValidity方法

checkValidity方法可以用于检验你的输入是否合法，合法时返回true,否则返回false。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5客户端校验：checkValidity方法</title>
</head>
<script type="text/javascript">
	var check=function()
	{
		return commonCheck("birth","生日","字段必须是有效的日期！")&&commonCheck("email","邮箱","字段必须是有效的邮箱！");
	}
	var commonCheck=function(fileid,filname,tip)
	{
		//获取目标对象
		var targetElement=document.getElementById(fileid);
		//如果目标对象为空
		if(targetElement.value.trim()=="")
		{
			alert(filname+"字段必须填写！");	
			return false;
		}
		//调用checkValidity方法执行输入校验
		else if(!targetElement.checkValidity())
		{
			alert(filname+tip);	
			return false;
		}
		return true;
	}
</script>
<body>
<form>
	生日：<input type="date" id="birth" name="birth"/><br>
    邮箱：<input type="email" id="email" name="email"/><br>
    <input type="submit" value="提交" onClick="return check();"/> 
</form>
</body>
</html>

2.自定义错误提示：setCustomValidity方法

可惜的是现在很多浏览器对此方法的支持不太完善，需要刷新页面之后才可以重新输入正确的值，否则错误提示会一直存在，请读者注意！

相信将来浏览器对HTML5的支持一定会逐步完善的。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML5客户端校验：setCustomValidity方法</title>
<script type="text/javascript">
	var checkBook=function()
	{
		if(!document.getElementById("bname").checkValidity())
		{
			document.getElementById("bname").setCustomValidity("必须输入书名！");
		}
		if(!document.getElementById("bisbn").checkValidity())
		{
			document.getElementById("bisbn").setCustomValidity("请填写合法的图书ISBN，例如：123-1-123-12345");
		}
		if(!document.getElementById("bprice").checkValidity())
		{
			document.getElementById("bprice").setCustomValidity("请填写合法的图书价格！");
		}
	}
</script>
</head>
<body>
<form>
	书名：<input id="bname" name="bname" type="text" required/><br/>
    ISBN:<input id="bisbn" name="bisbn" type="text" required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
    价格：<input id="bprice" name="bprice" type="number" max="100" min="10" step="5"/> <br/>
    <input type="submit" value="提交" onClick="checkBook();"/>
</form>
</body>
</html>

HTML5的表单验证范例

相关推荐