当 5 个复杂输入中至少有 1 个有效时提交表单

Question

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

努力：我已经为每个输入设置了使用 if-else on keyup 的验证，其中 3 个字母输入要求长度小于 50 且大于 2。日期输入必须低于 2050 年 12 月 31 日，数字输入需要 7 个字符。我的考虑是我应该为每个验证方法创建一个单独的函数，并返回真/假。这样，提交按钮可以查找布尔值与一组新的运算符。

这是每个输入的样子：

<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>

输入 1 到 3（仅限字母，长度 2）：

$('.alphInput1, .alphInput2, .alphInput3').keyup(function (e) {
   let input = $(this);
   this.value = this.value.replace(/[^A-Za-z]/g, '');
   if (this.value.length <= 50 && this.value.length >= 2) {
       console.log(this.value);
       $(this).css('border-color', 'rgba(0,0,0,0.33');
   }
   else{
       $(this).css('border-color', 'red');
   }
 });

输入 4（最大值：2050 年 12 月 31 日）：

$('.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');
});

输入5（长度必须为7）：

$('.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
 }

到目前为止，如果我将函数放在其中一个 keyup 函数中，我可以看到 inputValue 数组中的所有输入值。从概念上讲，我正在为我应该如何进步而苦苦挣扎。这是最有效/最简单的方法吗？

Answer 1

看起来还不错。通过属性而不是类来识别元素将是一种更合适的方式（比如添加一个属性而不是 alphInput3 比如验证字母数字

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

或者..你总是可以使用像https://jqueryvalidation.org/这样的现有框架