Ant-design-vue: 感觉 form表单的验证 v-decorator 写一大堆 非常的乱

Created on 16 Apr 2019  ·  6Comments  ·  Source: vueComponent/ant-design-vue

  • [ ] I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

验证的条件多了,就会有一大堆的代码,非常的乱,提交审查的时候很容乱了,再次拉取的时候非常容易出现错误

What does the proposed API look like?

能不能想elementUI和iviewUI一样 在script里面写独立的验证规则

outdated

Most helpful comment

根据官方给出的demo 修改的简洁使用方法

<template>
    <a-card :bordered="false">
        <a-form :form="form" @submit="createProject">
            <a-form-item
                label="项目名称"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 12 }"
                >
                <a-input name="subject" v-decorator="formRules.subject"/>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
        </a-form>
    </a-card>
</template>

<script>
    export default {
        name: "CreateProject",
        data() {
            return {
                form: this.$form.createForm(this),
                formRules: {
                    subject: ["subject", { rules: [{ required: true, message: "项目名称不能为空" }] }],
                }
            }
        },
        methods: {
            createProject(e){
                e.preventDefault();
                const {
                    form: { validateFields }
                } = this;
                validateFields((err, values) => {
                    if (!err) {
                    // eslint-disable-next-line no-console
                    console.log("Received values of form: ", values);
                    }
                });
            }
        },  
    }
</script>

<style scoped>

</style>

All 6 comments

v-decorator 的验证规则也可以独立写在script里面啊

v-decorator 的验证规则也可以独立写在script里面啊

求个demo 小白不太会

我也觉得这个真的很头痛,写一大推,然后乱的很,看起来密密麻麻的一大片。楼主有解决办法吗

根据官方给出的demo 修改的简洁使用方法

<template>
    <a-card :bordered="false">
        <a-form :form="form" @submit="createProject">
            <a-form-item
                label="项目名称"
                :label-col="{ span: 5 }"
                :wrapper-col="{ span: 12 }"
                >
                <a-input name="subject" v-decorator="formRules.subject"/>
            </a-form-item>
            <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
                <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
        </a-form>
    </a-card>
</template>

<script>
    export default {
        name: "CreateProject",
        data() {
            return {
                form: this.$form.createForm(this),
                formRules: {
                    subject: ["subject", { rules: [{ required: true, message: "项目名称不能为空" }] }],
                }
            }
        },
        methods: {
            createProject(e){
                e.preventDefault();
                const {
                    form: { validateFields }
                } = this;
                validateFields((err, values) => {
                    if (!err) {
                    // eslint-disable-next-line no-console
                    console.log("Received values of form: ", values);
                    }
                });
            }
        },  
    }
</script>

<style scoped>

</style>

This issue has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings