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>
时间： 2024-11-05 14:56:48