重构验证处理和消息传递

Question

我正在开发一个使用 redux 表单的 react 项目。如果需要，我已经遍历了这些字段以检查它们的验证要求。这个堆栈运行良好 - 但我知道我应该重新访问它以将部件放入函数中

    if(field.validate.includes("email")) {
      //email
      if (!/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(values[fieldName])) {
        errors[fieldName] = 'Invalid email address'
      }
    }
    
    if(field.validate.includes("minLength")) {
      //minLength
      if (values[fieldName] !== undefined && values[fieldName].length < 3) {
        errors[fieldName] = 'Must be 3 characters or more'
      }
    }

    if(field.validate.includes("required")) {
      //required
      if (!values[fieldName] && typeof values[fieldName] !== "number") {
        errors[fieldName] = 'Required'
      }
    }

我试图编写一个看起来像这样的函数 - 但我不想破坏堆栈。

  messageHandler(field, validation, rule, message){
    if(field.validate.includes(validation)) {
      if (rule) {
        return message;
      }
    } 
  }

Answer 1

据我所知，您正在尝试根据一组已定义的规则验证字段的内容。

对我来说，规则只是可以成功也可以不成功的功能。为简单起见，假设返回null 表示成功，否则返回错误消息（只是一个字符串）。

const rules = {
  email:     value => !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i.test(value) 
                  ? 'Invalid email address' 
                  : null,
  minLength: value => value !== undefined && value.length < 3
                  ? 'Must be 3 characters or more' 
                  : null,
  required:  value => !value && typeof value !== "number"
                  ? 'Required' 
                  : null,
};

现在，对于我们在field.validate 中找到的每条规则，我们将应用相应的规则并收集结果：

const matchingRules = field.validate
                        .map(formValidate => rules[formValidate])
                        .filter(x => x); // filter nullish values (rules that are not found)

const errors = matchingRules
                 .map(fn => fn(values[fieldName]))
                 .filter(x => x); // filter nullish values (successful rules)

现在，errors 包含一个字符串列表，描述该字段如何不符合不同的规则，当然，如果errors.length === 0，则测试成功。

您可以根据需要添加任意数量的规则，而无需重复所有 ifs。

Answer 2

在这个项目中引入另一个库是否可以接受？我喜欢使用joi 进行验证。当然，了解验证在后台的工作原理很重要，但您似乎对此掌握得很好。

以下是您如何使用当前代码实现此功能的示例：

首先，您将定义一个模式，它实质上代表了您填写的表单的理想最终状态。下面，我说表单值将包含一个email，这将是一个至少 3 个字符长的必需字符串。

const Joi = require('joi');

const schema = Joi.object({
   email: Joi.string().email().required().min(3)
})

然后，当您准备好验证表单数据时：

const validation = schema.validate({ email: 'foo@bar.com' });

validation 将包含值和错误（如果有的话）。

您可以将schema.validate 函数放入useEffect 中，该函数在用户更新输入时触发，或者您可以等到用户尝试提交表单，无论您的UI 需要什么。

我喜欢它，因为它易于读写，而且非常灵活。