当前位置：首页 > news >正文

JavaScript表单介绍

news 来源：原创 2025/5/7 1:19:30

一、表单的基本概念

在网页开发里，表单是实现用户与网页交互的关键组件，用于收集用户输入的数据，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>