微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

动态添加规则进行验证

如何解决动态添加规则进行验证

使用 vee-validate,Vuejs 的验证库,支持响应式验证模式,我正在考虑在动态字段上添加验证。

我要存档的内容

我得到了一个要验证的动态字段列表。每个字段都包含有关输入类型(字符串、布尔值、整数等)以及是否需要的信息。

示例:

computed: {
    schema () {
        let schema = Yup.object ({
            category: Yup.object ().shape ({
                name: Yup.string ().max (255).required ()
            })
        });

        this.fields.forEach((field)=>{
            console.log(field);
        })

        return schema;
    },},

forEach 循环内部,您可以看到我正在记录该字段。结果是:

Proxy {id: 1,name: "example_integer",placeholder: "",type: "integer",required: true,value: null}
Proxy {id: 2,name: "example_string",placeholder: "Type something",type: "string",required: false,value: null}

对于这个例子,架构应该通过两个规则进行扩展:

example_integer: Yup.number().required(),example_string: Yup.string().nullable()

现在我想知道更喜欢哪种方式:

  1. 我可以尝试使用 forEach-loop 将这些规则添加schema
  2. 我可以尽量避免这个额外的步骤,并在初​​始架构声明中添加这个逻辑

我很想知道您喜欢哪种方式。如果您有关于如何最优雅地执行此操作的信息,我很乐意听到。

我的第一次尝试:

return Yup.object ({
    category: Yup.object ().shape ({
        name: Yup.string ().max (255).required (),fields: Yup.array ().of (
            Yup.object ().shape ({
                value: Yup.lazy (val => {
                console.log (val);
                return Yup.string ();
            })
        ),})
});

但不幸的是,console.log (val); 只返回该对象的 value,但在这种情况下,我需要检查 typerequired 道具。

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。