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

旧城等待， 2022-05-12 09:28 270阅读 0赞

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

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

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

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

上面代码表示：图书名对应胡表单要求必须填写，图书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>

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

![70][]

# 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的输入校验，则可以通过下面两种方法实现。

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

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

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

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

[70]: /images/20220512/2c88365cf7ed4de394cf6f70509ad249.png