html5表单新增的事件

1. oninput 用户输入内容时触发，可用于移动端输入字数统计
2. oninvalid 验证不通过时触发
3. 代码如下:

<form action="">
    用户名: <input type="text" name="userName" id="userName"><br>
    电话: <input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$" required><br>
    <input type="submit">

    <script>
        // 1.监听当前指定元素内容的改变: 只要内容改变(添加内容,删除内容),就会触发这个事件
        document.getElementById("userName").oninput = function () {
            console.log(this.value);
        }

        // onkeyup: 键盘抬起事件,每一个键弹起都会触发
        document.getElementById("userName").oninput = function () {
            console.log("onkeyup:" + this.value);
        }

        // oninvalid:验证不通过时触发
        document.getElementById("userPhone").oninvalid=function () {
            this.setCustomvValidity("请输入合法的11位手机号")
        }

    </script>
</form>