1、在<el-form-item>标签添加rules属性

image.png

<div class="ibox-content mt10">
            <el-form size="mini" ref="queryForm" :model="queryForm" label-width="120px">
                <el-row>
                    <el-col :md="8">
                        <el-form-item label="姓名" prop="name"
                            :rules="[{validator:(field,value,cb) =>validateField(field,value,cb,''), required:true, trigger: 'blur'}]">
                            <el-input v-model="queryForm.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :md="8">
                        <el-form-item label="邮箱" prop="email" :rules="{required: true, message: '邮箱不能为空', trigger: 'blur'}">
                            <el-input v-model="queryForm.email"></el-input>
                        </el-form-item>
                    </el-col>
                    <div class="fr">
                        <el-button type="primary" size="mini" icon="el-icon-search" @click="queryData()">查询</el-button>
                    </div>
                </el-row>
            </el-form>
        </div>

2、自定义校验规则，如果在rules只有一条规则，有写message属性，自定义返回的消息不回生效，而是返回message属性中的消息，如果没有message属性则返回自定义的消息。

image.png

        /**
         * @Description TODO
         * @Author Peng Kang
         * @Date 2021/5/19 5:19 下午
         * @param field
         * @param value
         * @param cb
         * @param message
         * @return
         */
        validateField(field,value,cb,message){
            if (value === '1') {
                cb()
            } else {
                cb(new Error(message || "请正确填写该字段"));
            }
        }

        /**
         * @Description 提交处理
         * @Author Peng Kang
         * @Date 2021/5/19 5:19 下午
         * @param formName
         * @return
         */
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        }