一、問題：

????????做表單校驗時，自定義校驗和常規校驗都失敗，自定義校驗時無法拿到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;}})
};

????????這樣無論是常規校驗或是自定義校驗，都能如愿拿到對應的效果。