必须填写两个文本字段之一
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>
你可以简化和去除一些抽象,但逻辑是合理的。
【讨论】:
以上是关于必须填写两个文本字段之一的主要内容,如果未能解决你的问题,请参考以下文章