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;
    }
  })
};

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

相关推荐
倔强青铜三13 分钟前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
ningmengjing_15 分钟前
在 PyCharm 中安装并配置 Node.js 的指南
开发语言·javascript·ecmascript
我是若尘27 分钟前
Webpack 入门到实战 - 复习强化版
前端
晓131330 分钟前
JavaScript基础篇——第五章 对象(最终篇)
开发语言·前端·javascript
倔强青铜三31 分钟前
苦练Python第1天:为何要在2025年学习Python
前端·后端·python
满分观察网友z40 分钟前
uniapp使用video实现沉浸式在线课程学习平台
前端
灋✘逞_兇1 小时前
Node.Js是什么?
服务器·javascript·node.js
当牛作馬1 小时前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw02 小时前
Flutter基础(前端教程⑨-图片)
前端·flutter