javascript - 检查一个或两个输入字段是否为空，值为 0 或负数

Question

我有两个如下所示的输入字段：

<input type="number" class="formateninput form-control hoogtebreedte" name="breedte" max="<?php echo $explodemax[0]?>" min="<?php echo $explodemin[0]?>">
<input type="number" class="formateninput form-control hoogtebreedte" name="hoogte" max="<?php echo $explodemax[1]?>" min="<?php echo $explodemin[1]?>">

我不希望人们在继续之前能够输入 0、小于 1 或什么都不输入。

因此，在我的 jquery 中，我有以下 if 语句：

if($('.hoogtebreedte').val() !== '' && $('.hoogtebreedte').val() !== 0 && $('.hoogtebreedte').val() > 0){
go ahead
}else{
stop
}

一切正常，除了当你添加一个数字时，例如 90 到第一个输入，0 到第二个，它仍然继续。为什么会这样，我该如何解决？

标签： javascriptjqueryhtml

Answer 1

您只检查.hoogtebreedte类的第一个值，因此不检查第二个值。

下面是工作示例：

function test () {
  if($('.hoogtebreedte').eq(0).val() !== '' && $('.hoogtebreedte').eq(0).val() > 0 &&   $('.hoogtebreedte').eq(1).val() !== '' && $('.hoogtebreedte').eq(1).val() > 0){
    console.log('everything is ok')
  } else  {
    console.log('something is wrong')
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="formateninput form-control hoogtebreedte" name="breedte" max="99" min="0">
<input type="number" class="formateninput form-control hoogtebreedte" name="hoogte" max="99" min="0">
<button onclick='test()'>test</button>

此外，对于多个类，您可以使用以下代码：

function validate () {
  const validate = Array.from($('.hoogtebreedte')).every((_,index) => $('.hoogtebreedte').eq(index).val() !== '' && $('.hoogtebreedte').eq(index).val() > 0)
  return validate ? console.log('everything is ok') : console.log('something is wrong')
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="number" class="formateninput form-control hoogtebreedte" name="breedte" max="99" min="0">
<input type="number" class="formateninput form-control hoogtebreedte" name="hoogte" max="99" min="0">
<input type="number" class="formateninput form-control hoogtebreedte" name="hoogte" max="99" min="0">
<button onclick='validate()'>validate</button>