CET-vue-3.0/src/views/demo/form/RuleForm.vue

<template>
    <PageWrapper title="表单校验示例">
        <div class="mb-4">
            <a-button @click="validateForm" class="mr-2"> 手动校验表单</a-button>
            <a-button @click="resetValidate" class="mr-2"> 清空校验信息</a-button>
            <a-button @click="getFormValues" class="mr-2"> 获取表单值</a-button>
            <a-button @click="setFormValues" class="mr-2"> 设置表单值</a-button>
            <a-button @click="resetFields" class="mr-2"> 重置</a-button>
        </div>
        <CollapseContainer title="表单校验">
            <BasicForm @register="register" @submit="handleSubmit"/>
        </CollapseContainer>
    </PageWrapper>
</template>
<script lang="ts">
    import {defineComponent} from 'vue';
    import {BasicForm, FormSchema, useForm} from '/@/components/Form/index';
    import {CollapseContainer} from '/@/components/Container';
    import {useMessage} from '/@/hooks/web/useMessage';
    import {PageWrapper} from '/@/components/Page';
    import {isAccountExist} from '/@/api/demo/system';

    const schemas: FormSchema[] = [
        {
            field: 'field1',
            component: 'Input',
            label: '字段1',
            colProps: {
                span: 8,
            },
            required: true,
        },
        {
            field: 'field2',
            component: 'Input',
            label: '字段2',
            colProps: {
                span: 8,
            },
            required: true,
        },
        {
            field: 'id',
            label: 'id',
            required: true,
            defaultValue: 0,
            component: 'InputNumber',
            show: false,
        },
        {
            field: 'field3',
            component: 'DatePicker',
            label: '字段3',
            colProps: {
                span: 8,
            },
            required: true,
        },
        {
            field: 'field33',
            component: 'DatePicker',
            label: '字段33',
            colProps: {
                span: 8,
            },
            componentProps: {
                valueFormat: 'YYYY-MM-DD',
            },
            rules: [{required: true, type: 'string'}],
        },
        {
            field: 'field44',
            component: 'InputCountDown',
            label: '验证码',
            colProps: {
                span: 8,
            },
            required: true,
        },
        {
            field: 'field4',
            component: 'Select',
            label: '字段4',
            colProps: {
                span: 8,
            },
            componentProps: {
                mode: 'multiple',
                options: [
                    {
                        label: '选项1',
                        value: '1',
                        key: '1',
                    },
                    {
                        label: '选项2',
                        value: '2',
                        key: '2',
                    },
                ],
            },
            rules: [
                {
                    required: true,
                    message: '请输入aa',
                    type: 'array',
                },
            ],
        },
        {
            field: 'field441',
            component: 'Input',
            label: '自定义校验',
            colProps: {
                span: 8,
            },
            rules: [
                {
                    required: true,
                    // @ts-ignore
                    validator: async (rule, value) => {
                        if (!value) {
                            /* eslint-disable-next-line */
                            return Promise.reject('值不能为空');
                        }
                        if (value === '1') {
                            /* eslint-disable-next-line */
                            return Promise.reject('值不能为1');
                        }
                        return Promise.resolve();
                    },
                    trigger: 'change',
                },
            ],
        },
        {
            field: 'field5',
            component: 'CheckboxGroup',
            label: '字段5',
            colProps: {
                span: 8,
            },
            componentProps: {
                options: [
                    {
                        label: '选项1',
                        value: '1',
                    },
                    {
                        label: '选项2',
                        value: '2',
                    },
                ],
            },
            rules: [{required: true}],
        },
        {
            field: 'field7',
            component: 'RadioGroup',
            label: '字段7',
            colProps: {
                span: 8,
            },
            componentProps: {
                options: [
                    {
                        label: '选项1',
                        value: '1',
                    },
                    {
                        label: '选项2',
                        value: '2',
                    },
                ],
            },
            rules: [{required: true, message: '覆盖默认生成的校验信息'}],
        },
        {
            field: 'field8',
            component: 'Input',
            label: '后端异步验证',
            colProps: {
                span: 8,
            },
            helpMessage: ['本字段演示异步验证', '本地规则：必须填写', '后端规则：不能包含admin'],
            rules: [
                {
                    required: true,
                    message: '请输入数据',
                },
                {
                    validator(_, value) {
                        return new Promise((resolve, reject) => {
                            isAccountExist(value)
                                .then(() => resolve())
                                .catch((err) => {
                                    reject(err.message || '验证失败');
                                });
                        });
                    },
                },
            ],
        },
    ];

    export default defineComponent({
        components: {BasicForm, CollapseContainer, PageWrapper},
        setup() {
            const {createMessage} = useMessage();
            const [
                register,
                {validateFields, clearValidate, getFieldsValue, resetFields, setFieldsValue},
            ] = useForm({
                labelWidth: 120,
                schemas,
                actionColOptions: {
                    span: 24,
                },
            });

            async function validateForm() {
                try {
                    const res = await validateFields();
                    console.log('passing', res);
                } catch (error) {
                    console.log('not passing', error);
                }
            }

            async function resetValidate() {
                clearValidate();
            }

            function getFormValues() {
                const values = getFieldsValue();
                createMessage.success('values:' + JSON.stringify(values));
            }

            function setFormValues() {
                setFieldsValue({
                    field1: 1111,
                    field5: ['1'],
                    field7: '1',
                    field33: '2020-12-12',
                    field3: '2020-12-12',
                });
            }

            return {
                register,
                schemas,
                handleSubmit: (values: any) => {
                    createMessage.success('click search,values:' + JSON.stringify(values));
                },
                getFormValues,
                setFormValues,
                validateForm,
                resetValidate,
                resetFields,
            };
        },
    });
</script>