是的 - 在运行时创建和修改验证模式

Dav*_*ave 5 javascript typescript yup

我需要创建一个用户然后更新它。所以我需要两个不同的模式。

这是第一个,用于用户创建:

const addressSchema = object().shape({
    street: string().required(),
    city: string().required(),
});

const signUpSchema = object().shape({
    req: object().shape({
        username: string().trim().required(),
        password: string().trim().required(),
        role: string().trim().required(),
        address: addressSchema
            .default(null)
            .nullable()
            .when(role, isAdminRole(object().required()))
    })
})
Run Code Online (Sandbox Code Playgroud)

现在,我想重用上面的架构来进行客户的更新操作。但是,它不能等于,因为例如在更新操作中,我不想更改密码。第二,不能有.required()限制。因为,在更新操作中,也许,我只想修改用户名而不是角色。更新架构应如下所示:

const addressUpdateSchema = object().shape({
    street: string().min(1), // .min(1) because it's not a required field but it can't be an empty string neither
    city: string().min(1),
});

const updateSchema = object().shape({
    req: object().shape({
        username: string().trim().min(1), 
        role: string().trim().min(1),
        address: addressUpdateSchema
            .default(null)
            .nullable()
            .when(role, isAdminRole(object()))
    })
})
Run Code Online (Sandbox Code Playgroud)

为了实现这些模式,我这样做了:

1 - 创建包含验证字段的对象数组:

const signUpValidationSchemaArray = [
{ name: 'username', validation: string().trim().required() },
{ name: 'password', validation: string().trim().required() }
{ name: 'role', validation: string().trim().required() }
{ name: 'address', validation: addressSchema.default(null).nullable().when(role, isAdminRole(object().required()))}
Run Code Online (Sandbox Code Playgroud)

2 - 编写一个函数,返回从上面的数组开始的 yup 模式:

const buildYupSchema = (fields: any[]) => {
    const newSchema = {};
    fields.forEach(field => newSchema[field.name] = field.validation);
    return object().shape(newSchema);
}

buildYupSchema(signUpValidationSchemaArray);
Run Code Online (Sandbox Code Playgroud)

这样做我们创建了const signUpSchema = object().shape({ ...上面声明的模式。现在,我想const updateSchema = object().shape({ ... 尽可能使用已经编写的代码来创建架构。

3 - 这是问题,我正在尝试修改signUpValidationSchemaArray的验证字段

const updateValidationSchemaArray = [...signUpValidationSchemaArray].filter(field => field.name !== 'password' )
.map(field => {
        name: field.name,
        validation: field.validation.notRequired()
    }
});

buildYupSchema(updateValidationSchemaArray);
Run Code Online (Sandbox Code Playgroud)

.filter(field => field.name !== 'password' )-> 我想排除密码,因为我不想在更新操作中修改它

validation: field.validation.notRequired()-> 我想删除 required() 限制。我尝试这样做,添加 notRequired(); 但它不起作用。也许以某种方式直接删除 .required() 会更好。但我不知道该怎么做。

  • 有什么建议么?
  • 这是实现我想要的目标的好方法吗?

小智 1

我正在使用反应式 if 条件两个,这有效

let schema; // IMPORTANT!!!!!!!

$: if (editId && !blockUser && !resetPass) {
//validation for edit info
schema = yup.object().shape({
  email: yup.string().required().email().label("Email"),
  mobile: yup
    .number()
    .typeError("Mobile is a requried field")
    .label("Mobile No"),
});
} else {
//validation for add
schema = yup.object().shape({
  full_name: yup.string().required().max(30).label("Full Name"),
  email: yup.string().required().email().label("Email"),
  password: yup.string().required().min(8).label("Password"),
  mobile: yup
    .number()
    .typeError("Mobile is a requried field")
    .label("Mobile No")
});
}
Run Code Online (Sandbox Code Playgroud)