HTML5實(shí)戰(zhàn)應(yīng)用：如何讓表單驗(yàn)證更友好

寧晉網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián),寧晉網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為寧晉超過千家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個(gè)售后服務(wù)好的寧晉做網(wǎng)站的公司定做！

HTML5表單驗(yàn)證給前端人員帶來了便利，但是在用戶體驗(yàn)上存在一些缺陷，默認(rèn)的提示對用戶很不友好，無法準(zhǔn)確的獲取想要的信息。好在大牛們在接口設(shè)計(jì)的時(shí)候提供了setCustomValidilty方法可以自定義提示信息。這是一個(gè)好消息，但也存在一些弊端，需要讓開人員做額外的一些處理才達(dá)到真正想要的目的。

接下來通過以下示例來闡述方法的應(yīng)用。

未調(diào)用setCustomValidity)方法!DOCTYPE html>  

 html

 hea

     ata charset="utf-8  

     titleform test/title>  

 /head  

 body  

     form name="test action="" method="post>  

        input type="text" required pattern="^\d{4[        DISCUZ_CODE_21        ]quot; placeholder="請輸入代碼" >  

         button type="submit">Check/button>  

     /form>  

 /body>  

 /html> 

復(fù)制代碼執(zhí)行結(jié)果：

A：未輸入數(shù)據(jù)

B：不匹配

這兩個(gè)結(jié)果都匹配了。但是不匹配這里的提示方案案與預(yù)想的不符合。

通過調(diào)用setCustomValidity方法來優(yōu)化提示文案!DOCTYPE html>  

 html>  

 head>  

     mata charset="utf-8">  

     title>form test/title>  

 /head>  

 body>  

     form name="test" action="." method="post">  

         input type="text" required pattern="^\d{4}[        DISCUZ_CODE_22        ]quo; placeholder="請輸入代碼" >  

         button type="submit">Check/button>  

     /form>  

 script type="text/javascript">  

     document.querySelector"input").setCustomValidity("請輸入4位數(shù)字的代碼");  

 /script>  

 /body>  

/html> 復(fù)制代碼執(zhí)行結(jié)果：

A：為空

B：不合法

C：合法

從三個(gè)操作來看，調(diào)用了setCustomValidity方法后，原生的表單驗(yàn)證羅輯都返回false了。悲劇。

再看看接口屬性的變化

調(diào)用之前：

A）

B)

C)

調(diào)用之后：

A)

B)

C)

從上面的截圖可以看到validationMessage沒清空，valueMissing和patternMismatch都已經(jīng)驗(yàn)證通了。

總結(jié)一下：

從面上可以看出，驗(yàn)證通過與否除了跟validity接口下的屬性相關(guān)外，還跟validationMessage是否有值有關(guān)系。只有當(dāng)validity接口下的屬性（customError除外）都為false并且validationMessage為空時(shí)才算驗(yàn)證通過。

優(yōu)化后的代碼：!DOCTYPE html>  

 html>  

 head>  

     mata charset="utf-8">  

     title>form test/title>  

 /head>      

 body>  

     form name="test" action="." method="post">  

         input type="text" required pattern="^\d{4}[        DISCUZ_CODE_23        ]quot; oninput="out(this)" placeholder="請輸入代碼" >  

         button type="submit">Check/button>  

     /form>  

 script type="text/javascript">  

 function out(i){  

     var v=i.validity;  

     if(true===v.valueMessing){  

         i.setCustomValidity("請?zhí)顚懶┳侄?);  

     }else{  

         if(true===v.patternMismatch){  

             i.setCustomValidity("請輸入4位數(shù)字的代碼");  

         }else{  

             i.setCustomValidity("");  

         }  

     }  

 }  

 /script>  

 /body>  

 /html>