js实现表单

使用JavaScript实现表单

基本表单结构

HTML部分需要包含表单元素和输入字段。例如：

<form id="myForm">
  <label for="name">姓名:</label>
  <input type="text" id="name" name="name" required>

  <label for="email">邮箱:</label>
  <input type="email" id="email" name="email" required>

  <button type="submit">提交</button>
</form>

表单验证

通过JavaScript添加事件监听器，验证表单输入：

document.getElementById('myForm').addEventListener('submit', function(event) {
  event.preventDefault();

  const name = document.getElementById('name').value;
  const email = document.getElementById('email').value;

  if (name.trim() === '') {
    alert('请输入姓名');
    return;
  }

  if (!/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(email)) {
    alert('请输入有效的邮箱地址');
    return;
  }

  // 验证通过后的处理逻辑
  console.log('表单提交成功', { name, email });
});

动态表单处理

可以通过JavaScript动态添加或删除表单字段：

function addField() {
  const container = document.getElementById('fieldsContainer');
  const newField = document.createElement('input');
  newField.type = 'text';
  newField.className = 'dynamic-field';
  container.appendChild(newField);
}

表单数据提交

使用AJAX或Fetch API提交表单数据：

document.getElementById('myForm').addEventListener('submit', async function(event) {
  event.preventDefault();

  const formData = new FormData(this);

  try {
    const response = await fetch('/submit', {
      method: 'POST',
      body: formData
    });

    const result = await response.json();
    console.log('提交结果:', result);
  } catch (error) {
    console.error('提交失败:', error);
  }
});

表单重置

添加重置表单的功能：

document.getElementById('resetBtn').addEventListener('click', function() {
  document.getElementById('myForm').reset();
});

这些方法涵盖了表单的基本实现、验证、动态处理和数据提交等常见需求。根据具体应用场景，可以进一步扩展或修改这些代码。