vue el-form 表单对象里还有对象，多层嵌套校验，制定校验规则

爱被打了一巴掌 2021-12-04 01:17 1559阅读 0赞

<template>
      <div>
        <el-form ref="dataFrom" :model="dataFrom" :rules="rules">
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="dataFrom.userName"></el-input>
          </el-form-item>
          <el-form-item label="角色名" prop="role.roleName">
            <el-input v-model="dataFrom.role.roleName"></el-input>
          </el-form-item>
        </el-form>
        <el-button @click="submitData()">  提交</el-button>
      </div>
    </template>
    
    <script>
      export default {
        name: "settlementSignReport",
        data() {
          return {
            dataFrom: {
              userName: '',
              role: {
                roleName: ''
              }
            },
            rules: {
              userName: [
                {required: true, message: '请输入用户名', trigger: 'blur'},
              ],
              'role.roleName': [
                {required: true, message: '请输入用户名', trigger: 'blur'},
              ]
            }
          }
        },
        methods: {
        }
      }
    </script>
    
    <style scoped>
    
    </style>

1、重点是： 给 el-form-item 的 prop="" 设为：prop="role.roleName"

2、然后在校验规则中：重点要用 ‘’ 括起来

rules: {
      'role.roleName': [
        {required: true, message: '请输入用户名', trigger: 'blur'},
      ]
    }

发表评论取消回复

表情：

评论列表（有 0 条评论，1559人围观）

还没有评论，来说两句吧...

相关阅读

相关 iview 动态表单校验多级对象

<form-item :label="'DNS'+(index+1)" :prop="'dnsList2.' + index + '.dns'" :rules="i...

迷南。/ 2024年04月19日 12:26/ 0 赞/ 81 阅读

相关 el-form的rules如何校验多层嵌套对象

el-form的表单校验，通常情况下，都是在校验第一层对象时使用例如： <el-form ref="form" :model="postData" :rules="ru

Love The Way You Lie/ 2023年10月11日 21:19/ 0 赞/ 67 阅读

相关 vue表单rules校验

文章目录一、表单校验 1. 表单项校验 2. 表单整体校验二、规则模板三、踩坑合集 1. 单项规则校验没问题

你的名字/ 2023年09月30日 09:59/ 0 赞/ 19 阅读

相关给循环数组里的每个对象做表单校验

需求是需要对下面循环产生的数组中的每行身份证和电话号码做校验规则 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shado

r囧r小猫/ 2023年03月01日 09:30/ 0 赞/ 7 阅读

相关 element-ui自定义表单校验规则及常用表单校验

前言表单校验是注册环节中必不可少的操作，表单校验可以提醒用户填写数据规则以确保用户提交数据的效性，也可以防止用户因误操作、填写错误数据或者恶意提交数据而占用服务器资源。

妖狐艹你老母/ 2022年12月11日 07:58/ 0 赞/ 396 阅读

相关表单校验

select chargeType: [ { required: true, message: "请选择计费方式", trigger

女爷i/ 2022年11月14日 15:58/ 0 赞/ 244 阅读

相关 @Validated 嵌套对象校验

实体对象A和B 对象A嵌套对象B，在A对象需要校验注解加入 @Valid public class B{ @No

缺乏、安全感/ 2022年10月26日 14:17/ 0 赞/ 197 阅读

相关 VUE表单校验，金额

rules: { money: [ { required: true, message: '请输入金额', trig

灰太狼/ 2022年09月08日 03:46/ 0 赞/ 244 阅读

相关基于spring validation多层对象校验

1、第一层对象定义 import java.io.Serializable; import javax.validation.Valid;

野性酷女/ 2022年05月10日 23:10/ 0 赞/ 220 阅读

相关 vue el-form 表单对象里还有对象，多层嵌套校验，制定校验规则

<template> <div> <el-form ref="dataFrom" :model="dataFrom" :rules="rul

爱被打了一巴掌/ 2021年12月04日 01:17/ 0 赞/ 1560 阅读