JavaScript实现订单配送地址必填校验的需求及代码问询

问题说明 #

订单网站提供自提（Pick Up）和配送（Delivery）两种选项：选择自提时无需填写地址；选择配送时显示配送地址输入框，且提交表单时需强制检查该地址是否填写。

原代码存在的问题 #

1. errMsg 和 result 未初始化，会导致运行报错
2. 选项选中判断逻辑错误：pickup 和 delivery 是布尔值（checked 属性返回布尔），不能和空字符串 "" 比较
3. 配送地址的判断逻辑错误：无论是否选择配送都会检查地址，且条件 (deladd == false) && (deladd == "") 永远不成立（字符串不会等于false）
4. init 函数嵌套在 validate 内部，无法被 window.onload 正确调用
5. 缺少 showAddress() 和 hideAddress() 函数，导致点击单选框时无法控制地址区域的显示隐藏

修正后的完整代码 #

HTML 部分

<form id="form">
  <div class="box">选择服务类型：
    <input type="radio" id="pickup" name="option" value="pickup" class="radio" onclick="hideAddress()">
    <label for="pickup" class="check">自提</label>
    <input type="radio" id="delivery" name="option" value="delivery" class="radio" onclick="showAddress()">
    <label for="delivery" class="check">配送</label>
  </div><br>

  <div class="show" id="show" style="display: none;">
    <!-- 配送地址 -->
    <input type="text" placeholder="请填写配送地址:" class="box" id="delivery_address" name="delivery_address">

    <!-- 账单地址与配送地址是否一致 -->
    <label for="same_address">账单地址与配送地址一致</label>
    <input type="checkbox" id="same_address" name="same_address_or_not" value="same_address" onclick="autoFill()">
  </div>
  <br>
  <button type="submit">提交订单</button>
</form>

JavaScript 部分

// 显示配送地址区域
function showAddress() {
  document.getElementById("show").style.display = "block";
}

// 隐藏配送地址区域
function hideAddress() {
  document.getElementById("show").style.display = "none";
}

// 表单验证函数
function validate() {
  let pickup = document.getElementById("pickup").checked;
  let delivery = document.getElementById("delivery").checked;
  let deladd = document.getElementById("delivery_address").value.trim(); // 去除首尾空格
  let errMsg = "";
  let result = true;

  // 检查是否选择了服务类型
  if (!pickup && !delivery) {
    errMsg += "请选择自提或配送选项。\n";
    result = false;
  }

  // 选择配送时，检查地址是否为空
  if (delivery && deladd === "") {
    errMsg += "配送地址不能为空。\n";
    result = false;
  }

  // 弹出错误提示
  if (errMsg !== "") {
    alert(errMsg);
  }

  return result; // 返回false阻止表单提交
}

// 初始化表单提交事件
function init() {
  const regForm = document.getElementById("form");
  regForm.onsubmit = function() {
    return validate();
  };
}

window.onload = init;

关键修复点 #

• 初始化errMsg和result变量，避免未定义报错
• 修正选项选中判断逻辑：用布尔值非运算!pickup && !delivery检查是否未选择任何选项
• 仅当选择配送时，才检查配送地址是否为空（同时去除输入首尾空格，避免空白字符被视为有效输入）
• 将init函数移到validate外部，确保window.onload能正确调用
• 补充showAddress和hideAddress函数，实现地址区域的显示/隐藏控制
• 补全HTML中的form标签和提交按钮，确保表单能正常提交

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