如何验证多个分组输入？

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

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

 $('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 2

类似的东西？

 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>

Answer 3

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

• 以下演示具有适当的 HTML

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

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

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

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

• 每当用户在<input>输入数据然后点击（又名"blur"事件）时，就会触发这种伪表单验证。 整个动作链组合起来就是"change"事件。

• <form>标记注册到"change"事件，因此如果<form>中的任何<input> <form>是事件源（又名event.target - 用户在其上触发"change"事件的<input> ）。

 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>