JavaScript - 表单 API：初学者指南

你好，未来的 JavaScript 巫师们！今天，我们将踏上一段激动人心的旅程，探索网页表单和强大的 JavaScript 表单 API。如果你之前从未写过一行代码，也不用担心——我会成为你的友好向导，我们将一步一步地攻克这个主题。所以，拿起你最喜欢的饮料，坐舒服了，让我们一起开始吧！

JavaScript - Forms API

网页表单简介

在我们跳入表单 API 之前，先来聊聊网页表单。你可能在网上浏览时无数次遇到过它们。记得上次你注册新账户或填写在线调查吗？没错——你当时就是在与一个网页表单互动！

网页表单就像数字化的文件。它们允许用户输入数据，然后这些数据可以被发送到服务器进行处理。但这里有个有趣的地方：使用 JavaScript，我们可以使这些表单更智能、更互动。

网页表单 API

网页表单 API 是一组由 JavaScript 提供的工具，允许我们以强大的方式处理表单。这就像给你的表单进行了大脑升级！

访问表单元素

让我们从基础开始。我们如何实际上使用 JavaScript 获取一个表单？这可能比你想象的要简单！

// 假设我们有一个 ID 为 "myForm" 的表单
let myForm = document.getElementById("myForm");

// 或者如果我们想获取页面上的所有表单
let allForms = document.forms;

在这个例子中，document.getElementById("myForm") 就像是在问 JavaScript 在我们的网页上找到一个 ID 为 "myForm" 的表单。这就像在教室里点名一样——JavaScript 将为我们定位那个特定的表单。

第二行，document.forms，给我们页面上所有的表单。这就像得到了学校里所有学生的名单！

处理表单提交

现在我们可以访问我们的表单了，让我们看看当有人提交表单时如何处理：

myForm.addEventListener("submit", function(event) {
event.preventDefault(); // 阻止表单正常提交
console.log("表单已提交！");
// 在这里你可以添加处理表单数据的代码
});

这段代码就像设置了一个特殊的警报，当有人尝试提交表单时就会响起。preventDefault() 方法特别重要——它就像告诉表单：“等一等，别马上发送这些数据。我们想先对它做一些处理！”

约束验证 DOM 方法

现在，让我们来谈谈确保我们表单中的数据是正确的。这被称为验证，对于确保我们从用户那里得到正确的信息至关重要。

checkValidity() 方法

表单验证中最有用的方法之一是 checkValidity()。这就像有一个老师快速地扫描学生的作业，以确保一切正常。

let emailInput = document.getElementById("email");

emailInput.addEventListener("blur", function() {
if (!emailInput.checkValidity()) {
console.log("请输入一个有效的电子邮件地址");
}
});

在这个例子中，我们在用户完成输入时（这就是 "blur" 事件的意义）检查电子邮件输入是否有效。如果它无效，我们将消息记录到控制台。在真实的应用程序中，你可能希望将这个消息显示给用户。

reportValidity() 方法

虽然 checkValidity() 只检查输入是否有效，但 reportValidity() 方法更进一步。它不仅检查，如果有什么错误还会向用户显示消息。

let submitButton = document.getElementById("submit");

submitButton.addEventListener("click", function() {
if (!myForm.reportValidity()) {
console.log("表单有错误。请修正它们。");
} else {
console.log("表单有效。正在提交...");
}
});

这就像有一个老师不仅检查作业，还为学生写下需要改正的评论。

约束验证 DOM 属性

现在我们已经看到了一些方法，让我们来看看一些可以帮助我们进行表单验证的属性。

validity 属性

validity 属性是关于输入有效性的大量信息的宝库。这就像每个表单字段的详细成绩单。

let passwordInput = document.getElementById("password");

passwordInput.addEventListener("input", function() {
if (passwordInput.validity.tooShort) {
console.log("密码太短！");
}
});

在这个例子中，我们每次用户输入时都会检查密码是否太短。这就像有一个老师站在学生旁边并给予即时反馈！

'validity' 属性的属性

validity 属性本身有几个属性，每个属性都告诉我们关于输入状态的具体信息。让我们看看其中的一些：

属性	描述
`valid`	如果元素满足所有验证约束，则为 `true`
`valueMissing`	如果元素有 `required` 属性但没有值，则为 `true`
`typeMismatch`	如果值不符合所需的语法（如电子邮件地址），则为 `true`
`patternMismatch`	如果值不匹配指定的 `pattern`，则为 `true`
`tooLong`	如果值超过 `maxLength`，则为 `true`
`tooShort`	如果值短于 `minLength`，则为 `true`
`rangeUnderflow`	如果值小于 `min` 属性，则为 `true`
`rangeOverflow`	如果值大于 `max` 属性，则为 `true`
`stepMismatch`	如果值不符合 `step` 属性的规则，则为 `true`

以下是如何使用其中的一些示例：

let ageInput = document.getElementById("age");

ageInput.addEventListener("input", function() {
if (ageInput.validity.rangeUnderflow) {
console.log("你必须至少18岁！");
} else if (ageInput.validity.rangeOverflow) {
console.log("你确定你那么老了吗？");
} else if (ageInput.validity.valid) {
console.log("年龄看起来不错！");
}
});

这段代码检查输入的年龄是否太低、太高或正好。这就像 Goldilocks 检查麦片粥，但针对的是表单输入！

结论

好了，各位！我们已经迈出了进入 JavaScript 表单 API 世界的第一步。我们学习了如何访问表单、处理提交、验证输入，甚至深入到了输入有效性的细节。

记住，掌握这些概念需要练习。如果一开始没有马上理解，也不要气馁。就像学骑自行车一样，一开始可能会摇摇晃晃，但很快你就能轻松自如地创建互动且用户友好的表单！

继续编码，继续学习，最重要的是，继续在 JavaScript 中享受乐趣！

Credits: Image by storyset

上一教程:

JavaScript - 存储API

下一教程:

JavaScript - Worker API