前端提示修改預設的提示資訊
<!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>