javascript - 如何验证多个分组输入？

Question

我在这里有这个结构：

<div>
  <div class="row">
    <input id="1a">
    <input id="1b">
  </div>
  <div class="row">
    <input id="2a">
    <input id="2b">
  </div>
  <div class="row">
    <input id="3a">
    <input id="3b">
  </div>
  <div class="row">
    <input id="4a">
    <input id="4b">
  </div>
</div>

如果用户将所有内容都留空，则没有问题。但是，例如，当他输入某些内容1a并1b留空时，这应该会导致错误。那么我怎样才能知道是否a & b为每一行填充了呢？这有点棘手，我不知道如何处理。

Answer 1

通常多个表单控件（例如、、、<input>等<textarea>）<select>应该在一个<form>标签内。此外，所描述的行为称为表单验证，它要求所述<form>标签由"submit"事件触发。

• 以下演示具有正确的 HTML

  • <form>而<fieldset>不是<div>

  • <output>为每个添加<fieldset>

• 此外，JavaScript 旨在在任何一对<input>有 a.value而另一对没有时显示一条消息。

  • 消息：<output>Complete data input</output>

• <input>每当用户在 an 中输入数据然后单击（也称为"blur"事件）时，都会触发此伪表单验证。整个动作链组合起来就是"change"事件。

• 该<form>标签已注册到"change"事件中，因此如果其中的任何一个<input>是<form>事件起源（又名event.target-<input>用户触发"change"事件的那个）。

const form = document.forms[0];

form.onchange = reqData;

function reqData(event) {
  let origin = event.target;
  if (origin.tagName === 'INPUT') {
    const parent = origin.parentElement;
    const output = parent.querySelector('output');
    const inputs = [...parent.querySelectorAll('input')];
    let total = inputs.length;
    let count = 0;
    for (let input of inputs) {
      if (input.value) {
        count++;
      }
    }
    if (count < total && count > 0) {
      output.style.opacity = '1';
    } else {
      output.style.opacity = '0';
    }
  }
  return false;
}

output {
  opacity: 0;
  color: tomato
}

<form>
  <fieldset>
    <input><br>
    <input> <output>Complete data input</output>
  </fieldset>
  <fieldset>
    <input><br>
    <input> <output>Complete data input</output>
  </fieldset>
  <fieldset>
    <input><br>
    <input> <output>Complete data input</output>
  </fieldset>
  <fieldset>
    <input><br>
    <input> <output>Complete data input</output>
  </fieldset>
</form>

Answer 2

您可以通过这种简单的方式实现它

$('button').on("click", () => {
  $('body').find(".row").each(function(index, row){
     var count = 0;
     $(row).find("input").each(function(i, input) {
        if($(input).val() !== "")
         count++;
     })
     if(count === 1)
      alert("Row " + (index + 1) + " is invalid");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class="row">
    <input id="1a">
    <input id="1b">
  </div>
  <div class="row">
    <input id="2a">
    <input id="2b">
  </div>
  <div class="row">
    <input id="3a">
    <input id="3b">
  </div>
  <div class="row">
    <input id="4a">
    <input id="4b">
  </div>
</div>

<button>Check</button>

Answer 3

类似的东西？

const  inRow  = document.querySelectorAll('.row')
  ,    valida = document.querySelector('button')
  ,    respon = document.querySelector('output')
  ;
valida.onclick =_=>
  {
  let OK = true
  inRow.forEach(eR=>
    {
    let vals = 0
    eR.querySelectorAll('input').forEach(eI=>{ vals+=eI.value.length ? 1:0 })
    if (vals===1) OK=false
    })
  respon.value = OK ? 'OK' : 'bad'
  }

<div>
  <div class="row"> <input id="1a"> <input id="1b"> </div>
  <div class="row"> <input id="2a"> <input id="2b"> </div>
  <div class="row"> <input id="3a"> <input id="3b"> </div>
  <div class="row"> <input id="4a"> <input id="4b"> </div>
</div>

<button>validate</button> <output></output>