HTML5 表单验证的oninvalid事件

定制校验规则

<input type="text" pattern="[a-zA-Z]+">

但是浏览器会显示通用的错误报告

好在可以用JavaScript添加自己定制的校验消息，只要把它加到oninvalid监听器上就行了

提交的input元素的值为无效值时，触发oninvalid事件。

例如：input元素设置了required属性，但是提交时该处为空就会触发oninvalid事件。

HTML5对表单元素提供了pattern属性，它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值，如果控件的值不匹配这个正则表达就会弹出提示框，并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。

oninvalid事件的语法

语法
HTML文档中：	<element oninvalid="myScript">
JavaScript文档中：	object.oninvalid=function(){myScript};
JavaScript文档中,使用addEventListener()方法：	object.addEventListener("invalid", myScript); 注：IE8浏览器及之前版本不支持addEventListener()方法

<span style="font-size:18px;"><form action="#" method="get">

  <input type="text" pattern="[a-zA-Z]+"  oninvalid="setCustomValidity("Custom Message")" />

  <input type="submit" value="Submit">

</form> </span>

这样设置后，无论你使用任何支撑html5的浏览器均显示为自定义的message,和本地系统语言无关。