必须填写两个文本字段之一

Posted 2023-05-09

【中文标题】必须填写两个文本字段之一

【英文标题】：One of the two text fields must be filled in

【发布时间】：2021-10-09 03:31:06

【问题描述】：

表单中目前有两个名为 reg_12 / reg_13 的文本字段。

必须填写双 reg_12 或 reg_13 字段。

我做了如下 它只检查 reg_12 和 reg_13 都没有值的情况。 当两个文本字段都填写时，提交完成。

        if (reg_12.value.length === 0 && reg_13.value.length === 0) 
            alert("One of the two must be entered.");
            return false;
        

正如问题标题所说， 应该只有一个 reg_12 和 reg_13 文本字段值。

同时具有 reg_12 和 reg_13 文本字段，或者 当 reg_12 和 reg_13 文本字段都丢失时，如何让它停止？

【问题讨论】：

你当前的检查没问题，只有当 reg_12 和 reg_13 都为空时才return false

【参考方案1】：

您所描述的是异或运算符XOR，可以用这个条件矩阵来表示：

reg_12  reg_13  result

true    true    false
false   false   false
true    false   true
false   true    true

...true 表示已填满，false 表示为空。可以观察到当reg_12 state和reg_13 state相等时，结果为false。

这个条件在JS中用这句话很容易实现：

if (Boolean(reg_12.value.length) === Boolean(reg_13.value.length)) 
   alert("One of the two must be entered.");
   return false;

也可以写成：

if (!reg_12.value.length === !reg_13.value.length) 
   alert("One of the two must be entered.");
   return false;

【参考方案2】：

按照我的理解，你有以下条件/要求：

如果 reg_12 和 reg_13 都为空，则必须显示错误 如果 reg_12 和 reg_13 都填满，则必须显示错误 如果 reg_12 填满，reg_13 为空，则表格正常 如果 reg_12 为空，而 reg_13 填写，则表格是可以的

考虑到这一点，您最好将其分解为几个不同的条件，并使用一些不错的、语义命名的变量来满足这些要求。虽然您可能可以以更简洁的方式进行操作，但我怀疑可读性会受到影响并且维护可能会变得困难。我会建议这样的事情：

function checkForm(evt) 
  evt.preventDefault();

  const reg12 = document.querySelector('#reg_12');
  const reg13 = document.querySelector('#reg_13');

  const reg12IsFilled = reg12.value.length > 0;
  const reg13IsFilled = reg13.value.length > 0;

  const bothAreFilled = reg12IsFilled && reg13IsFilled;
  const neitherAreFilled = !reg12IsFilled && !reg13IsFilled;

  if (neitherAreFilled) 
    console.log('one of these needs to be filled');
   else if (bothAreFilled) 
    console.log('only on of these can be filled');
   else 
    console.log('everything looks good here!');
  


document.querySelector('#checkForm').addEventListener('click', checkForm);

.form-group 
  margin-bottom: 1rem;

<form id="myForm">
  <div class="form-group">
    <label for="reg_12">reg 12</label>
    <input id="reg_12" name="reg_12" />
  </div>

  <div class="form-group">
    <label for="reg_12">reg 13</label>
    <input id="reg_13" name="reg_13" />
  </div>

  <button id="checkForm" >Check Form</button>
</form>

你可以简化和去除一些抽象，但逻辑是合理的。