vue3 表单提交校验

<div style="padding: 30px;background-color: #fff;">
                <el-form :model="form" label-width="auto" ref="workformRef" class="login-form" :rules="workformrules">
                    <el-form-item label="需求标题" prop="title">
                        <el-input size="large" v-model="form.title" />
                    </el-form-item>
                    <el-form-item label="需求描述" prop="content">
                        <el-input size="large" type="textarea" v-model="form.content"
                            :autosize="{ minRows: 10, maxRows: 4 }" />
                    </el-form-item>
                    <el-form-item label="需求金额" prop="budgetPrice">
                        <el-input v-model="form.budgetPrice" style="max-width: 100px;" size="large" type="number">
                            <template #prepend>￥</template>
                            <template #append>元</template>
                        </el-input>
                    </el-form-item>
                </el-form>
            </div>

校验时 el-form-item需要传入prop，否则没有校验
表单再次打开时，清空表单时必须使用workformRef.value.resetFields()；否则手动将值为空时表单校验会不进行热更新
const workformRef = ref(null);表单绑定的ref要提到最前面
 

const form = ref({
    title: '',
    content: '',
    budgetPrice: ''
})
const workformRef = ref(null);
const workformrules = ref({
    title: [{ required: true, message: '请输入标题', trigger: 'blur' }],
    content: [{ required: true, message: '请输入内容', trigger: 'blur' }],
    budgetPrice: [{ required: true, message: '请输入需求金额', trigger: 'blur' }],
})
const onSubmit = () => {
    workformRef.value.validate((valid) => {
        if (valid) {
            submitDemandNew({ method: 'post', params: form.value })?.then(res => {
                ElMessage({
                    type: 'success',
                    message: '发布成功',
                })
                workformRef.value.resetFields()
            })
        } else {
            return false;
        }
    });
}