在网页中，表单（<form>）是与用户交互的重要元素之一。JavaScript 可以用来操作、验证和处理表单数据。通过结合 HTML 表单和 JavaScript，你可以实现动态交互功能，如表单验证、数据提交、用户提示等。

1. 获取表单元素

在 JavaScript 中，可以使用多种方法来获取表单元素。最常用的方式是通过 document.getElementById()、document.getElementsByName()、document.getElementsByTagName() 或 document.querySelector()。

示例：获取表单元素

<form id="myForm">
  <input type="text" name="username" id="username" />
  <input type="password" name="password" id="password" />
  <button type="submit">Submit</button>
</form>

<script>
  var form = document.getElementById("myForm");
  var username = document.getElementById("username");
  var password = document.getElementById("password");

  form.addEventListener("submit", function(event) {
    event.preventDefault();
    alert("Form submitted!");
  });
</script>

2. 表单验证

表单验证可以确保用户输入的数据符合要求。你可以使用 JavaScript 来执行自定义的验证。submit 事件可以在表单提交前触发验证函数。

示例：表单验证

<form id="myForm" onsubmit="return validateForm()">
  <label for="email">Email:</label>
  <input type="text" id="email" name="email" />
  <input type="submit" value="Submit" />
</form>

<script>
  function validateForm() {
    var email = document.getElementById("email").value;
    if (email == "") {
      alert("Email must be filled out!");
      return false;
    }
    return true;
  }
</script>

在这个例子中，validateForm() 函数检查用户是否填写了电子邮件地址，如果未填写，弹出提示并阻止表单提交。

3. 获取和设置表单值

你可以使用 JavaScript 获取或设置表单字段的值。常用的属性有 value 和 checked（用于复选框和单选按钮）。

示例：获取表单值

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <input type="submit" value="Submit" />
</form>

<script>
  var username = document.getElementById("username").value;
  console.log(username);  // 获取文本框的值
</script>

示例：设置表单值

<form>
  <label for="username">Username:</label>
  <input type="text" id="username" name="username" />
  <input type="submit" value="Submit" />
</form>

<script>
  document.getElementById("username").value = "john_doe";  // 设置文本框的值
</script>

4. 表单提交

通过 JavaScript，你可以使用 submit() 方法来程序化地提交表单。需要注意的是，直接调用 submit() 方法不会触发 onsubmit 事件，因此在自动提交表单时不会进行验证。

示例：自动提交表单

<form id="myForm">
  <input type="text" name="username" id="username" />
  <input type="submit" value="Submit" />
</form>

<script>
  document.getElementById("myForm").submit();  // 自动提交表单
</script>

5. 阻止表单提交

你可以使用 event.preventDefault() 来阻止表单的默认提交行为。这样可以在提交表单前执行其他操作（如验证表单数据）。

示例：阻止表单提交

<form id="myForm">
  <input type="text" name="username" id="username" />
  <input type="submit" value="Submit" />
</form>

<script>
  var form = document.getElementById("myForm");

  form.addEventListener("submit", function(event) {
    event.preventDefault();  // 阻止默认提交行为
    alert("Form not submitted!");
  });
</script>

6. 处理复选框和单选按钮

对于复选框和单选按钮，JavaScript 使用 checked 属性来检查它们是否被选中。

示例：复选框

<form>
  <label for="agree">I agree to the terms and conditions</label>
  <input type="checkbox" id="agree" name="agree" />
  <input type="submit" value="Submit" />
</form>

<script>
  var checkbox = document.getElementById("agree");

  document.querySelector("form").addEventListener("submit", function(event) {
    if (!checkbox.checked) {
      alert("You must agree to the terms and conditions!");
      event.preventDefault();  // 阻止表单提交
    }
  });
</script>

示例：单选按钮

<form>
  <label for="male">Male</label>
  <input type="radio" id="male" name="gender" value="male" />
  <label for="female">Female</label>
  <input type="radio" id="female" name="gender" value="female" />
  <input type="submit" value="Submit" />
</form>

<script>
  var radios = document.getElementsByName("gender");

  document.querySelector("form").addEventListener("submit", function(event) {
    var selectedGender = Array.from(radios).find(radio => radio.checked);
    if (!selectedGender) {
      alert("Please select a gender!");
      event.preventDefault();  // 阻止表单提交
    }
  });
</script>

7. 动态更新表单内容

通过 JavaScript，你可以动态地修改表单中的内容，例如添加、删除字段，或者根据用户输入来更新其他部分。

示例：动态添加输入字段

<form id="dynamicForm">
  <input type="text" name="item" />
  <button type="button" onclick="addInput()">Add another item</button>
  <input type="submit" value="Submit" />
</form>

<script>
  function addInput() {
    var newInput = document.createElement("input");
    newInput.type = "text";
    newInput.name = "item";
    document.getElementById("dynamicForm").insertBefore(newInput, event.target);
  }
</script>

总结

JavaScript 在表单操作中的应用非常广泛，常见的用法包括：

• 获取和设置表单元素的值。
• 提交表单及阻止表单的默认提交行为。
• 表单验证、动态更新表单内容、操作复选框和单选按钮。
• 通过事件监听器处理表单的各种交互。

掌握这些表单操作方法，你就可以轻松处理和优化网页中的表单交互。更多详细内容请关注其他相关文章。