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

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

相关推荐
烛阴6 分钟前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子9 分钟前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead33 分钟前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
eggcode39 分钟前
Vue+Openlayers加载OSM、加载天地图
vue.js·openlayers·webgis
前端世界1 小时前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Xiaouuuuua1 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser2 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI2 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三2 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三2 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python