Vue - Element el-form 表单对象多层嵌套校验

针对el-form的数据源是对象嵌套对象,在进行数据绑定和校验时和单层的对象有一点区别,

具体是下面两部分:

数据源:

js 复制代码
fromData: {
  name: '',
  health: {
    height: ''
  }
}

1、 给 el-form-itemprop设为:prop="health.height"
v-model 设为:v-model="fromData.health.height"

c 复制代码
  <el-form-item label="身高" prop="health.height">
    <el-input v-model="fromData.health.height" clearable />
  </el-form-item>

2、校验规则rules对象对应的key设置为数据源内部的值: 'health.height'

c 复制代码
rules: {
	'health.height': [{ required: true, message: '请输入身高', trigger: 'blur' }]
}

具体代码

html 复制代码
<template>
  <div>
    <el-form ref="fromRef" :model="fromData" :rules="rules">
      <el-form-item label="姓名" prop="name">
        <el-input v-model="fromData.name" clearable />
      </el-form-item>
      <el-form-item label="身高" prop="health.height">
        <el-input v-model="fromData.health.height" clearable />
      </el-form-item>
    </el-form>
    <el-button @click="onSubmit()">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      fromData: {
        name: '',
        health: {
          height: ''
        }
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        'health.height': [{ required: true, message: '请输入身高', trigger: 'blur' }]
      }
    }
  },
  methods: {
    onSubmit() {
      this.$refs['fromRef'].validate((valid) => {
        if (valid) {
          console.log('校验通过')
          console.log('fromData', JSON.stringify(this.fromData))
        }
      })
    }
  }
}
</script>

<style scoped></style>
相关推荐
我是日安7 分钟前
从零到一打造 Vue3 响应式系统 Day 22 - Computed:缓存机制实现
javascript·vue.js
xiaoyan201514 分钟前
2025最新款Electron38+Vite7+Vue3+ElementPlus电脑端后台系统Exe
前端·vue.js·electron
梅孔立14 分钟前
本地多版本 Node.js 切换指南:解决 Vue nodejs 等项目版本冲突问题
前端·vue.js·node.js
小红16 分钟前
从乱码到清晰:深入理解字符编码的演进(ASCII到UTF-8)
前端
卓码软件测评36 分钟前
K6的CI/CD集成在云原生应用的性能测试应用
前端·功能测试·测试工具·ci/cd·云原生
JordanHaidee1 小时前
【Rust GUI开发入门】编写一个本地音乐播放器(11. 支持动态明暗主题切换)
前端·ui kit
爱泡脚的鸡腿1 小时前
VUE移动端项目跟练2(简洁易懂)
前端·javascript·vue.js
拜晨1 小时前
用 MCP 把自己的接口接入 AI
前端·node.js
小狮子安度因1 小时前
FFmpeg-vflip滤镜使用
vue.js·ffmpeg·myeclipse
古夕1 小时前
技术复盘文档:解决 `watchEffect` 导致的图片闪烁无限循环问题
前端·javascript·vue.js