本文摘自PHP中文网，作者黄舟，侵删。
1. 默认提示
html5丰富了表单验证，例如：
1 2 3 | <form>
<input type=text required />
<input type=submit></form>
|
如果text中没有输入内容，点击提交按钮，会提示“请填写此字段。”
事件顺序如下：
（1）submit按钮的click事件，若取消默认事件，则终止
（2）html5表单验证和提示，若表单验证不通过，则提示第一个不合法输入，并终止
（3）form表单的submit事件，若取消默认事件，则终止
注意：
用js触发form的submit事件，会直接进入第（3）步，不会进行html5表单验证。
所以，要想出现html5的验证提示，必须经过submit按钮。
2. 自定义提示
使用setCustomValidity设置了自定义提示后，
validity.customError就会变成true，则checkValidity总是会返回false。
而且，表单验证是根据checkValidity来决定是否提示的。
所以，应该使用validity的以下属性来设置和取消自定义提示：
1 2 | badInput，customError，patternMismatch，rangeOverflow，rangeUnderflow，stepMismatch，tooLong，
typeMismatch，valid，valueMissing
|
注意：
以上属性值是只读的，手动修改是无效的。
其中，取消自定义提示的方式如下：
1 | setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)
|
例子：
1 2 3 4 5 6 7 8 9 10 | <form>
<input id=text1 type=text required />
<input id=submit1 type=submit></form><script>
document.querySelector('#submit1').addEventListener('click',function(){
var $text1= document.querySelector('#text1');
$text1.validity.valueMissing
?$text1.setCustomValidity('The value can\'t be empty.')
: $text1.setCustomValidity('');
},false);</script>
|
或者：
1 2 3 4 | $text1.setCustomValidity((function(){
if($text1.validity.valueMissing){
return 'The value can\'t be empty.';
} //不写return或者写“return;”表示“return undefined;”}()));
|
3. 验证成功后ajax提交
考虑到事件顺序，form的submit事件中只有在表单验证通过后才会触发。
所以，可以在form的submit事件中，通过取消默认行为，用ajax提交数据。
例子：
1 2 3 4 | document.querySelector('#form1').addEventListener('submit',function(e){ //ajax
e.preventDefault();
},false);
|
以上就是 html5的setCustomValidity的详细介绍的详细内容，更多文章请关注木庄网络博客！
相关阅读 >>
HTML5离线存储和cookie储存分析
介绍HTML5+canvas调用手机拍照功能实现图片上传（下篇）
HTML5 css 需不需要js
HTML5 canvas画布详解（二）
h5设计时的小技巧总结
HTML5对手机页面长按会粘贴复制禁用的解决方法
HTML5如何实现文件异步上传功能的实例分析
通过HTML5中的canvas来绘制一个圆环形进度条
HTML5实践-使用css3如何完成google涂鸦动画的详解
HTML5实现把上传的图片转成base64编码在显示（代码实例）
更多相关阅读请进入《HTML5》频道 >>
人民邮电出版社
本书对 Vue.js 3 技术细节的分析非常可靠，对于需要深入理解 Vue.js 3 的用户会有很大的帮助。——尤雨溪，Vue.js作者
转载请注明出处：木庄网络博客 » html5的setCustomValidity的详细介绍
