修改HTML5預設驗證提醒
HTML：<input type=“text” id=“account” required>
|
1 |
<input type="text" <span style="color: #339966;">id="userAccount"</span> required> |
js：
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var elements = <span style="color: #339966;">document.getElementsByTagName("INPUT")</span>; var msg = "此欄位必填"; angular.forEach(elements, function (item) { item.setCustomValidity(""); if(_.isEmpty(item.value)){ <span style="color: #339966;">item.setCustomValidity(msg)</span>; }else{ if(item.id==="email" && <span style="color: #339966;">item.validity.typeMismatch</span>){ item.setCustomValidity("請在電子郵件地址中包含「@」。"); } } }); |
HTML需要設id或name，以方便取得欄位
document.getElementsByTagName(“INPUT”)→取得html上所有<input> tag
setCustomValidity(“”)→進入迴圈先將之前的記錄清空
setCustomValidity(msg)→設定錯誤訊息
若mail不為””，需要另外判斷是否符合email格式
不符合則item.validity.typeMismatch回傳true
判斷是否為email格式需要type=”email”，如下
|
1 |
<input <span style="color: #339966;">type="email"</span> id="email" required> |