寻找关于如何清理某些条件语句的建议

Question

在React中开发验证功能。我是一个新手，不想在学习的同时养成任何坏习惯，所以我正在寻找关于如何清理这里的代码块的建议。

该函数检查输入字段，如果它们为空，则将适当的消息附加到数组。检查所有输入字段后，如果该数组为空，则继续提交表单。如果该数组包含错误消息，则该消息将显示到屏幕（未显示）

validation = (event) => {
    event.preventDefault();
    let errors = []
    const {firstName, lastName, emailAddress, password, confirmPassword} = {...this.state}

    if(firstName.length === 0) errors.push('Please provide a value for First Name');
    if(lastName.length === 0) errors.push('Please provide a value for Last Name');

    if(password.length === 0){
      errors.push('Please provide a value for Password');
    }else if(password !== confirmPassword){
      errors.push('Passwords do not match');
    };

    if(emailAddress.length === 0) {
      errors.push('Please provide a value for Email Address');
    }else if(!emailRegex.test(emailAddress)){
      errors.push('Invalid email address');
    };

    this.setState({errors: errors})

    if(errors.length === 0) this.logIn()
  }

  logIn = () => {
    console.log('good to go')
  }; 

只是在寻找清理我的条件语句的方法，如果可能的话！谢谢

Answer 1

也许下面的内容就足够了。如果您提供了一个通用错误消息，如“Missing required value: ” ，而不是特定于字段的错误消息，则可以大大简化此操作。

您还希望进行手动检查，以确保password===confirmpassword，但我认为您能够解决这一问题。

const emailRegex = <your regex>;
const hasLength = val => val && val.length !== 0;

验证映射

const validators = {
  firstName: {
    validate: hasLength,
    message: 'Please provide a value for First Name'
  },
  lastName: {
    validate: hasLength,
    message: 'Please provide a value for Last Name'
  },
  password: {
    validate: hasLength,
    message: 'Please provide a value for Password'
  },
  emailAddress: [{
      validate: hasLength,
      message: 'Please provide a value for Email Address'
    },
    {
      validate: val => !emailRegex.test(val),
      message: 'Invalid email address'
    }
  ],
}    

验证器

validation = (event) => {
  event.preventDefault();
  let errors = []
  const state = {...this.state};

  Object
    .keys(state)
    .forEach(key => {
      let validator = validators[key];
      if (!validator) return;
      if (!Array.isArray(validator)) {
        validator = [validator]
      }
      validator.forEach(v => {
        if (!v.validate(state[key])) {
          errors.push(v.message)
        }
      })
    });

  this.setState({errors: errors})

  if (errors.length === 0) this.logIn()
}