定义html5显示内容,[HTML] html5的 setCustomValidity

1. 默认提示

html5丰富了表单验证，例如：

如果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的以下属性来设置和取消自定义提示：

badInput，customError，patternMismatch，rangeOverflow，rangeUnderflow，stepMismatch，tooLong，typeMismatch，valid，valueMissing

注意：

以上属性值是只读的，手动修改是无效的。

其中，取消自定义提示的方式如下：

setCustomValidity('')

setCustomValidity(null)

setCustomValidity(undefined)

例子：

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);

或者：

$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提交数据。

例子：

document.querySelector('#form1').addEventListener('submit',function(e){

//ajax

e.preventDefault();

},false);