重构、验证、处理和消息传递
重构、验证、处理和消息传递
提问于 2021-01-15 19:00:20
我正在做一个使用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;
}
}
}回答 2
Stack Overflow用户
发布于 2021-01-21 18:52:09
在我看来，您正在尝试根据一组定义的规则来验证字段的内容。
对我来说，规则只是成功或失败的函数。为简单起见，假设它们返回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，则测试成功。
您可以根据需要添加任意多个规则，而无需重复所有if。
Stack Overflow用户
发布于 2021-01-23 11:49:06
在这个项目中引入另一个库是可以接受的吗？我喜欢使用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将包含值和错误(如果有的话)。
您可以在用户更新输入时触发的useEffect中抛出该schema.validate函数，也可以等待用户尝试提交表单，无论您的UI需要什么。
我喜欢它，因为它很容易读写，而且非常灵活。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65734887
复制相关文章
相似问题
腾讯云开发者
