JavaScript - 表单 API：初学者指南

你好，未来的 JavaScript 巫师们！今天，我们将踏上一段激动人心的旅程，探索网页表单和强大的 JavaScript 表单 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