简化IF/ELSE IF/ELSE块

Question

我正在创建自己的验证代码。我需要将每个输入框的if语句分开，以便同时显示错误。我注意到，如果它在相同的if块上，那么只会显示第一个错误。有什么方法可以简化我的代码吗？

​

flag = 0;
//first if
if (first_name.length == 0) {
  flag = 0;
  $("label[for='firstname'").text('This field is required').css("display", "inline-block");
} else if (!first_name.match(name_regex)) {
  flag = 0;
  $("label[for='firstname'").text('Firstname must be composed of letters only').css("display", "inline-block");
} else if (first_name.length < 3) {
  flag = 0;
  $("label[for='firstname'").text('3 letters are required for lastname').css("display", "inline-block");
} else {
  flag = +1;
  $("label[for='firstname'").hide();
}

//second if
if (last_name.length == 0) {
  flag = 0;
  $("label[for='lastname'").text('This field is required').css("display", "inline-block");
} else if (!last_name.match(name_regex)) {
  flag = 0;
  $("label[for='lastname'").text('Lastname must be composed of letters only').css("display", "inline-block");
} else if (last_name.length < 2) {
  flag = 0;
  $("label[for='lastname'").text('2 letters are required for lastname').css("display", "inline-block");
} else {
  $("label[for='lastname'").hide();
  flag += 1;
}

//third if
if (validateEmail(email)) {
  if (data.result) {
    $("input#userEmail").css("border-color", "#ac2925");
    $("label[for='email'").text('Email exists').css("display", "inline-block");
  } else {
    $("input#userEmail").css("border-color", "#e3e3e3");
    $("label[for='email'").hide();
    flag += 1;
  }
} else {
  $("input#userEmail").css("border-color", "#ac2925");
  $("label[for='email'").text('Please input a valid email address').css("display", "inline-block");;
}

//fourth if on verification success
if (flag == 3) {
  alert("All validation succeded!");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

Answer 1

只需将其提取到一个函数中：

 function validate(inputName, labelName, minLetters, regex){
   const el = $(inputName);
   const label = $(labelName);
   if(!el || !!label) throw "validate: el not found";

  if(!el.val()){
    label.text("You need to fill in this!");
    return false;
  }

  if(regex && !el.val().test(regex)){
    label.text("The input contains invalid chars!");
    return false;
  }

 if(minLetters && el.val().length < minLetters){
   label.text("to short!");
   rerurn false;
 }

 return true;
 }

Answer 2

我建议使验证例程更加通用。请参考以下解决方案(注:未测试)：

​

function validate(funcName, minLength) {
  if (this[funcName].length == 0) {
    $("label[for='"+funcName+"'").text('This field is required').css("display", "inline-block");
  } else if (!this[funcName].match(name_regex)) {
    flag = 0;
    $("label[for='"+funcName+"'").text(funcName +' must be composed of letters only').css("display", "inline-block");
  } else if (this[funcName].length < minLength) {
    $("label[for='"+funcName+"'").text(minLength + ' letters are required for ' + funcName).css("display", "inline-block");
  } else {
    $("label[for='"+funcName+"'").hide();
    return true;
  }
  return false;
}

if (validate("firstname", 2) 
    && validate("lastname", 3) 
    && validateEmail(email)
) {
  // everything seems to be OK. 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

​

Answer 3

我的方法是：

对于每个验证，

1. 都有单独的If块，所有验证都将通过这些块进行检查。并在每次检查时生成/附加验证错误消息。
2. 在函数中写入if else块。可以为要验证的每个字段调用该函数。该函数将为每次调用返回验证错误消息，该消息可以附加到单个字符串中。