获取并验证HTML表单中复选框与单选按钮的值

嘿，我来给你一步步拆解怎么搞定这个表单里复选框（SurfaceType）和单选按钮（ReglazedBefore）的取值与验证，用JavaScript就能轻松实现，同时也给你提一下后端的注意事项：

一、处理复选框（SurfaceType） #

1. 获取选中的值 #

因为这个复选框的name是SurfaceType[]（数组形式），我们需要选中所有被勾选的元素，再提取它们的value：

// 获取所有被勾选的SurfaceType复选框
const selectedSurfaces = document.querySelectorAll('input[name="SurfaceType[]"]:checked');
// 将选中元素转换为数组并提取value值
const surfaceValues = Array.from(selectedSurfaces).map(input => input.value);
console.log(surfaceValues); // 输出示例：["Tub", "Tile", "Sink"]

2. 验证复选框 #

通常我们会要求用户至少选择一种表面类型，验证逻辑可以这样写：

function validateSurfaceType() {
  const selectedSurfaces = document.querySelectorAll('input[name="SurfaceType[]"]:checked');
  const statusElement = document.getElementById('mail-status');
  
  if (selectedSurfaces.length === 0) {
    statusElement.textContent = '请至少选择一种表面类型';
    statusElement.style.color = 'red'; // 可选：给提示加红色
    return false;
  }
  // 验证通过，清空提示
  statusElement.textContent = '';
  return true;
}

二、处理单选按钮（ReglazedBefore） #

1. 获取选中的值 #

单选按钮的name统一为ReglazedBefore，直接找被勾选的那个元素即可：

// 使用可选链操作符避免未选中时报错
const reglazedValue = document.querySelector('input[name="ReglazedBefore"]:checked')?.value;
console.log(reglazedValue); // 输出："Yes"、"No"、"Unknown" 或 undefined（未选时）

2. 验证单选按钮 #

单选按钮一般要求用户必须选择一个选项，验证逻辑如下：

function validateReglazedBefore() {
  const selectedRadio = document.querySelector('input[name="ReglazedBefore"]:checked');
  const statusElement = document.getElementById('mail-status');
  
  if (!selectedRadio) {
    statusElement.textContent = '请选择该表面是否曾经重新上过釉';
    statusElement.style.color = 'red';
    return false;
  }
  statusElement.textContent = '';
  return true;
}

三、整合到表单提交事件 #

把两个验证函数绑定到表单的提交事件中，确保验证通过后再提交：

const enquiryForm = document.getElementById('frmEnquiry');
enquiryForm.addEventListener('submit', function(e) {
  e.preventDefault(); // 先阻止默认提交行为
  
  // 执行两个验证
  const isSurfaceValid = validateSurfaceType();
  const isReglazedValid = validateReglazedBefore();
  
  if (isSurfaceValid && isReglazedValid) {
    // 验证通过，这里可以选择提交表单或者做其他逻辑
    console.log('所有验证通过，准备提交表单');
    // this.submit(); // 取消注释这句就会触发表单默认提交
  }
});

重要提醒：后端二次验证 #

前端验证只是提升用户体验，很容易被绕过，所以后端接收数据时一定要再做一次验证。这里给你个PHP示例：

// 获取复选框值（注意PHP中数组形式的name会自动转为数组）
$surfaceTypes = $_POST['SurfaceType'] ?? [];
// 验证至少选一个
if (empty($surfaceTypes)) {
  // 处理错误，比如返回提示给前端
}

// 获取单选按钮值
$reglazedBefore = $_POST['ReglazedBefore'] ?? '';
// 验证是否为合法选项
if (!in_array($reglazedBefore, ['Yes', 'No', 'Unknown'])) {
  // 处理错误
}

内容的提问来源于stack exchange，提问作者Junaid Ali