HTML5中針對表單新增的驗證屬性如required、pattern以及一些特定input類型，當驗證不通過時，都有默認的提示語句，但實踐中發現並不怎么友好，因此，需要自定義提示語句，使用setCustomValidity()。在此之前，需要介紹一下表單的validityState對象。
HTML5表單新增的屬性中有一個validity屬性，通過該屬性可以獲得一個validityState的對象，而validityState對象針對表單的幾個錯誤驗證又提供了8個屬性：
valueMissing
必填項為空，返回true，否則返回false，配合required屬性使用
typeMismatch
判斷輸入類型是否匹配，不匹配返回true，否則返回false，配合email、number、url等類型使用
patternMismatch
判斷正則是否通過，沒通過返回true，通過返回false，配合pattern屬性使用
toolong
判斷當前元素的值的長度是否大最大值，大於返回true，否則返回false，配合maxlength使用，但實際上如果設置maxlength，就無法輸入超出長度范圍的值
rangeUnderflow
判斷當前元素值是否小於min，與min屬性配合，不與max比較
rangeOverflow
判斷當前元素值是否大於max，與max屬性配合，不與min比較
stepMismatch
判斷當前元素值是否符合step要求，與step屬性配合
customError
使用自定義的驗證錯誤提示信息，配合setCustomValidity()方法使用；
如果使用了setCustomValidity()方法，customError屬性返回true，那么當輸入正確時，不能使用上述的任何一種屬性驗證輸入是否正確，所有的驗證都返回false，表單的驗證邏輯將會出現bug。因此，在自定義錯誤提示信息時，需要首先使用input.value判斷輸入是否為空，如果不是空值，調用input.setCustomValidity(“”)將提示信息設為空，從而屏蔽輸入正確時出現的驗證邏輯錯誤，之后再設置自定義錯誤提示語，示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title> New Document </title>
</head>
<body>
<form>
<input id="user" type="text" required pattern="^[a-zA-Z0-9]{6,12}$" placeholder="請輸入用戶名"/>
<input type="submit" value="提交">
</form>
</body>
<script>
var user=document.getElementById("user");
user.onblur=function(){
if(user.value){
user.setCustomValidity("");//現將有輸入時的提示設置為空
}else if(user.validity.valueMissing){
user.setCustomValidity("用戶名不能為空");
};
if(user.validity.patternMismatch){
user.setCustomValidity("用戶名只能是英文或數字，長度6到12位");
}
};
</script>
</html>
沒有輸入時：
輸入不符合要求時：
————————————————
版權聲明：本文為CSDN博主「rishonyou」的原創文章，遵循CC 4.0 BY-SA版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/rishonyou/java/article/details/56504669