H5新增form表单事件--oninput,oninvalid

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>

<body>
    <form action="">
        用户名：<input type="text" id="username" pattern="[a-zA-Z0-9\u4E00-\u9FA5]{1,18}" /> 邮 箱 ：<input type="email" id="email">
        <input type="submit" />
    </form>
    <script type="text/javascript">
        document.getElementById('username').oninvalid = function() {
            this.setCustomValidity("请输入合法的1-18位....");
        };
        document.getElementById('email').oninvalid = function() {
            this.setCustomValidity("请输入合法的邮箱");
        };

        document.getElementById('username').oninput = function() {
            console.log("username oninput:" + this.value);
        };
        document.getElementById('email').oninput = function() {
            console.log("email oninput:" + this.value);
        };
    </script>
</body>

</html>

1.oninput 当元素获得用户输入时运行脚本,用户输入完成时触发
2.oninvalid 当元素无效时运行脚本，点击提交，如果不符合规则,则会提示

版权声明：本文为weixin_38659265原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。