H5新增表单事件oninput,oninvalid及setCustomValidity设置提示信息

最新推荐文章于 2022-08-12 23:42:23 发布

weixin_43727391

最新推荐文章于 2022-08-12 23:42:23 发布

阅读量4.5k

点赞数

分类专栏： h5

本文链接：https://blog.csdn.net/weixin_43727391/article/details/84197698

版权

h5 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!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>