element-plus 中form提交验证注意点
<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
}
})
如果字段变成有两层对象形式存放,form表单的自动验证无法验证成功