JavaScript表单介绍

一、表单的基本概念

在网页开发里，表单是实现用户与网页交互的关键组件，用于收集用户输入的数据，JavaScript 则能为表单增添强大的交互性和功能性。表单在 HTML 里通过 <form> 标签创建，包含多种表单元素，如文本框、下拉框、单选框、复选框、提交按钮等。用户在这些元素里输入数据，点击提交按钮后，数据会被发送到服务器进行处理。

常用属性和方法：

document.forms：获取页面中的所有表单。
form.elements：获取表单中的所有控件（如输入框、按钮等）。
value：获取或设置输入框的值。
addEventListener()：为表单添加事件监听器。
submit()：手动提交表单。
reset()：重置表单。

二、表单的常用操作

1. 创建基本的 HTML 表单

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript 表单示例</title></head><body><form id="myForm">用户名: <label for="username"></label><input type="text" id="username" name="username"><br><br>密码: <label for="password"></label><input type="password" id="password" name="password"><br><br><button type="button" onclick="getFormData()">提交</button></form><script>function getFormData() {const username = document.getElementById('username').value;const password = document.getElementById('password').value;console.log('用户名:', username);console.log('密码:', password);alert(`用户名: ${username}, 密码: ${password}`);}</script></body></html>

2. 表单验证

表单验证是确保用户提交的数据符合要求的重要步骤，JavaScript提供了强大的功能来实现前端验证。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单验证示例</title></head><body><form id="validationForm" onsubmit="return validateForm()">邮箱: <label for="email"></label><input type="email" id="email" name="email"><br><br>年龄: <label for="age"></label><input type="number" id="age" name="age"><br><br><button type="submit">提交</button></form><script>function validateForm() {const email = document.getElementById('email').value;const age = document.getElementById('age').value;if (!email) {alert('邮箱不能为空');return false;}if (isNaN(age) || age <= 0) {alert('请输入有效的年龄');return false;}alert('表单验证通过！');return true;}</script></body></html>

3. 使用JavaScript提交表单

有时需要使用JavaScript程序化地提交表单。JavaScript提供了包含submit()方法的表单对象，通过获取表单的ID来获取表单对象。

 document.getElementById("form1").submit();

4. 使用FormData对象发送表单数据

FormData对象可以方便地处理表单数据的发送。

 const form = document.querySelector("#form1");async function sendData() {const formData = new FormData(form);try {const response = await fetch("https://example.org/post ", {method: "POST",body: formData,});console.log(await response.json());} catch (e) {console.error(e);}}

5. 表单重置

可以通过JavaScript代码调用表单的reset()方法来重置表单。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>表单验证示例</title></head><body><form id="form1"><!-- 表单元素 --><input type="button" value="重置" onclick="resetForm()"></form><script>function resetForm() {document.getElementById("form1").reset();}</script></body></html>

6. 动态修改表单内容

可以通过FormData对象获取表单中的所有数据。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动态修改表单示例</title></head><body><form id="dynamicForm">用户名: <input type="text" id="username" name="username"><br><br><button type="button" onclick="changeUsername()">更改用户名</button></form><script>function changeUsername() {const newUsername = prompt('请输入新的用户名:');if (newUsername) {document.getElementById('username').value = newUsername;}}</script></body></html>

7. 禁用表单元素

可以通过设置disabled属性来禁用表单元素。

 // 禁用用户名输入框username.disabled = true;

8. 监听输入事件

可以为表单元素添加事件监听器，例如input或change事件。

 username.addEventListener("input", function() {console.log("用户名输入框内容已更改：", username.value);});age.addEventListener("change", function() {console.log("年龄输入框内容已更改：", age.value);});

三、完整示例代码

以下是一个完整的HTML和JavaScript代码示例，展示了表单的创建、验证、获取数据和动态修改。

 <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript表单操作</title></head><body><form id="exampleForm"><label for="username">用户名：</label><input type="text" id="username" name="username" required><br><br><label for="password">密码：</label><input type="password" id="password" name="password" required><br><br><label for="age">年龄：</label><input type="number" id="age" name="age" min="18"><br><br><label>性别：</label><input type="radio" id="male" name="gender" value="male"><label for="male">男</label><input type="radio" id="female" name="gender" value="female"><label for="female">女</label><br><br><label>爱好：</label><input type="checkbox" id="reading" name="hobbies" value="reading"><label for="reading">阅读</label><input type="checkbox" id="traveling" name="hobbies" value="traveling"><label for="traveling">旅行</label><br><br><button type="submit">提交</button></form><script>const form = document.getElementById("exampleForm");const username = document.getElementById("username");const password = document.getElementById("password");const age = document.getElementById("age");form.addEventListener("submit", function (event) {event.preventDefault();const usernameValue = username.value.trim();const passwordValue = password.value.trim();const ageValue = age.value.trim();if (usernameValue === "") {alert("用户名不能为空！");return;}if (passwordValue.length < 6) {alert("密码长度至少为6位！");return;}if (ageValue < 18) {alert("年龄必须大于等于18岁！");return;}alert("表单验证通过！");});username.addEventListener("input", function () {console.log("用户名输入框内容已更改：", username.value);});age.addEventListener("change", function () {console.log("年龄输入框内容已更改：", age.value);});</script></body></html>