<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位手機號");
    }
</script>