Javascript 重构验证处理和消息传递

我正在从事一个使用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'
      }
    }

---

据我所见，您正试图根据一组已定义的规则验证字段的内容

对我来说，规则只是功能，可以成功也可以失败。为了简单起见，假设它们返回

null

，则表示它们成功，否则，我们将返回一条错误消息（只是一个字符串）

现在，

errors

包含一个字符串列表，描述字段如何违反不同规则，当然，如果

errors.length==0

，则测试成功

---

如果s，您可以添加任意数量的规则，而无需重复所有的

。
在本项目中引入另一个库是否可以接受？我喜欢用它来验证。当然，理解验证在引擎盖下是如何工作的是很重要的，但是看起来你已经很好地掌握了这一点

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

首先，您将定义一个模式，它本质上代表了您所填写表单的理想结束状态。下面，我要说的是表单值将包括一封
电子邮件
，这将是一个至少3个字符长的必需字符串

const Joi=require（'Joi'）；
const schema=Joi.object({
电子邮件：Joi.string（）.email（）.required（）.min（3）
})

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

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

验证
将包含值和错误（如果有）

您可以在用户更新输入时触发的
useffect
中抛出该
schema.validate
函数，也可以等待用户尝试提交表单，无论用户界面需要什么

我喜欢它，因为它很容易读写，而且非常灵活。
这个
/^[A-Z0-9.\u%+-]+@[A-Z0-9.-+\.[A-Z]{2,4}$/I
是非常糟糕的电子邮件正则表达式。。。有些人生活在其他国家，使用不同于A-Z的字符。。。不要让人们的生活变得比使用这种regexp更复杂。我当时只需要做些事情——这个解决方案似乎很好。不确定这是否能按计划工作——errors[fieldName]=“Required”——错误数组是如何处理的——但当我查看您版本中的错误时，它只提供了[“Required”]当我试图找出错误时-无效的电子邮件地址必须是3个字符或更多-它会一次将字段中的所有错误混合在一起-而不是堆叠它们如果我这样做-它似乎会替换功能--const errorMsg=matchingRules.map（fn=>fn（value[fieldName]））.filter（x=>x）；//如果（errorMsg）{errors[fieldName]=errorMsg.reverse（）[0]；}则过滤空值（成功规则）
errors
是一个数组，其中包含所有遇到的错误。如果您只想显示一个错误，可以选择第一个。测试的执行顺序是数组
字段的顺序。validate
我认为这很有效-谢谢您这是可能的-我只是暂时不想添加更多的lib-a它已经混合了材质ui和redux表单
  messageHandler(field, validation, rule, message){
    if(field.validate.includes(validation)) {
      if (rule) {
        return message;
      }
    } 
  }

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,
};

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)