Javascript 在5个复杂输入中至少有1个有效时提交表格

摘要：我有一个包含5个输入的表单：3个字符输入只接受字母文本，1个日期输入，1个字符输入只接受数字。当用户单击submit按钮时，5个输入中至少有1个需要有效才能执行

努力：我已经为每个输入设置了使用键控键上的if-else进行验证，其中3个字母输入要求长度小于50且大于2。日期输入必须小于2050年12月31日，数字输入需要7个字符。我的考虑是，我应该为每个验证方法创建一个单独的函数，并返回true/false。通过这种方式，submit按钮可以查找布尔值和一组新的运算符

这是每个输入的外观：

<div class="adv-searchbar">
   <div class="adv-searchbar__wrapper">
      <div class="adv-searchbar__wrapper__search-box">
         <span class="search__column-1">
            <input class="alphInput1" placeholder="" value="">
         </span>
         <span class="search__column-1">
            <input class="alphInput2" placeholder="" value="">
         </span>
         <span class="search__column-1">
            <input class="alphInput3" placeholder="" value="">
         </span>
         <span class="search__column-2">
            <input class="dateInput" placeholder="" value="">
         </span>
         <span class="search__column-2">
            <input class="numInput" placeholder="" value="">
         </span>
         <button type="submit" class="">submit</button>
         </div>
      </div>
   </div>

---

到目前为止，如果我将函数放在一个keyup函数中，我可以看到

inputValue

数组中输入的所有值。从概念上讲，我正在努力思考我应该如何进步。这是最有效/最简单的方法吗？

看起来不错。通过属性而不是类来确定元素可能是一种更合适的方法（例如，添加属性而不是alphInput3） 比如验证字母数字

<input validate-alphanumeric validate-rule-length=3 ...

---

我暂时不想使用任何框架，但如果要使用这些验证，我将如何修改最后一个函数：checkFields（）？
$('.dateInput').keyup(function (e) {
   let input = $(this);
   if (input.prop('max') < input.val()) {
       $(this).css('border-color', 'red');
   } else $(this).css('border-color', 'rgba(0,0,0,0.33');
});

$('.numInput').keyup(function () {
   var val = this.value.replace(/\D/g, '');
   var newVal = '';
   if (val.length > 4) {
       this.value = val;
   }
   if ((val.length > 3) && (val.length < 6)) {
       newVal += val.substr(0, 3) + '-';
       val = val.substr(3);
   }
   if (val.length > 5) {
       newVal += val.substr(0, 3) + '-';
       newVal += val.substr(3, 2) + '-';
       val = val.substr(5);
   }
   newVal += val;
   this.value = newVal.substring(0, 11);
});

function checkFields() {
   // get all inputs
   let searchInputs = $('.adv-searchbar input');
   console.log(searchInputs);

   // check each input value
   var inputValues = searchInputs.map(function () {
      return $(this).val();
   }).toArray();
   console.log(inputValues);

   // if any input has correct value, enable button

   // else wait for a valid value
 }

<input validate-alphanumeric validate-rule-length=3 ...