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

最新推荐文章于 2021-10-28 08:59:38 发布

原创最新推荐文章于 2021-10-28 08:59:38 发布 · 1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#h5新增表单事件

h5C3 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了HTML表单中如何使用JavaScript进行实时的输入验证，包括用户名和邮箱的格式检查，以及oninput和oninvalid事件的运用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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 当元素无效时运行脚本，点击提交，如果不符合规则,则会提示