HTML5 表单验证的oninvalid事件

定制校验规则

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

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


HTML DOM oninvalid事件(input元素内的值为无效值时触发的事件)

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

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

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


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



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

你可能感兴趣的:(HTML5学习笔记)