html5中oninvalid属性多次出错

Question

html：

<input type="text" class="form-control" id="Username" placeholder="Username" pattern="[a-zA-Z0-9\u4E00-\u9FA5]{1,18}"

script：

<script>
    var user = document.getElementById("Username");
    user.oninvalid = function () {
        this.setCustomValidity("请输入合法的1-18位....");
    };
</script>

在实践中，如果有一次格式非法，然后如上提示"请输入合法的1-18位...."之后，所有合法的输入然后submit会提示非法输入。


想问问为何？

Answer 1

oninvalid是H5新增的form事件 所以你的html需要改成这样：

    <form action="">
        <input type="text" class="form-control" id="Username" placeholder="Username" pattern="[a-zA-Z0-9\u4E00-\u9FA5]{1,18}" />
        <input type="submit" />
    </form>

点击提交时，如果不合法会提示