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

爱被打了一巴掌 2021-12-04 01:17 1544阅读 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 条评论，1544人围观）

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

相关阅读

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

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

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

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

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

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

相关 EelemntUI中e-form表单校验的使用以及表单校验的规则

场景 Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。官方示

青旅半醒/ 2023年10月05日 08:12/ 0 赞/ 46 阅读

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

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

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

相关表单校验

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

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

相关 @Validated 嵌套对象校验

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

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

相关 VUE表单校验，金额

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

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

相关表单校验

表单数据提交后，在服务器端编程校验数据合法性，是一个很常见的需求。所以struts的ActionServlet在把数据封装到formbean后，会自动调用formbean

青旅半醒/ 2022年05月15日 03:51/ 0 赞/ 317 阅读

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

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

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

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

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

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