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>



郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。