当前位置:Gxlcms > html代码 > html5的setCustomValidity的详细介绍

html5的setCustomValidity的详细介绍

时间:2021-07-01 10:21:17 帮助过:454人阅读

1. 默认提示

html5丰富了表单验证,例如:

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

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

注意:
以上属性值是只读的,手动修改是无效的。

其中,取消自定义提示的方式如下:

setCustomValidity('') setCustomValidity(null) setCustomValidity(undefined)

例子:

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

或者:

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

以上就是 html5的setCustomValidity的详细介绍的详细内容,更多请关注Gxl网其它相关文章!

人气教程排行