<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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 type="text/javascript">
/*1.oninput:监听当前指定元素内容的改变，只要内容改变（添加内容，删除内容）就会触发这个事件*/
document.getElementById("userName").oninput=function (){
console.log("oninput:"+this.value);
};
/*2.oninvalid:当验证不通过时触发 setcustomValidity 设置默认提示信息*/
document.getElementById("userPhone").oninvalid=function (){
this.setCustomValidity("请输入合法的11位手机号");
};
/*onkeyup:当键盘弹起的时候触发：每一个键的弹起都会出发一次*/
document.getElementById("userName").onkeyup=function (){
console.log("onkeyup:"+this.value);
};
</script>
</body>
</html>
版权声明：本文为weixin_43727391原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。