将表单验证功能分解为更小的功能答案

【问题标题】：Breaking down a form validation function into smaller ones将表单验证功能分解为更小的功能
【发布时间】：2019-01-18 12:27:07
【问题描述】：

我有一个包含 8 个文本区域的表单验证 - 其中只有 1 个具有不同的条件。如果少于 140 个字符，则检查其中的 7 个。我对 JavaScript 还很陌生，想知道如何将其分解为 2 个函数，1 个用于少于 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);
          }
        }
      }
    });

【问题讨论】：

是的，试着把它放在一个函数中。请您向我们展示您的尝试吗？
提示：inputTextAreasErrors.question2 等似乎可以用inputTextAreasErrors[input.name] 代替，那么它们每个的代码都是相同的。

标签： javascript function ecmascript-6

【解决方案1】：

您可以通过以下方式替换 else if，利用 bracket notation 访问对象的属性

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]);
    }
}

【讨论】：

【解决方案2】：

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);
    }
  }
});

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

【讨论】：