验证多个变量而不编写多个 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 语句返回来避免链接的if-else 语句。例如，你可以有这样一个函数：

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

使值成为对象而不是单个参数可以在循环中动态访问它们。这可能取决于您的需求和要求。

然后检查是否存在错误，只需将对象的大小转换为数组即可查看对象的大小是否为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(if Formik) 或 validate.js 非常适合它！看一看 ！ https://validatejs.org/

编辑：将响应更改为数组，以便您获得所有结果。我建议您将结果设置为对象 {key: errorMessage, ...} 以便您在之后更容易使用他（例如：在表单中调用 error.nameOfInput 以显示错误。

编辑2： 使用对象结果看起来像这样

// 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 的工作原理。虽然我知道使用其中一个可能对您来说太过分了，所以我只是分别检查每个字段。