HTML oninvalid 事件屬性

本文轉載自查看原文 2020-07-07 21:01 851

[

  HTML 事件屬性

HTML oninvalid 事件屬性的定義和用法

input元素內的值為無效值時觸發的事件
提交的input元素的值為無效值時，觸發oninvalid事件。
代碼：

oninvalid="setCustomValidity('用戶名不能為空')"

HTML oninvalid 事件屬性：語法

HTML5表單驗證給前端開發帶來許多便利，但是默認的提示不友好。我們可以通過setCustomValidity方法來自定義提示信息，更准確的提示給用戶。

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Break易站(breakyizhan.com)</title> </head> <body> <form action="demo-form.php"> 手機號: <input type="text" name="phone" maxlength="11" pattern="^(0|86|17951)?1[0-9]{10}" oninvalid="setCustomValidity('請輸入11位手機號');"/> <br> <input type="submit"> </form> </body> </html>

     提示：可以修改代碼后運行

pattern：屬性規定用於驗證輸入字段的正則表達式。
oninvalid：提交的input元素的值為無效值時（這里是正則驗證失敗），觸發oninvalid事件。oninvalid屬於Form 事件。
setCustomValidity()：這個是HTML5內置的JS方法，用來自定義提示信息
maxlength：限定input最大輸入長度

  HTML 事件屬性

]

  本文標題： HTML oninvalid 事件屬性 - Break易站

轉載請保留頁面地址：https://www.breakyizhan.com/html/9942.html

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML draggable 事件屬性 HTML5 video 詳解屬性事件方法 HTML readyState 屬性 iframe onreadystatechange事件 HTML onmousedown 事件屬性關於鼠標按鍵的問題； HTML元素（包括HTML5）的標簽、屬性及事件大全 HTML5 Audio/Video 標簽,屬性,方法,事件匯總 HTML5的Video標簽的屬性,方法和事件匯總 HTML5的Video標簽的屬性,方法和事件匯總 HTML5的Video標簽的屬性,方法和事件匯總 HTML5 video/audio監聽事件屬性及方法