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

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

相关推荐
搞个锤子哟3 分钟前
el-select使用filter-method实现自定义过滤
前端
flyliu3 分钟前
什么是单点登录,如何实现
前端
码力无边_OEC4 分钟前
第四章:幕后英雄 —— Background Scripts (Service Worker)
前端
阿黎啊啊啊6 分钟前
避免 node_modules 修改被覆盖:用 patch-package 轻松搞定
前端
纯JS甘特图_MZGantt7 分钟前
五分钟集成一个高颜值甘特图?这个国产开源库让你告别繁琐!
前端
用户3379044802178 分钟前
通过兵马俑排列讲清Flex、Grid布局
前端
ruokkk10 分钟前
AI 编程真香!我用 Next.js + AI 助手,给孩子们做了个专属绘本网站
前端·后端·ai编程
兮漫天14 分钟前
bun + vite7 的结合,孕育的 Robot Admin 【靓仔出道】(二十)终章
前端·javascript·vue.js
失忆爆表症20 分钟前
基于 MediaPipe + Three.js 的实时姿态可视化前端
前端·webgl
乘风破浪酱5243620 分钟前
Bearer Token介绍
前端·后端