element-plus 中form提交验证注意点

hykeda1年前 (2023-03-20)TypeSctipt299

<el-form ref="roleDialogFormRef" :model="formfields" size="default" label-width="90px"
                :rules="rules"
            >

<el-form-item label="名称" prop="title">
     <el-input v-model="formfields.title" placeholder="请输入名称" clearable></el-input>
</el-form-item>
<el-button type="primary" @click="onSubmit(roleDialogFormRef)" size="default">提交</el-button>

注意：这里绑定的 formfields变量

必须是一层的对象
const formfields = reactive({
        title:''   
})
如果改成：
const formfields = reactive({
    form:{
        title:'',
    }              
})

const rules = reactive<FormRules>({
  title: [
    { required: true, message: '请输入名称', trigger: 'blur' },
    { min: 3, max: 100, message: '长度3-100', trigger: 'blur' },
  ],
})

const onSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid) => {
        console.log(valid)
        console.log(formfields.title)
        if (valid) {
            //成功
        } else {
            return false
        }
    })