定制校验规则
<input type="text" pattern="[a-zA-Z]+">
但是浏览器会显示通用的错误报告
好在可以用JavaScript添加自己定制的校验消息,只要把它加到oninvalid监听器上就行了
HTML DOM oninvalid事件(input元素内的值为无效值时触发的事件)
提交的input元素的值为无效值时,触发oninvalid事件。
例如:input元素设置了required属性,但是提交时该处为空就会触发oninvalid事件。
HTML5对表单元素提供了pattern属性,它接受一个正则表达式。表单提交时这个正则表达式会被用于验证表单内非空的值,如果控件的值不匹配这个正则表达就会弹出提示框,并阻止表达提交。提示框内的文字可以使用setCustomValidity方法来自定义。
语法 | |
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,和本地系统语言无关。