HTML5利用约束验证API来检查表单的输入数据的代码实例

HTML5利用约束验证API来检查表单的输入数据是一种很方便的方式，它可以确保用户输入的数据符合指定的格式，提高了表单提交的成功率。下面是实现此功能的完整攻略：

1. HTML表单代码结构

首先，我们需要在HTML页面中编写表单元素。表单元素应该包含一系列表单控件，例如文本输入框、单选按钮、复选框、下拉列表等元素。在提交表单数据之前需要添加以下代码结构，其中包括验证角色和验证规则：

<input type="text" name="username" required minlength="3" maxlength="10" pattern="[A-Za-z]{3,10}" title="用户名必须为3-10个字母">

上面的代码意思是：用户名文本输入框中必填，长度必须为3到10之间的字母，只包含大小写字母，提示标题为："用户名必须为3-10个字母"。

2. JavaScript代码实现

接下来，在JavaScript中添加验证功能的代码，这里我们使用了约束验证API。代码如下：

var forms = document.getElementsByTagName("form");
for (var i = 0; i < forms.length; i++) {
    forms[i].addEventListener("submit", function (event) {
        if (this.checkValidity() === false) {
            event.preventDefault();
            event.stopPropagation();
        }
        this.classList.add("was-validated");
    }, false);
}

上面的代码意思是：获取所有页面上的表单，遍历表单，针对每个表单注册submit事件。检查表单的有效性，如果一个控件不满足验证条件，则阻止表单提交，并阻止事件向上传播。如果所有控件都满足条件，则添加样式“was-validated”，告知用户验证已经成功。

3. 完整代码实例

结合以上两部分内容，我们可以得到一个完整的HTML代码实例，如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>HTML5约束验证API演示</title>
</head>
<body>

    <form class="needs-validation" novalidate>
        <div class="form-group">
            <label for="username">用户名:</label>
            <input type="text" class="form-control" id="username" required minlength="3" maxlength="10" pattern="[A-Za-z]{3,10}" title="用户名必须为3-10个字母">
            <div class="valid-feedback">有效</div>
            <div class="invalid-feedback">用户名必须为3-10个字母，且只包含字母</div>
        </div>
        <button type="submit">提交</button>
    </form>

    <script>
        var forms = document.getElementsByTagName("form");
        for (var i = 0; i < forms.length; i++) {
            forms[i].addEventListener("submit", function (event) {
                if (this.checkValidity() === false) {
                    event.preventDefault();
                    event.stopPropagation();
                }
                this.classList.add("was-validated");
            }, false);
        }
    </script>
</body>
</html>

上面代码中，我们创建了一个表单，其中包含了一个用户名文本输入框，规定必须为3到10之间的字母，不受大小写限制，顶部提示标题。

JavaScript代码中，我们为表单添加了事件监听器，当用户点击提交按钮时，表单数据进行验证，验证完毕时根据验证是否通过来阻止表单提交，并添加样式“was-validated”。

如果用户输入不符合限制要求，就会显示一个红色的弹出框，告知用户输入无效。

至此，我们完成了整个HTML页面的表单数据验证功能。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML5利用约束验证API来检查表单的输入数据的代码实例 - Python技术站

HTML5利用约束验证API来检查表单的输入数据的代码实例

1. HTML表单代码结构

2. JavaScript代码实现

3. 完整代码实例

相关文章