将表单验证函数分解为较小的函数



我有一个表单验证,它有 8 个文本区域 - 其中只有 1 个具有不同的条件。 如果它们少于 140 个字符,则会检查其中 7 个。我对 JavaScript 相当陌生,想知道如何将其分解为 2 个函数,一个用于少于 140 个字符,另一个用于字数。

inputTextAreas.forEach(input => {
     let inputValue = input.value;
      input.classList.remove("error");
      if(input.name == 'question1') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question1);
        }
      } else if (input.name == 'question2') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question2);
        }
      } else if (input.name == 'question3') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question3);
        }
      } else if (input.name == 'question4') {
        if (questionFourWordCount.length < 2 || questionFourWordCount.length > 7) { 
          $self.outputInputError(input,inputTextAreasErrors.question4);
        }
      } else if (input.name == 'question5') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question5);
        }
      } else if (input.name == 'question6') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question6);
        }
      } else if (input.name == 'question7') {
        if (input.value.length < 10 || input.value.length > 140) {
          $self.outputInputError(input,inputTextAreasErrors.question7);
        }
      } else {
        if (input.name == 'question8') {
          if (input.value.length < 10 || input.value.length > 140) {
            $self.outputInputError(input,inputTextAreasErrors.question8);
          }
        }
      }
    });
如果通过以下方式替换

else,则利用使用括号表示法访问对象的属性

if (input.name === 'question4') {
    if (questionFourWordCount.length < 2 || questionFourWordCount.length > 7) {
        $self.outputInputError(input, inputTextAreasErrors.question4);
    }
} else {
    if (input.value.length < 10 || input.value.length > 140) {
        $self.outputInputError(input, inputTextAreasErrors[input.name]);
    }
}
inputTextAreas.forEach(input => {
 let inputValue = input.value;
  input.classList.remove("error");
  if(input.name == 'question1' || input.name == 'question2' || input.name == 'question3' || input.name == 'question5' || input.name == 'question6' || input.name == 'question7' || input.name == 'question8') {
    if (input.value.length < 10 || input.value.length > 140) {
      $self.outputInputError(input,inputTextAreasErrors.input.name);
    }
  } else{
    if (questionFourWordCount.length < 2 || questionFourWordCount.length > 7) { 
      $self.outputInputError(input,inputTextAreasErrors.input.name);
    }
  }
});

我认为这样就可以了。我还动态更改了名称。让我知道这是否有效。没有关于此代码的更多信息。谢谢。

最新更新