欧美vvv,亚洲第一成人在线,亚洲成人欧美日韩在线观看,日本猛少妇猛色XXXXX猛叫

有如下HTML結(jié)構(gòu)：

當(dāng)提交的信息出錯(cuò)的時(shí)候表單驗(yàn)證提示錯(cuò)誤信息，默認(rèn)的HTML5提示是：

“請(qǐng)?zhí)顚懘俗侄巍?-- 沒有填寫內(nèi)容，違反了 “必填”要求

“請(qǐng)匹配要求的格式” -- 內(nèi)容不合法，違反了 的正則要求。

如何修改錯(cuò)誤提示信息呢？

HTML5為所有表單元素添加了一個(gè)JS屬性：input. “有效，合法性” ，并且添加了個(gè)事件 “出錯(cuò)事件，內(nèi)容無效事件”。

注：不同于 事件， 事件會(huì)在文檔或圖像加載過程中發(fā)生錯(cuò)誤時(shí)被觸發(fā)。

我們可以利用input標(biāo)簽的事件，輸出 input. 看看。

  var myinput  = document.querySelector("#myinput");
    function  invalidFun(e){
        var tag = e.target ; // input標(biāo)簽
        console.info(tag.validity); 
    }
    
    // invalid  輸入內(nèi)容錯(cuò)誤事件。包括，為空，格式錯(cuò)誤等
    myinput.addEventListener("invalid" ,invalidFun,false);

valid: false //當(dāng)前輸入是否有效

: false //輸入無效，如框輸入abc

: false //正則表達(dá)式驗(yàn)證失敗

:false //輸入值超過max的限定

: false //輸入值小于min的限定

: false //輸入的字符數(shù)超過

:false //輸入的字符數(shù)小于

: false //輸入的數(shù)字不符合step限制

: false //輸入值不符合email、url的驗(yàn)證

: false //未輸入值，違反了要求

:false //是否存在自定義錯(cuò)誤

上述屬性值的特性：

(1)只要有一個(gè)驗(yàn)證方面錯(cuò)誤，某個(gè)屬性就為true，valid值為false

(2)只有沒有任何驗(yàn)證錯(cuò)誤，所有的屬性都為false，valid才能為true

(3)上述的每個(gè)錯(cuò)誤在瀏覽器內(nèi)部都有一個(gè)預(yù)定義的錯(cuò)誤提示消息

(4)所有的錯(cuò)誤消息中，只要存在“自定義的錯(cuò)誤消息”，瀏覽器只顯示自定義的錯(cuò)誤消息，優(yōu)先級(jí)高于瀏覽器預(yù)定義的錯(cuò)誤消息

(5)當(dāng)前沒有自定義錯(cuò)誤消息，所以:false

如果要自定義錯(cuò)誤信息，可以判斷錯(cuò)誤的類型：

 var myinput  = document.querySelector("#myinput");
    function  invalidFun(e){
        var tag = e.target ; // 標(biāo)簽
        console.info(tag.validity);
        if( tag.validity.valueMissing ){
            myinput.setCustomValidity("內(nèi)容必須要填哦");
        }else if( tag.validity.patternMismatch ){
            myinput.setCustomValidity("格式不正確！請(qǐng)輸入合法的三位數(shù)。");
        }else{
            myinput.setCustomValidity("其他錯(cuò)誤");
        }
    }
    // invalid  輸入內(nèi)容錯(cuò)誤事件。包括，為空，格式錯(cuò)誤等
    myinput.addEventListener("invalid" ,invalidFun,false);

設(shè)置自定義錯(cuò)誤消息的方法：

input.('錯(cuò)誤提示消息');//這個(gè)相當(dāng)于將input..:true

但是，當(dāng)表單元素沒有錯(cuò)誤的時(shí)候，需要取消自定義錯(cuò)誤消息，否則表單無法提交：

input.(""); //這個(gè)相當(dāng)于將input..:false

var myinput  = document.querySelector("#myinput");
    function  invalidFun(e){
        var tag = e.target ; // 標(biāo)簽
        console.info(tag.validity);
        if( tag.validity.valueMissing ){
            myinput.setCustomValidity("內(nèi)容必須要填哦");
        }else if( tag.validity.patternMismatch ){
            myinput.setCustomValidity("格式不正確！請(qǐng)輸入合法的三位數(shù)。");
        }else{
            myinput.setCustomValidity("其他錯(cuò)誤");
        }
    }
    // invalid  輸入內(nèi)容錯(cuò)誤事件。包括，為空，格式錯(cuò)誤等
    myinput.addEventListener("invalid" ,invalidFun,false);
    // 輸入的時(shí)候沒有錯(cuò)誤了，就要取消自定義錯(cuò)誤提示，否則無法提交表單
    function  validFun(e){
        var tag = e.target ; // 標(biāo)簽
        console.info(tag.validity);
        myinput.setCustomValidity("");
    }
    myinput.addEventListener("input" ,validFun,false);

表單提交后，發(fā)生事件順序如下：

（1）按鈕的click事件，若取消默認(rèn)事件表單驗(yàn)證提示錯(cuò)誤信息，則終止

（2）html5表單驗(yàn)證和提示，若表單驗(yàn)證不通過，則提示第一個(gè)不合法輸入，并終止

（3）form表單的事件，若取消默認(rèn)事件，則終止

所以，可以看到HTML5自帶的驗(yàn)證，發(fā)生在表單的事件之前。