html5的setCustomValidity的详细介绍-Tutorial H5-php.cn

html5的setCustomValidity的详细介绍

黄舟

Lepaskan： 2017-03-31 13:26:18

asal

6099 orang telah melayarinya

1. 默认提示

<form>
    <input type=text required />
    <input type=submit></form>

Salin selepas log masuk

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

Salin selepas log masuk

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

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

setCustomValidity(&#39;&#39;) setCustomValidity(null) setCustomValidity(undefined)

Salin selepas log masuk

例子：

<form>
    <input id=text1 type=text required />
    <input id=submit1 type=submit></form><script>
    document.querySelector(&#39;#submit1&#39;).addEventListener(&#39;click&#39;,function(){        
    var $text1= document.querySelector(&#39;#text1&#39;);

        $text1.validity.valueMissing
            ?$text1.setCustomValidity(&#39;The value can\&#39;t be empty.&#39;)
            : $text1.setCustomValidity(&#39;&#39;);
    },false);</script>

Salin selepas log masuk

或者：

$text1.setCustomValidity((function(){    
if($text1.validity.valueMissing){       
 return &#39;The value can\&#39;t be empty.&#39;;
    }    //不写return或者写“return;”表示“return undefined;”}()));

Salin selepas log masuk

3. 验证成功后ajax提交

考虑到事件顺序，form的submit事件中只有在表单验证通过后才会触发。
所以，可以在form的submit事件中，通过取消默认行为，用ajax提交数据。

例子：

document.querySelector(&#39;#form1&#39;).addEventListener(&#39;submit&#39;,function(e){    //ajax

    e.preventDefault();
},false);

Salin selepas log masuk

Atas ialah kandungan terperinci html5的setCustomValidity的详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!