我用php循环生成了这个输入
<input type="text" name="input1" id="input1" class="input">
<input type="text" name="input2" id="input2" class="input">
<input type="text" name="input3" id="input3" class="input">
<input type="text" name="input3" id="input4" class="input">
我有这个jQuery代码来检查输入是否为空
if ( $('#input1').val() !== '' && $('#input2').val() !== '' && $('#input3').val() !== '' && $('#input4').val() !== '') {
console.log("The inputs are not empty")
}else{
console.log("One or more inputs are empty")
}
输入是通过循环生成的，所以输入的数量会改变，我想要一些类似于这样的代码来做验证，我试过了，但是它没有工作
if ( $('.input').val() !== '') {
console.log("The inputs are not empty")
}else{
console.log("One or more inputs are empty")
}
拜托，我该怎么解释，如果你能帮我的话，我将不胜感激。
$('.input')将返回多个值，但$('.input').val()只能返回一个值，因此它只返回第一个值。 您需要的是对输入进行循环。 像这样的东西:
// set an initial value
var notEmpty = true;
// loop over the inputs and update the value if any are empty
$('.input').each(function () {
if ($(this).val() === '') {
notEmpty = false;
}
});
// check the resulting value
if (notEmpty) {
console.log("The inputs are not empty")
} else {
console.log("One or more inputs are empty")
}
这是因为$('.input')返回一组元素（如数组）。 一个优雅的解决方案是使用filter:
null
if ( $('.input').filter(function(){ return $(this).val() !== ''}).length > 0) {
console.log("The inputs are not empty")
}else{
console.log("One or more inputs are empty")
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" name="input1" id="input1" class="input">
<input type="text" name="input2" id="input2" class="input">
<input type="text" name="input3" id="input3" class="input">
<input type="text" name="input3" id="input4" class="input">
下面是一个普通的JavaScript解决方案:
null
let isValid = false;
document.querySelectorAll('input').forEach(input => {
if(input.value !== ''){
isValid = true;
}
});
console.log('is this valid?', isValid);<input type="text" name="input1" id="input1" class="input">
<input type="text" name="input2" id="input2" class="input">
<input type="text" name="input3" id="input3" class="input">
<input type="text" name="input3" id="input4" class="input">