为什么点击提交按钮的时候，内容没有被提交，还可以继续修改(内容错误时)

<!DOCTYPE html>
<html>
    <head>
<meta charset="UTF-8" />
<title></title>
</head>
<body>
<form action="" method="get">
    <input type="url" id='a' required>
    <input type="submit" value="提交">
</form>
<script>
var inp=document.getElementById('a');
inp.oninput=function() {
    var it = this.validity;
    if (true===it.typeMismatch) {
        this.setCustomValidity("请输入带http://的正确地址！");
    }else{
        this.setCustomValidity("");
    }
}
</script> 
</body>
</html>

另外，true===it.typeMismatch和it.typeMismatch===true有什么区别？

我看这个老师喜欢用it.typeMismatch===true

迷失的小麦 2020-02-28

源自：项目：HTML5表单验证 3-15 编程练习

收起

2回答

樱桃小胖子回答被采纳获得+3积分 2020-02-29 11:57:19

同学你好，这段代码就是说判断输入的值是否符合验证要求，不符合弹出提示，无法通过验证，也就不能提交，需要重新输入，若重新输入的内容符合验证，通过验证即可提交。

如果我的回答帮助了你，希望采纳，祝学习愉快！

收起回答

迷失的小麦提问者 #1

老师，我的意思是这里不需要js就能阻止提交，当信息不正确的时候。但是之前不用html5布局时，需要js阻止提交如：button.onclick=function (){ if (choose.checked == false || test1 == false || test2 == false || test3 == false || test4 == false || test5 == false || test6 == false || test7 == false) { return false; } else { window.open("https://www.imooc.com/","_self"); //location.href="https://www.imooc.com/"; } }; 请问为什么点击提交按钮的时候，内容没有被提交，还可以继续修改？（html5布局产生的效果吗？）

2020-02-29 12:02:34
樱桃小胖子回复提问者迷失的小麦 #2

是的，这里是以为H5表单自带的验证特性产生的，祝学习愉快！

2020-02-29 19:35:34