极客观点
项目管理
HarmonyOS
oninvalid 事件，看文档上说是input标签校验无效时触发，且提示错误信息
奇怪的是form 里的有多个input时，却可以用以下方式阻止提示错误信息:
var form = document.querySelectorAll( "form" )[0];
form.addEventListener( "invalid", function( event ) {
event.preventDefault();
},true);
//全部代码见下面疑问：
1 . 为什么oninvalid可以用在form上，而且在捕获时有效，冒泡时无效
2 . 为什么event.preventDefault()可以阻止form下所有的input提示信息
3 . 用oninvalid方式并不能阻止提示信息，可见阻止form下的input提示信息并非是浏览器的默认行为
form.oninvalid=function(e){
return false;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<title>表单验证默认样式修改</title>
</head>
<style>
.oneline{line-height: 1.5;margin:10px auto;}
.oneline label{width:100px;text-indent: 15px;font-size:14px;font-family: "Microsoft Yahei";display: inline-block;}
.oneline .sinput{width:60%;height:30px;border-radius: 6px;border:1px solid #e2e2e2;}
.oneline input[type="submit"]{margin-left:20px;width:80px;height:30px;border:0;background-color:#5899d0;color:#fff;font-size:14px;border-radius: 6px;}
.error-messages{color:red;}
</style>
<body>
<form>
<div class="oneline">
<label for="name">用户名:</label>
<input id="name" class="sinput" name="name" type="text" required>
</div>
<div class="oneline">
<label for="email">Email:</label>
<input id="email" class="sinput" name="email" type="email" required>
</div>
<div class="oneline">
<input type="submit" value="提交">
</div>
</form>
<script>
var form = document.querySelectorAll( "form" )[0];
form.addEventListener( "invalid", function( event ) {
event.preventDefault();
},true);
form.oninvalid=function(e){
return false;
}
</script>
</body>
</html>
html5