HTML5實戰應用：如何讓表單驗證更友好

時間 2019-12-06

標籤 html5 html 實戰應用如何表單驗證友好欄目 HTML5 简体版

原文原文鏈接

HTML5實戰應用：如何讓表單驗證更友好

HTML5表單驗證給前端人員帶來了便利，可是在用戶體驗上存在一些缺陷，默認的提示對用戶很不友好，沒法準確的獲取想要的信息。好在大牛們在接口設計的時候提供了setCustomValidilty方法能夠自定義提示信息。這是一個好消息，但也存在一些弊端，須要讓開人員作額外的一些處理才達到真正想要的目的。
接下來經過如下示例來闡述方法的應用。

未調用setCustomValidity()方法

<!DOCTYPE html>
javascript
<html>
html
<head>
前端
<mata charset="utf-8">
java
<title>form test</title>
post
</head>
優化
<body>
ui
<form name="test" action="." method="post">
this
<input type="text" required pattern="^\d{4}[ DISCUZ_CODE_21 ]quot; placeholder="請輸入代碼" >
spa
<button type="submit">Check</button>
設計
</form>
</body>
</html>

複製代碼

執行結果：
A：未輸入數據

B：不匹配

這兩個結果都匹配了。可是不匹配這裏的提示方案案與預想的不符合。

經過調用setCustomValidity方法來優化提示文案

<!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 ]quot; placeholder="請輸入代碼" >
<button type="submit">Check</button>
</form>
<script type="text/javascript">
document.querySelector("input").setCustomValidity("請輸入4位數字的代碼");
</script>
</body>
</html>

複製代碼

執行結果：
A：爲空

B：不合法

C：合法

從三個操做來看，調用了setCustomValidity方法後，原生的表單驗證羅輯都返回false了。悲劇。
再看看接口屬性的變化

調用以前：
A）

調用以後：
A)

從上面的截圖能夠看到validationMessage沒清空，valueMissing和patternMismatch都已經驗證通了。

總結一下：
從面上能夠看出，驗證經過與否除了跟validity接口下的屬性相關外，還跟validationMessage是否有值有關係。只有當validity接口下的屬性（customError除外）都爲false而且validationMessage爲空時纔算驗證經過。

優化後的代碼：

<!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("請填寫些字段");
}else{
if(true === v.patternMismatch){
i.setCustomValidity("請輸入4位數字的代碼");
}else{
i.setCustomValidity("");
}
}
}
</script>
</body>
</html>