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

Posted

技术标签:

【中文标题】必须填写两个文本字段之一【英文标题】: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>

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

【讨论】:

以上是关于必须填写两个文本字段之一的主要内容,如果未能解决你的问题,请参考以下文章

仅在两个文本字段之一中的 Ipad 数字

ActionScript 3.0 - 否则如果是文本字段的条件

如何处理 UiTableviewCell 文本字段?

通过点击文本字段进行导航

PHP - 检查是不是填写了两个表单字段之一?

如果文本字段被快速填写,则启用按钮