在HTML 5规范以前，客户端校验只能通过JavaScript来完成，HTML 5改变了这种现状，HTML 5为表单控件额外增加了一些输入校验属性。HTML 5页面只要简单地设置这些校验属性即可完成客户端校验。
使用校验属性执行校验
HTML 5为表单控件新增了如下几个校验属性。
➢ required：该属性指定该表单控件必须填写。该属性的值必须是required或完全省略属性值。
➢ pattern：该属性指定该表单控件的值必须符合指定的正则表达式。该属性的值必须是一个合法的正则表达式。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 通过属性进行校验 </title>
</head>
<body>
<form action="add">
图书名：<input name="name" type="text" required/><br/>
图书ISBN：<input name="isbn" type="text"
required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
<input type="submit" value="提交"/>
</form>
</body>
</html>
调用checkValidity方法进行校验
前面介绍的通过校验属性执行的输入校验简单、易用，但略显“呆板”，如果开发者想使用对话框来弹出错误提示，或者有其他校验要求，则可借助于HTML 5为表单、表单控件提供的checkValidity()方法进行校验。
➢ 如果表单对象调用checkValidity()方法返回true，则表明该表单内的所有表单控件都有效。只要有任意一个表单控件不能通过输入校验，表单对象的checkValidity()方法就会返回false。
➢ 如果表单对象调用checkValidity()方法返回true，则表明该表单控件可以通过输入校验；否则返回false。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 通过checkValidity进行校验 </title>
</head>
<body>
<form action="add">
生日：<input id="birth" name="birth" type="date"/><br/>
邮件地址：<input id="email" name="email" type="email"/><br/>
<input type="submit" value="提交" onclick="return check();"/>
</form>
<script type="text/javascript">
var check = function()
{
return commonCheck("birth" , "生日" , "字段必须是有效的日期！")
&& commonCheck("email" , "邮件地址" , "字段必须符合电子邮件的格式！");
}
var commonCheck = function(field , fieldName , tip)
{
var targetEle = document.getElementById(field);
// 如果该字段的值为空
if (targetEle.value.trim() == "")
{
alert(fieldName + "字段必须填写！");
return false;
}
// 调用checkValidity()方法执行输入校验
else if(!targetEle.checkValidity())
{
alert(fieldName + tip);
return false;
}
return true;
}
</script>
</body>
</html>
自定义错误提示
在默认情况下，HTML 5要求浏览器为每个校验规则都提供相应的错误提示，这些错误提示信息是固定的。但在有些情况下，如果我们希望“定制”自己的错误提示信息，而不是显示默认的提示信息，则可以借助于HTML 5为表单控件新增的setCustomValidity()方法来实现，该方法接受一个字符串参数，该字符串将会作为用户“自定义”的错误提示。
需要指出的是，只要调用了某个表单控件的setCustomValidity()方法，就意味着该表单控件没有通过输入校验。因此只有当表单控件本身没有通过输入校验时才能调用该方法，而不是“不问青红皂白”地直接调用该方法来改变错误提示；否则可能导致本来可以通过输入校验的表单控件也变成不能通过输入校验了。
例子
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<title> 通过属性进行校验 </title>
</head>
<body>
<form action="add">
图书名：<input id="name" name="name" type="text" required/><br/>
图书ISBN：<input id="isbn" name="isbn" type="text"
required pattern="\d{3}-\d-\d{3}-\d{5}"/><br/>
图书价格：<input id="price" name="price" type="number"
min="20" max="150" step="5"/><br/>
<input type="submit" value="提交" onclick="check();"/>
</form>
<script type="text/javascript">
var check = function()
{
if(!document.getElementById("name").checkValidity())
{
document.getElementById("name").setCustomValidity("图书名是必填的！");
}
if(!document.getElementById("isbn").checkValidity())
{
document.getElementById("isbn").setCustomValidity("图书ISBN必须填写，"
+ "\n而且必须符合xxx-x-xxx-xxxxx的格式（其中x代表数字）。");
}
if(!document.getElementById("price").checkValidity())
{
document.getElementById("price").setCustomValidity("图书价格必须填写，"
+ "\n而且必须在20~150之间，且是5的倍数。");
}
};
</script>
</body>
</html>
提示
目前浏览器对于自定义错误提示的支持不是很理想，当调用了setCustomValidity()方式改变错误提示之后，即使浏览者在表单控件中输入的内容符合校验规则，浏览者也必须把页面刷新一次。
关闭校验
在某些时候，如果希望暂时关闭HTML 5对表单提供的输入校验，则可以通过如下两种方式来实现。
➢ 为<form.../>元素增加novalidate属性，该属性的值要么是novalidate，要么省略属性值。
➢ 为type="submit"的<input.../>或<button.../>元素设置formnovalidate属性，该属性的值要么是novalidate，要么省略属性值。
第一种方式将会直接关闭表单的输入校验功能，无论通过哪个按钮提交该表单，该表单都不会执行输入校验；第二种方式则由指定的提交按钮来关闭表单的输入校验，只有当用户通过指定了formnovalidate属性的按钮提交表单时才会关闭表单的输入校验。
注：本博客内容节选自李刚编著的疯狂HTML 5/CSS 3/JavaScript讲义 ，详细内容请参阅书籍。