如何通过 JavaScript 设置表单操作？

在 web 开发中，表单是非常常见的元素之一。借助 JavaScript，我们可以很方便地控制表单的各种操作，比如获取表单数据、验证表单、提交表单等。本文将介绍如何通过 JavaScript 来设置表单操作。

获取表单元素

在 JavaScript 中，我们可以通过 document.querySelector 或者 document.querySelectorAll 方法来获取页面上的表单元素。这两个方法的用法和 CSS 的选择器很类似，前者返回一个元素，后者返回一个元素数组。例如：

// 获取第一个表单元素
const input = document.querySelector('input');
// 获取所有表单元素
const inputs = document.querySelectorAll('input');

表单验证

在提交表单之前，我们通常需要对表单进行验证，以确保用户输入的数据合法。常见的表单验证方法有以下几种：

• 必填字段验证

  检查表单中的必填字段是否填写，如果没有填写则阻止表单提交。例如：

  const form = document.querySelector('form');
  
  form.addEventListener('submit', (e) => {
    const requiredInputs = form.querySelectorAll('[required]');
    let isValid = true;
  
    requiredInputs.forEach(input => {
      if (!input.value) {
        isValid = false;
      }
    });
  
    if (!isValid) {
      e.preventDefault();
      alert('请填写必填字段！');
    }
  });
  

• 数据类型验证

  检查表单中填写的数据类型是否正确。例如：

  const ageInput = document.querySelector('#age');
  
  ageInput.addEventListener('blur', () => {
    const age = parseInt(ageInput.value);
  
    if (isNaN(age) || age < 0 || age > 120) {
      alert('请输入正确的年龄！');
      ageInput.value = '';
      ageInput.focus();
    }
  });
  

• 密码强度验证

  检查密码是否符合一定的强度要求。例如：

  const passwordInput = document.querySelector('#password');
  
  passwordInput.addEventListener('input', () => {
    const password = passwordInput.value;
  
    if (/[a-z]/.test(password) && /[A-Z]/.test(password) && /\d/.test(password)) {
      passwordInput.setCustomValidity('');
    } else {
      passwordInput.setCustomValidity('密码必须由大小写字母和数字组成！');
    }
  });
  

• 邮箱验证

  检查邮箱地址是否合法。例如：

  const emailInput = document.querySelector('#email');
  
  emailInput.addEventListener('blur', () => {
    const email = emailInput.value;
  
    if (!/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(email)) {
      alert('请输入正确的邮箱地址！');
      emailInput.value = '';
      emailInput.focus();
    }
  });
  

表单提交

当表单验证通过后，我们就可以通过 JavaScript 来提交表单。常见的表单提交方式有以下几种：

• 通过 form.submit() 方法提交表单

  这是最常见的表单提交方式，通过调用 form 元素的 submit() 方法来提交表单。例如：

  const form = document.querySelector('form');
  
  form.addEventListener('submit', (e) => {
    e.preventDefault();
  
    // 表单验证代码
  
    form.submit();
  });
  

• 通过 XMLHttpRequest 对象提交表单

  如果希望在提交表单时进行一些异步操作，比如向服务器发送数据、获取服务器返回的数据等，可以用 XMLHttpRequest 对象来实现。例如：

  const form = document.querySelector('form');
  
  form.addEventListener('submit', (e) => {
    e.preventDefault();
  
    // 表单验证代码
  
    const xhr = new XMLHttpRequest();
    xhr.open('POST', form.action);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    xhr.onreadystatechange = () => {
      if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
        const response = JSON.parse(xhr.responseText);
        // 处理服务器返回的数据
      }
    };
    xhr.send(JSON.stringify({...}));
  });
  

• 通过 fetch API 提交表单

  如果你使用的是现代浏览器，可以使用 fetch API 来发送表单数据。它比 XMLHttpRequest 更简单方便，可以实现更加灵活的请求和响应操作。例如：

  const form = document.querySelector('form');
  
  form.addEventListener('submit', (e) => {
    e.preventDefault();
  
    // 表单验证代码
  
    fetch(form.action, {
      method: form.method,
      headers: { 'Content-Type': 'application/json;charset=UTF-8' },
      body: JSON.stringify({...})
    })
    .then(response => response.json())
    .then(data => {
      // 处理服务器返回的数据
    })
    .catch(error => {
      console.log(error);
    });
  });
  

总结

使用 JavaScript 设置表单操作可以让我们更加灵活地处理表单数据，实现更加丰富的表单交互体验。在开发中，我们要熟练掌握表单元素的获取、表单验证和表单提交等操作，以提高开发效率。