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;
}
表单验证默认样式修改.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;}
用户名:
Email:
var form = document.querySelectorAll( "form" )[0];
form.addEventListener( "invalid", function( event ) {
event.preventDefault();
},true);
form.oninvalid=function(e){
return false;
}