JS 表单操作

网站

HTML 表单 | MDN

HTMLInputElement | MDN

HTMLFormElement: submit 事件 | MDN

引入

网页里的登录框、搜索框、注册表单，都需要用户填写数据并提交。

JS 可以读取用户在表单中输入的内容，监听输入变化，控制表单提交行为，是前端交互的核心部分。

正文

定义

定义

表单操作是用 JS 读取或修改表单元素的值，监听用户的输入行为，以及控制表单的提交方式。

获取表单值

表单元素包括 <input>、<select>、<textarea>，它们的当前值都通过 value 属性读取。

文本输入框

<input id="userName" type="text" placeholder="请输入用户名">

const userName = document.querySelector("#userName");
 
console.log(userName.value);

userName.value 返回输入框里当前填写的文字。

下拉选择框

<select id="city">
  <option value="beijing">北京</option>
  <option value="shanghai">上海</option>
  <option value="guangzhou">广州</option>
</select>

const city = document.querySelector("#city");
 
console.log(city.value);

city.value 返回当前选中的 <option> 的 value 属性值，例如 "beijing"。

多行文本框

<textarea id="comment" rows="4"></textarea>

const comment = document.querySelector("#comment");
 
console.log(comment.value);

comment.value 返回文本框里填写的内容，包含换行符。

设置表单值

value 也可以用来设置表单元素的值。

const userName = document.querySelector("#userName");
 
userName.value = "张三";

输入框里会自动显示”张三”。

复选框和单选框

复选框和单选框不用 value 判断是否选中，而是用 checked 属性。

复选框

<input id="agree" type="checkbox">
<label for="agree">同意条款</label>

const agree = document.querySelector("#agree");
 
console.log(agree.checked);
 
if (agree.checked) {
  console.log("已同意");
}

checked 返回 true 表示勾选，false 表示未勾选。

单选框

<input name="gender" type="radio" value="male"> 男
<input name="gender" type="radio" value="female"> 女

const selected = document.querySelector("input[name='gender']:checked");
 
if (selected) {
  console.log(selected.value);
}

input[name='gender']:checked 选择器可以找到当前选中的单选框。

文件输入框

<input type="file"> 通过 files 属性获取用户选择的文件。

<input id="avatar" type="file" accept="image/*">

const avatar = document.querySelector("#avatar");
 
avatar.addEventListener("change", function () {
  console.log(avatar.files[0]);
});

files 是一个类数组对象，files[0] 是用户选择的第一个文件。

监听输入

input 事件

input 事件在输入框内容每次变化时都会触发。

<input id="search" type="text" placeholder="搜索">
<p id="result"></p>

const search = document.querySelector("#search");
const result = document.querySelector("#result");
 
search.addEventListener("input", function () {
  result.textContent = "搜索内容：" + search.value;
});

每输入一个字符，<p> 就会实时更新。

change 事件

change 事件在输入框失去焦点且内容改变时触发。

search.addEventListener("change", function () {
  console.log("最终值：" + search.value);
});

input 和 change 的区别：

事件	触发时机	适用场景
input	每次内容变化	实时搜索、字数统计
change	失去焦点且内容改变	表单验证、保存设置

表单提交

点击表单里的提交按钮时，浏览器默认会发送请求并刷新页面。

通常需要用 JS 拦截默认行为，手动处理数据。

submit 事件

<form id="loginForm">
  <input name="userName" type="text" placeholder="用户名">
  <input name="password" type="password" placeholder="密码">
  <button type="submit">登录</button>
</form>

const loginForm = document.querySelector("#loginForm");
 
loginForm.addEventListener("submit", function (event) {
  event.preventDefault();
 
  const userName = loginForm.querySelector("[name='userName']");
  const password = loginForm.querySelector("[name='password']");
 
  console.log("用户名：" + userName.value);
  console.log("密码：" + password.value);
});

event.preventDefault() 阻止了页面刷新，JS 手动获取表单数据后处理。

注意绑定位置

submit 事件要绑定在 <form> 上，而不是 <button> 上。

<form id="form">
  <input type="text">
  <button type="submit">提交</button>
</form>

const form = document.querySelector("#form");
 
form.addEventListener("submit", function (event) {
  event.preventDefault();
  console.log("表单已提交");
});

表单验证

在提交之前，可以检查用户输入是否合法。

<form id="form">
  <input id="email" type="text" placeholder="邮箱">
  <p id="error" style="color: red;"></p>
  <button type="submit">注册</button>
</form>

const form = document.querySelector("#form");
const email = document.querySelector("#email");
const error = document.querySelector("#error");
 
form.addEventListener("submit", function (event) {
  event.preventDefault();
 
  if (email.value === "") {
    error.textContent = "邮箱不能为空";
    return;
  }
 
  if (!email.value.includes("@")) {
    error.textContent = "邮箱格式不正确";
    return;
  }
 
  error.textContent = "";
  console.log("验证通过，邮箱：" + email.value);
});

验证失败时显示错误提示，验证通过后继续处理数据。

禁用和启用表单元素

<button id="submitBtn" type="submit">提交</button>

const submitBtn = document.querySelector("#submitBtn");
 
submitBtn.disabled = true;

disabled = true 会让按钮变灰且不可点击。

例子

完整登录表单

<form id="loginForm">
  <input id="userName" name="userName" type="text" placeholder="用户名">
  <input id="password" name="password" type="password" placeholder="密码">
  <label>
    <input id="remember" type="checkbox"> 记住我
  </label>
  <p id="error" style="color: red;"></p>
  <button type="submit">登录</button>
</form>

const loginForm = document.querySelector("#loginForm");
const userName = document.querySelector("#userName");
const password = document.querySelector("#password");
const remember = document.querySelector("#remember");
const error = document.querySelector("#error");
 
loginForm.addEventListener("submit", function (event) {
  event.preventDefault();
 
  if (userName.value === "" || password.value === "") {
    error.textContent = "请填写完整信息";
    return;
  }
 
  if (password.value.length < 6) {
    error.textContent = "密码至少 6 位";
    return;
  }
 
  error.textContent = "";
  console.log("用户名：" + userName.value);
  console.log("密码：" + password.value);
  console.log("记住我：" + remember.checked);
});

常见写法

写法	作用
input.value	读取或设置输入框的值
select.value	读取当前选中的选项值
checkbox.checked	判断复选框是否勾选
event.preventDefault()	阻止表单默认提交
input.addEventListener("input", fn)	实时监听输入变化
form.addEventListener("submit", fn)	监听表单提交
input.disabled = true	禁用输入框或按钮

特点

• 表单元素的值通过 value 属性读写
• 复选框和单选框用 checked 判断选中状态
• 文件输入框用 files 获取文件列表
• input 事件实时触发，change 事件失去焦点时触发
• submit 事件绑定在 <form> 上，不是 <button> 上
• event.preventDefault() 阻止表单默认的刷新提交
• 提交前通常需要做表单验证

注意事项

• submit 事件必须绑定在 <form> 元素上
• 如果表单里没有 <form> 标签，submit 事件不会触发
• 读取单选框的值时，要先用 :checked 选择器找到选中的那个
• input.value 返回的永远是字符串，即使是数字类型的输入
• 表单验证失败后记得用 return 阻止后续代码执行

理解

可以把表单操作理解成”收集信息”。

表单元素就像一张张表格，用户填写的内容就是数据。

JS 的工作是：读取数据、检查数据、发送数据。

我理解表单操作的重点是：用 value 读取内容，用事件监听变化，用 submit 拦截提交。

引出

掌握了表单操作之后，可以继续学习 JS BOM API，了解浏览器窗口和页面导航相关的功能。