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

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

相关推荐
宋辰月24 分钟前
Vue2的进阶Vue3
前端·javascript·vue.js
酷飞飞1 小时前
C语言的复合类型、内存管理、综合案例
java·c语言·前端
轻抚酸~1 小时前
小迪23-28~31-js简单回顾
javascript·web安全
姜太小白2 小时前
【前端】CSS Grid布局介绍及示例
前端·css
风继续吹..5 小时前
后台管理系统权限管理:前端实现详解
前端·vue
yuanmenglxb20046 小时前
前端工程化包管理器:从npm基础到nvm多版本管理实战
前端·前端工程化
新手小新6 小时前
C++游戏开发(2)
开发语言·前端·c++
我不吃饼干7 小时前
【TypeScript】三分钟让 Trae、Cursor 用上你自己的 MCP
前端·typescript·trae
飞翔的佩奇7 小时前
基于SpringBoot+MyBatis+MySQL+VUE实现的经方药食两用服务平台管理系统(附源码+数据库+毕业论文+部署教程+配套软件)
数据库·vue.js·spring boot·mysql·毕业设计·mybatis·经方药食两用平台
小杨同学yx8 小时前
前端三剑客之Css---day3
前端·css