3-8编程练习为什么我的这个就是实现不了？代码哪有问题

来源：3-14 html约束验证API之setCustomValidity综合案例

qq_涟_0

2017-08-31 16:07:25

    <form action="">
        <input type="url" required="required" oninput="out(this)">
        <button type="submit">提交</button>
    </form>

    <script type="text/javascript">
        function out(obj){
            var val=obj.validity;
            console.log(val.valueMissing);
            if(val.valueMissing===true){
               val.setCustomValidity("请填写字段2");
            }else{
              if(val.typeMissmatch===true){
               val.setCustomValidity("请输入带http://的正确地址！");
                }else{ val.setCustomValidity("");
                }

            }
        }

    </script>

写回答

3回答

怎么都被占用了呢

2017-09-01

是哦，一激动写成一样了，那你知道问题所在了就行。继续加油吧！

qq_涟_0

提问者

2017-08-31

//正确的操作

<body>


<form action="">
    <input type="url" required="required" oninput="out(this)" id="inp">
    <button type="submit">提交</button>
</form>

<script type="text/javascript">
 console.log(document.getElementById("inp").validity.valueMissing);
 console.log(document.getElementById("inp").validity);
   function out(obj){
        var val=obj.validity;
        console.log("val.typeMismatch:"+val.typeMismatch);
         console.log("validity.valueMissing:"+document.getElementById("inp").validity.valueMissing);
        if(val.valueMissing===true){
           obj.setCustomValidity("请填写字段2");
        }else{
          if(val.typeMismatch===true){
           obj.setCustomValidity("请输入带http://的正确地址！");
            }else{ obj.setCustomValidity("");
            }
        }
    }
    out(document.getElementById("inp"));
</script>
</body>
</html>