在以前，客户端校验只能通过JavaScript来完成，不过HTML5的出现，改变了这种现状，HTML5为表单控件增加了一些输入校验属性。HTML5页面只要简单地设置这些校验属性即可完成客户端校验。

1.使用校验属性执行校验

HTML5为表单控件添加了如下几个校验属性。

required：指定表单控件必须填写。
pattern：指定表单控件的值必须符合指定的正则表达式。
min、max、step：这3个属性只对数值类型、日期类型的input元素有效，这3个属性控制表单控件的值在min到max之间，并且按照step来增长。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 通过属性进行校验 </title>
</head>
<body>
<form action="add" method="post">
	图书名：<input name="name" type="text" required/><p>
	图书ISBN：<input name="isbn" type="text"
		required pattern="\d{3}-\d-\d{3}-\d{5}"/><p>
	图书价格：<input name="price" type="number" 
		min="20" max="150" step="5"/><p>
	<input type="submit" value="提交"/>
</form>
</body>
</html>

上面代码表示：图书名对应胡表单要求必须填写，图书ISBN对应胡表单控件不仅庶填写还需要符合正则表达式，图书价格则必须必须20-150之间而且必须是5的倍数。

2.调用checkValidity方法进行校验

如果我们想使用对话框来去弹出错误提示，或者有其他校验要求，则可借助HTML5为表单控件提供的checkValidity()方法进行校验。

如果调用checkValidity()方法返回true，则表示表单内的所有元素的输入都有效。只要任意有表单元素不能通过校验，则会返回false。
如果调用checkValidity()方法返回true，则表示表单内的所有表单元素可以通过输入校验，否则返回false。

例如，如下代码使用了checkValidity()方法执行输入校验：

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 通过checkValidity进行校验 </title>
</head>
<body>
<form action="add" method="post">
	生日：<input id="birth" name="birth" type="date"/><p>
	邮件地址：<input id="email" name="email" type="email"/><p>
	<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>

如果我们输入的邮件地址不符合规则，当用户点击页面上的提交按钮时，将可以看到如下对话框。

3.自定义错误提示

在默认情况下，HTML5要求每个浏览器为每个校验规则都提供相应的错误提示，这些错误信息都是固定的。但在有些情况下，还是希望有自定义的错误提示，而不是显示默认的提示信息，则可以借助HTML5的setCustomValidity()方法来实现，该方法需要接收一个字符串参数，来作为提示。

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 通过属性进行校验 </title>
</head>
<body>
<form action="add" method="post">
	图书名：<input id="name" name="name" type="text" required/><p>
	图书ISBN：<input id="isbn" name="isbn" type="text"
		required pattern="\d{3}-\d-\d{3}-\d{5}"/><p>
	图书价格：<input id="price" name="price" type="number" 
		min="20" max="150" step="5"/><p>
	<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()方法改变提示错误之后，必须刷新浏览器才会生效。

4.关闭校验

在特定的情况下，如果想关闭HTML5的输入校验，则可以通过下面两种方法实现。

为form元素增加novalidate属性，该属性是一个支持boolean类型的属性。
为type=sumbit的<input>或<button>元素设置formnovalidate属性。

第一种方式将会直接关闭表单的输入校验功能，无论通过哪个按钮，都不会执行校验。第二种是由指定的提交按钮来关闭表单的输入校验，只有我们指定了formnovalidate属性才会关闭表单的输入校验。示例如下：

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 关闭校验 </title>
</head>
<body>
<form action="add" method="post">
	图书名：<input name="name" type="text" required/><p>
	图书ISBN：<input name="isbn" type="text"
		required pattern="\d{3}-\d-\d{3}-\d{5}" /><p>
	图书价格：<input name="price" type="number" 
		min="20" max="150" step="5"/><p>
	<input type="submit" value="不校验提交" formnovalidate/>
	<input type="submit" value="校验提交"/>
</form>
</body>
</html>

小提示：虽然novalidate和formnovalidate两个属性都支持boolean类型，但如果在页面将它们设置为false,并不能重新启用输入校验。

----------------------人只要不失去方向，就不会失去自己！人生重要的不是所站的位置，而是所朝的方向。---------------------

HTML5新增的客户端校验，你跟上HTML5时代前进的脚步了吗？

1.使用校验属性执行校验

2.调用checkValidity方法进行校验

3.自定义错误提示

4.关闭校验

猜你喜欢