DOM 与事件
表单处理
掌握表单验证、FormData、输入控制
表单处理
表单是 Web 应用的核心交互方式。掌握表单验证与数据处理是关键技能。
学完本章你将： 掌握表单事件、FormData、验证技巧。
获取表单数据
javascript
let form = document.querySelector("form");
form.addEventListener("submit", (e) => {
e.preventDefault(); // 阻止默认提交
// 方式 1：FormData（推荐）
let formData = new FormData(form);
let data = Object.fromEntries(formData);
console.log(data); // { name: "Alice", email: "alice@test.com" }
// 方式 2：手动获取
let name = form.querySelector('[name="name"]').value;
let email = form.elements.email.value;
});FormData 详解
javascript
let formData = new FormData();
// 添加字段
formData.append("name", "Alice");
formData.append("file", fileInput.files[0]);
// 读取
console.log(formData.get("name")); // "Alice"
console.log(formData.getAll("items")); // 多值字段
// 遍历
for (let [key, value] of formData) {
console.log(key, value);
}
// 检查
console.log(formData.has("name")); // true
// 删除
formData.delete("name");表单验证
javascript
// HTML5 约束验证 API
let input = document.querySelector("input");
// 内置验证
console.log(input.validity); // ValidityState 对象
console.log(input.validity.valid); // 是否通过验证
console.log(input.validity.valueMissing); // 必填为空
console.log(input.validity.typeMismatch); // 类型不匹配
console.log(input.validity.tooShort); // 太短
console.log(input.validity.patternMismatch); // 模式不匹配
// 自定义错误
input.setCustomValidity("这个字段不能为空！");
input.reportValidity(); // 显示错误提示
// 检查整个表单
if (form.checkValidity()) {
console.log("表单验证通过！");
} else {
form.reportValidity(); // 显示第一个错误
}实用技巧
javascript
// 1. 实时输入验证（防抖）
let debounceTimer;
input.addEventListener("input", (e) => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => {
validateInput(e.target.value);
}, 300);
});
// 2. 阻止特定按键
input.addEventListener("keydown", (e) => {
if (e.key === "e" && input.type === "number") {
e.preventDefault(); // 阻止输入科学计数法 e
}
});
// 3. 表单重置
form.addEventListener("reset", (e) => {
console.log("表单已重置");
});
form.reset(); // 编程式重置
// 4. 自动聚焦
document.querySelector('[autofocus]')?.focus();