天天日夜夜添_精品国产99久久久久久人裸体 _成人app在线观看_日韩色网站

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

當提交的信息出錯的時候表單驗證提示錯誤信息，默認的HTML5提示是：

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

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

如何修改錯誤提示信息呢？

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

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

我們可以利用input標簽的事件，輸出 input. 看看。

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

valid: false //當前輸入是否有效

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

: false //正則表達式驗證失敗

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

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

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

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

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

: false //輸入值不符合email、url的驗證

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

:false //是否存在自定義錯誤

上述屬性值的特性：

(1)只要有一個驗證方面錯誤，某個屬性就為true，valid值為false

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

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

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

(5)當前沒有自定義錯誤消息，所以:false

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

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

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

input.('錯誤提示消息');//這個相當于將input..:true

但是，當表單元素沒有錯誤的時候，需要取消自定義錯誤消息，否則表單無法提交：

input.(""); //這個相當于將input..:false

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

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

（1）按鈕的click事件，若取消默認事件表單驗證提示錯誤信息，則終止

（2）html5表單驗證和提示，若表單驗證不通過，則提示第一個不合法輸入，并終止

（3）form表單的事件，若取消默認事件，則終止

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