проверить несколько переменных без написания нескольких операторов if else

Question

Допустим, у нас есть 3 переменные, и я хочу проверить их пустыми или нет, не используя несколько блоков if else.

let firstName = "adem"
let lastName = "corona"
let email = "adamcorons@gmai.com"

If(firstName ===  " " && lastName !==  " " && email !==  " "){
Console.log("first name empty")
} else if .......

Каков наилучший способ решения этой проблемы? Большое спасибо

Answer 1

Вы можете избежать цепочек if-else, возвращаясь непосредственно из оператора if. Например, у вас может быть такая функция:

function isInputValid({ firstName, lastName, email }) {
  if (firstName === '') {
    return false;
  }
  
  if (lastName === '') {
    return false;
  }
  
  if (email === '') {
    return false;
  }
  
  return true;
}

console.log(isInputValid({ firstName: 'adem', lastName: 'corona', email: 'adamcorons@gmai.com' }));
console.log(isInputValid({ firstName: 'adem', lastName: '', email: 'adamcorons@gmai.com' }));

Вместо логического значения вы также можете вернуть объект, содержащий сообщение об ошибке, чтобы вы могли указать, какое поле отсутствует.

Answer 2

Вы можете попробовать зациклить требуемый массив полей, как это, чтобы сделать его коротким и гибким:

const validate = (values, required) = {
  let errors = {}

  required.map(field => {
    if (values[field] == '') {
      errors[field] = 'Required';
    }
  }

  return errors;
}

const required = ['firstName', 'lastName', 'email'];

const values = {
  firstName = '',
  lastname = 'test',
  email = ''
}

const errors = validate(values, required);

console.log(errors);
// errors = { firstName: 'Required', email: 'Required' }

Создание значений объекта вместо отдельных параметров делает возможным динамический доступ к ним во всех oop. Это может работать в зависимости от ваших потребностей и требований.

Затем, чтобы проверить, существуют ли ошибки, просто посмотрите, равен ли размер объекта 0, преобразовав его в массив:

if (Object.keys(errors).length == 0) {
  // No errors, continue as valid
} else {
  // There are errors, handle them as needed.
}

Answer 3

Еще один замечательный способ - использовать YUP. Можно обеспечить проверку в любом месте. Я всегда использую это. Вот пример.

const schema = Yup.object({
      last_name: Yup.string()
        .when('first_name', {
            is: true,
            then: Yup.string().required().label("Last Name"),
        }),
});

Вы можете использовать подобное следующим образом. У этого также есть много других удобств. Вы можете найти всю информацию с официального сайта ниже. https://github.com/jquense/yup

Answer 4

Я думаю, вы можете попробовать что-то вроде этого

// declare vars where you should, and add the vars you want to test in an object
    let result = [];
    let toTest= {
        firstName = "adem",
        lastName = "corona",
        email: "adamcorons@gmai.com",
     }

// declare this function to test your values
function testValue(){
 Object.keys(toTest).map(key => {
    if(!toTest[key]){
      result.push(key);
    }
  }   
}

// where you need, call your function to test your strings
   testValue();
// in your result array you will have the keys of all the empty vars in your object

Примечание: если для проверки поля у вас есть несколько плагинов, таких как Yup (если Formik) или validate. js, которые отлично подходят для этого! посмотри ! https://validatejs.org/

РЕДАКТИРОВАТЬ: Изменен ответ на массив, чтобы вы могли получить все результаты. Я рекомендую вам установить результат как объект {key: errorMessage, ...}, чтобы вам было легче использовать его после (например: вызовите error.nameOfInput в вашей форме для отображения ошибки.

EDIT2 : С объектом результат будет выглядеть так

// declare vars where you should, and add the vars you want to test in an object
    let error= {};
    let toTest= {
        firstName = "adem",
        lastName = "corona",
        email: "adamcorons@gmai.com",
     }

// declare this function to test your values
function testValue(){
 Object.keys(toTest).map(key => {
    if(!toTest[key]){
      error[key]={`${key} cannot be empty`};
    }
  }   
}

// where you need, call your function to test your strings
   testValue();

// in your render 
 <input name="firstName" ...props />
 {error.firstName && <div className='error'>{error.firstName} </div> }

Answer 5

Я считаю, что вы не можете достичь этого с помощью простого, как в вашем примере. Вам потребуется схема проверки и функция, которую вы запускаете для проверки, как это делают большинство библиотек. Таким образом, вам понадобится некоторый начальный объект, который связывает имена полей, их правила и сообщения об ошибках. Но тогда вам нужно будет использовать объект со свойствами вместо простых переменных. С этими вы не можете избежать проверки их без отдельных операторов if. Для справки проверьте, как работает joi или yup . Хотя я понимаю, что использование одного из них может оказаться слишком сложным для вас, поэтому я просто проверю каждое поле отдельно.