HTML5實戰(zhàn)應用：如何讓表單驗證更友好
HTML5表單驗證給前端人員帶來了便利，但是在用戶體驗上存在一些缺陷，默認的提示對用戶很不友好，無法準確的獲取想要的信息。好在大牛們在接口設計的時候提供了setCustomValidilty方法可以自定義提示信息。這是一個好消息，但也存在一些弊端，需要讓開人員做額外的一些處理才達到真正想要的目的。
接下來通過以下示例來闡述方法的應用。
未調(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>
復制代碼執(zhí)行結果：
A：未輸入數(shù)據(jù)
B：不匹配
這兩個結果都匹配了。但是不匹配這里的提示方案案與預想的不符合。
通過調(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> 復制代碼執(zhí)行結果：
A：為空
B：不合法
C：合法
從三個操作來看，調(diào)用了setCustomValidity方法后，原生的表單驗證羅輯都返回false了。悲劇。
再看看接口屬性的變化
調(diào)用之前：
A）
B)
C)
調(diào)用之后：
A)
B)
C)
從上面的截圖可以看到validationMessage沒清空，valueMissing和patternMismatch都已經(jīng)驗證通了。
總結一下：
從面上可以看出，驗證通過與否除了跟validity接口下的屬性相關外，還跟validationMessage是否有值有關系。只有當validity接口下的屬性（customError除外）都為false并且validationMessage為空時才算驗證通過。
優(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>
另外有需要云服務器可以了解下創(chuàng)新互聯(lián)cdcxhl.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。
重慶分公司
重慶分公司
