有两个疑问

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <title></title>
    </head>
    <body>
        <form action="" method="get">
            <input type="url" oninput="checkit(this)">
            <input type="submit" value="提交">
        </form>
        <script>
            function checkit(obj) {
                var it = obj.validity;
                //补充完整
                if(it.typeMismatch===true){
                    obj.setCustomValidity("请输入带http://的正确地址！");
                }else{
                    obj.setCustomValidity("");
                }
            }
        </script>
    </body>
</html>

1、不点击输入框直接点提交按钮的话没有任何反应，点击输入框但是什么都不输入就点提交按钮的话也没有任何反应

2、输入内容后也不会有提示，直到点击了一次提交按钮后，如果内容不符合要求才会有提示；而在这之后只要修改内容后，内容不符合要求提示就会一直在；而只要输入了http:提示就会消失了并且就会提交成功【整个输入框只有http:也会成功】，不应该是有了http://才能提交成功吗？

Aurora_Meteor 2020-04-16

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

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2020-04-17 10:17:37

同学你好，对于你的问题解答如下：

因为oninput事件是监听输入框输入时的事件，必须输入框中输入（或删除）内容了才可以触发该事件，直接点击提交按钮和点击输入框但是什么都不输入就点提交按钮这两种情况，不会触发oninput事件，所以没有任何反应。
输入框输入内容时会触发输入框的oninput事件，设置提示信息，但是只有提交表单时，才会进行验证，所以需要点击一次提交按钮才会出现提示信息。
老师测试同学代码，只输入http:不会成功，会继续显示提示信息，同学可以再测试下。