element-plus表单校验失败问题

一、问题：

做表单校验时，自定义校验和常规校验都失败，自定义校验时无法拿到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;
    }
  })
};

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