使用Flag函数验证表单字段失效问题排查

错误原因 #

你遇到的问题核心是JavaScript基本类型的按值传递特性：

• 你将全局变量flags作为参数传入checkFields函数，但函数内部的flags是一个局部副本，修改这个副本不会影响全局的flags变量。
• 因此即使校验不通过（函数内返回flags = true），全局的flags仍然是初始值false，导致后续的console.log代码依然执行。

修正方案 #

方案1：让checkFields返回校验结果（推荐） #

修改checkFields函数，去掉参数，直接返回布尔值表示校验是否出错，然后在点击事件中用返回值判断：

核心代码修正

createTracker.onclick = () => {
  // 接收校验结果
  const hasError = checkFields()
  if (!hasError) {
    console.log(newTrackerName.value, newTrackerDate.value);
  }
}

// 直接返回校验结果
const checkFields = () => {
  if (newTrackerName.value === "") {
    prompts(newTrackerName.getAttribute("title"), "cannot be blank.")
    return true // 有错误返回true
  }
  return false // 无错误返回false
}

对应补充代码的修正

createTracker.onclick = () => {
    const hasError = checkFields() 
    if (!hasError) {
        console.log(document.querySelector("input[name='trackerTypes']:checked").value, newTrackerName.value, newTrackerDate.value, minCountRange.value, maxCountRange.value, tagValue);
    }
}

const checkFields = () =>  {
    if(newTrackerName.value === "") {
        prompts(newTrackerName.getAttribute("title"), "cannot be blank.")
        return true
    }
    return false
}

方案2：直接操作全局变量（不推荐，不利于代码维护） #

如果坚持使用全局flags，可以去掉checkFields的参数，直接在函数内修改全局变量：

const checkFields = () => {
  if (newTrackerName.value === "") {
    prompts(newTrackerName.getAttribute("title"), "cannot be blank.")
    flags = true
    return
  }
  flags = false
}

优化建议 #

• 尽量减少全局变量的使用，可以直接用checkFields的返回值进行判断，避免全局状态的混乱。
• 后续可以扩展checkFields函数，添加更多字段的校验逻辑（比如日期合法性、单选框选中状态等），保持校验逻辑的集中性。

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