一、问题:
做表单校验时,自定义校验和常规校验都失败,自定义校验时无法拿到value值。
二、原因:
1、变量名称那没有绑定prop。
如果是常规校验,没绑定prop的话,在确定按钮时,valid都是true。
2、自定义校验时,绑定的prop的属性名写错了,一定要是对应的form属性值,比如这里的变量名称是name。
否则校验器那拿到的value值是undefined,跟输入的值不一致的。
javascript
<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) return
console.log('form', form.value.name)
formRef.validate((valid) => {
console.log('valid', valid)
if (valid) {
console.log('保存的表单数据:', form.value);
dialogVisible.value = false;
}
})
};
三、问题解决:
绑定prop以及prop的属性值变量要和form对应的值一致。
javascript
<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) return
console.log('form', form.value.name)
formRef.validate((valid) => {
console.log('valid', valid)
if (valid) {
console.log('保存的表单数据:', form.value);
dialogVisible.value = false;
}
})
};
这样无论是常规校验或是自定义校验,都能如愿拿到对应的效果。