Javascript 验证是否只填写了一个输入

我有以下代码（查看代码片段），它在数组上运行

forEach

，以查看是否有空输入并添加CSS类。如果所有输入都是空的，或者如果填充了两个以上的输入，则必须“标记”

我想要执行的过程，应该只要求三个过程中的一个被填充，另外两个在保存之前为空

    Case A:
    
    optionA: filled
    optionB: empty
    optionC: empty
    
    Result Save: true.
    
    Case B:
    
    optionA: filled
    optionB: empty
    optionC: filled
    
    Result Save: false.


    Case C:
    
    optionA: empty
    optionB: empty
    optionC: empty
    
    Result Save: false.

Case A:

optionA: filled
optionB: empty
optionC: empty

Result Save: true.

Case B:

optionA: filled
optionB: empty
optionC: filled

Result Save: false.

Case C:

optionA: empty
optionB: empty
optionC: empty

Result Save: false.

const save=document.getElementById（“保存”）；
save.addEventListener（“单击”），函数（）{
让字段=[“optionA”、“optionB”、“optionC”]；
forEach（函数（元素、索引、数组）{
if（document.getElementById（element）.value==“”）{
document.getElementById（element.classList.add（“alertField”）；
}否则{
document.getElementById（element.classList.remove（“alertField”）；
}
});
});
.alertField{
边框：3倍纯红；
}
#拯救{
宽度：200px；
高度：20px；
边框：1px纯绿色；
光标：指针；
文本对齐：居中；
}

备选方案A：



备选案文B：



备选案文C：



拯救
如果只有一个字段有值，那么只需添加一个计数器就可以了，然后继续

const save = document.getElementById("save");

save.addEventListener("click", function () {
  
  let fields = ["optionA", "optionB", "optionC"];
  let fieldsWithValue = 0;
  fields.forEach(function (element, index, array) {
    if (document.getElementById(element).value == "") {
      document.getElementById(element).classList.add("alertField");
    } else {
      document.getElementById(element).classList.remove("alertField");
      fieldsWithValue++;
    }
  });
  if (fieldsWithValue == 1) {
    //valid
  }
  else {
    //invalid
  }
});

如果只有一个字段有值，那么就在其中添加一个计数器，然后继续

const save = document.getElementById("save");

save.addEventListener("click", function () {
  
  let fields = ["optionA", "optionB", "optionC"];
  let fieldsWithValue = 0;
  fields.forEach(function (element, index, array) {
    if (document.getElementById(element).value == "") {
      document.getElementById(element).classList.add("alertField");
    } else {
      document.getElementById(element).classList.remove("alertField");
      fieldsWithValue++;
    }
  });
  if (fieldsWithValue == 1) {
    //valid
  }
  else {
    //invalid
  }
});


const save=document.getElementById（“保存”）；
save.addEventListener（“单击”，函数（）{
让字段=[“optionA”、“optionB”、“optionC”]；
让输入=[]；
设hasVal=[]；
forEach（函数（元素、索引、数组）{
让输入=document.getElementById（元素）；
input.classList.remove（“alertField”）；
输入。推送（输入）；
如果（input.value==“”）{
hasVal.push（假）；
}否则{
hasVal.push（真）；
}
});
let count=hasVal.filter（布尔）.length；
如果（！计数）{
input.forEach（input=>input.classList.add（“alertField”）；
}
否则，如果（计数>1）{
inputs.forEach（输入=>{
if（输入值）{
input.classList.add（“alertField”）；
}
})
}否则{
//表单提交（）；
}
});
.alertField{
边框：3倍纯红；
}
#拯救{
宽度：200px；
高度：20px；
边框：1px纯绿色；
光标：指针；
文本对齐：居中；
}

备选方案A：



备选案文B：



备选案文C：



拯救

const save=document.getElementById（“保存”）；
save.addEventListener（“单击”，函数（）{
让字段=[“optionA”、“optionB”、“optionC”]；
让输入=[]；
设hasVal=[]；
forEach（函数（元素、索引、数组）{
让输入=document.getElementById（元素）；
input.classList.remove（“alertField”）；
输入。推送（输入）；
如果（input.value==“”）{
hasVal.push（假）；
}否则{
hasVal.push（真）；
}
});
let count=hasVal.filter（布尔）.length；
如果（！计数）{
input.forEach（input=>input.classList.add（“alertField”）；
}
否则，如果（计数>1）{
inputs.forEach（输入=>{
if（输入值）{
input.classList.add（“alertField”）；
}
})
}否则{
//表单提交（）；
}
});
.alertField{
边框：3倍纯红；
}
#拯救{
宽度：200px；
高度：20px；
边框：1px纯绿色；
光标：指针；
文本对齐：居中；
}

备选方案A：



备选案文B：



备选案文C：



拯救
如果您的目标是防止用户输入我从您的问题中了解到的文本，您可以收听要限制的字段的事件，两个字段都将亮起红色，最后一个字段只有在为空时才为红色，否则警报类将被删除

注意：阻止用户在输入字段中输入文本不是一种良好的用户体验


const save=document.getElementById（“保存”）；
const field1=document.getElementById（“optionA”）；
const form=document.getElementById（“表单”）；
form.addEventListener（“keydown”，e=>{
如果（e.target.name==“optionA”| | e.target.name==“optionB”）
e、 预防默认值（）
如果（例如target.name==“optionC”）{
e、 target.classList.remove（“alertField”）
}
});
save.addEventListener（“单击”），函数（）{
让字段=[“optionA”、“optionB”、“optionC”]；
forEach（函数（元素、索引、数组）{
if（document.getElementById（element）.value==“”）{
document.getElementById（element.classList.add（“alertField”）；
}否则{
document.getElementById（element.classList.remove（“alertField”）；
}
});
});
.alertField{
边框：3倍纯红；
}
#拯救{
宽度：200px；
高度：20px；
边框：1px纯绿色；
光标：指针；
文本对齐：居中；
}

备选方案A：



备选案文B：



备选案文C：



拯救
如果您的目标是防止用户输入我从您的问题中了解到的文本，您可以收听要限制的字段的事件，两个字段都将亮起红色，最后一个字段只有在为空时才为红色，否则警报类将被删除

注意：阻止用户在输入字段中输入文本不是一种良好的用户体验


const save=document.getElementById（“保存”）；
const field1=document.getElementById（“optionA”）；
const form=document.getElementById（“表单”）；
form.addEventListener（“keydown”，e=>{
如果（e.target.name==“optionA”| | e.target.name==“optionB”）
e、 预防默认值（）
如果（例如target.name==“optionC”）{
e、 target.classList.remove（“alertField”）
}
});
save.addEventListener（“单击”），函数（）{
让字段=[“optionA”、“optionB”、“optionC”]；
菲尔德