一、问题：

        做表单校验时，自定义校验和常规校验都失败，自定义校验时无法拿到value值。

二、原因：

1、变量名称那没有绑定prop。

        如果是常规校验，没绑定prop的话，在确定按钮时，valid都是true。

2、自定义校验时，绑定的prop的属性名写错了，一定要是对应的form属性值，比如这里的变量名称是name。

        否则校验器那拿到的value值是undefined，跟输入的值不一致的。

<el-form :model="form" ref="formRef" :rules="rules"><el-form-item label="字段类型"><el-radio-group v-model="form.type"><el-radio label="文本">文本</el-radio><el-radio label="段落">段落</el-radio><el-radio label="下拉选项">下拉选项</el-radio><el-radio label="数字">数字</el-radio><el-radio label="给文件">给文件</el-radio><el-radio label="文件列表">文件列表</el-radio></el-radio-group></el-form-item><el-form-item label="变量名称"><el-input v-model="form.name"></el-input></el-form-item>
</el-form>const validateVariableName = (rule, value, callback) => {console.log('value', value)if (value === '') {callback(new Error('请输入变量值'))} else {if (form.name !== '') {// if (!formRef.value) return// // formRef.value.validateField('name')}callback()}
}
const rules = ref({// name: [{ required: true, validator: validateVariableName, trigger: 'blur' }]VariableName: [{ required: true, message: '请输入变量名称', trigger: 'blur' }]
})const handleSave = (formRef) => {if (!formRef) returnconsole.log('form', form.value.name)formRef.validate((valid) => {console.log('valid', valid)if (valid) {console.log('保存的表单数据：', form.value);dialogVisible.value = false;}})
};

三、问题解决：

        绑定prop以及prop的属性值变量要和form对应的值一致。

<el-form :model="form" ref="formRef" :rules="rules"><el-form-item label="字段类型"><el-radio-group v-model="form.type"><el-radio label="文本">文本</el-radio><el-radio label="段落">段落</el-radio><el-radio label="下拉选项">下拉选项</el-radio><el-radio label="数字">数字</el-radio><el-radio label="给文件">给文件</el-radio><el-radio label="文件列表">文件列表</el-radio></el-radio-group></el-form-item><el-form-item label="变量名称" prop="name"><el-input v-model="form.name"></el-input></el-form-item>
</el-form>const validateVariableName = (rule, value, callback) => {console.log('value', value)if (value === '') {callback(new Error('请输入变量值'))} else {if (form.name !== '') {// if (!formRef.value) return// // formRef.value.validateField('name')}callback()}
}
const rules = ref({// name: [{ required: true, validator: validateVariableName, trigger: 'blur' }]name: [{ required: true, message: '请输入变量名称', trigger: 'blur' }]
})const handleSave = (formRef) => {if (!formRef) returnconsole.log('form', form.value.name)formRef.validate((valid) => {console.log('valid', valid)if (valid) {console.log('保存的表单数据：', form.value);dialogVisible.value = false;}})
};

        这样无论是常规校验或是自定义校验，都能如愿拿到对应的效果。