1. 程式人生 > >前端提示修改預設的提示資訊

前端提示修改預設的提示資訊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="">
    使用者名稱:<input type="text" name="userName" id="userName"><br>
    電話:<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"> <br>
    <input type="submit">
</form>
<script>
    /*1.oninput:監聽當前指定元素內容的改變:只要內容改變(新增內容,刪除內容),就會觸發這個事件*/
    document.getElementById("userName").oninput=function(){
        console.log("oninput:"+this.value);
    }

    /*onkeyup:鍵盤彈起的時候觸發:每一個鍵的彈起都會觸發一次*/
    document.getElementById("userName").onkeyup=function(){
        console.log("onkeyup:"+this.value);
    }

    /*oninvalid:當驗證不通過時觸發*/
    document.getElementById("userPhone").oninvalid=function(){
        /*設定預設的提示資訊*/
        this.setCustomValidity("請輸入合法的11位手機號");


   }

/*this是獲取當前資訊*/


</script>
</body>
</html>