Vue(二十二)——表单校验

<template>
    <div id="xx">
        <h1>xx信息查询</h1>
        <a-form-model
                ref="form"                               //form并不是自定义的任何data或者methods，不明白为什么要加上这句。
                :label-col="{ span: 4 }"
                :wrapper-col="{span:12,offset:1}"
                :rules="formRules"                       //该表单使用什么校验规则，自己在data中定义。每条校验规则的名字一定要跟表单绑定的对象的名字一摸一样，才能说明校验的是那个对象。
                :model="formData"
                       >
            <a-form-model-item
                    label="查询类型"
                    prop="queryTypeData"                           
//在每个item中定义该item中需要检验的字段，以及该字段名字所对应的校验规则。只能是这个字段的名字，因为这个字段的名字会出现在两个地方，一个是formRules，一个是formData,所以这里只写这个名字，不加前面的前缀。在这里formRules和formData中使用同样的名字可以省却写两遍，一个是写要检验的字段名字，一个是写该字段的校验规则，用prop将formRules和formData关联起来，就可以一句话完成两句话要做的事情。
            >
                <a-radio-group v-model="formData.queryTypeData">
                    <a-radio
                            v-for="(item,index) in formItem2.queryTypeItem"
                            :key="index"
                            :value="item">
                        {{item}}
                    </a-radio>
                </a-radio-group>
            </a-form-model-item>
            <a-form-model-item :wrapper-col="{offset:10}">
                <a-button type="primary" @click="onSubmit">
                    信息查询
                </a-button>
                <a-button style="margin-left: 10px;" @click="resetForm('queryType')">
                    重置
                </a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
    export default {
        name: "xxx",
        data() {
            return {
                formData:{
                    queryTypeData:"",
                },
                formItem2:{
                    queryTypeItem:["a", "b", "c"],
                },
                formRules: {
                    queryTypeData: [{required: true, message: '请点击查询类型', trigger: 'change'}],
            },
        }
        },
        methods:{
            onSubmit(){
                this.$refs.form.validate(async (valid) => {
                     if (valid) {
                        alert('submit!');
                        console.log(this.formData);
                     } else {
                         console.log('error submit!!');
                        return false;
                     }
                });
            },

            resetForm(){
                this.$refs.form.resetFields();
            },
        }
    }

</script>