首页 > 其他分享 >form里面有多个对象,对象里面的每一项都是formItem,rules应该怎么配置

form里面有多个对象,对象里面的每一项都是formItem,rules应该怎么配置

时间:2024-02-08 10:44:22浏览次数:20  
标签:form 验证 rules 表单 trigger 为空 message formItem true

<template>
  <el-form :model="formData" :rules="formRules" ref="form" label-width="100px">
    <el-form-item label="对象1">
      <el-input v-model="formData.object1.prop1" placeholder="属性1"></el-input>
      <el-input v-model="formData.object1.prop2" placeholder="属性2"></el-input>
    </el-form-item>
    <el-form-item label="对象2">
      <el-input v-model="formData.object2.prop1" placeholder="属性1"></el-input>
      <el-input v-model="formData.object2.prop2" placeholder="属性2"></el-input>
    </el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        object1: {
          prop1: '',
          prop2: ''
        },
        object2: {
          prop1: '',
          prop2: ''
        }
      },
      formRules: {
        object1: {
          prop1: [
            { required: true, message: '属性1不能为空', trigger: 'blur' }
            // 可以根据需要添加其他验证规则
          ],
          prop2: [
            { required: true, message: '属性2不能为空', trigger: 'blur' }
            // 可以根据需要添加其他验证规则
          ]
        },
        object2: {
          prop1: [
            { required: true, message: '属性1不能为空', trigger: 'blur' }
            // 可以根据需要添加其他验证规则
          ],
          prop2: [
            { required: true, message: '属性2不能为空', trigger: 'blur' }
            // 可以根据需要添加其他验证规则
          ]
        }
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过,可以在这里提交表单数据
          console.log('表单验证通过');
        } else {
          // 表单验证不通过
          console.log('表单验证未通过');
          return false;
        }
      });
    }
  }
};
</script>

  

标签:form,验证,rules,表单,trigger,为空,message,formItem,true
From: https://www.cnblogs.com/iwen1992/p/18011652

相关文章

  • Transformer训练机制
    前言关于Transformer原理与论文的介绍:详细了解Transformer:AttentionIsAllYouNeedPyTorch中实现Transformer模型前面介绍了,Transformer模型结构的实现,这里介绍下论文中提到的训练策略与设置。设置文件名为training.pyOptimizer优化器文中选择Adam优化器,\(\beta_1=0......
  • CF1413C Perform Easily 题解
    解题思路其实是很简单的一道题,考虑计算出所有\(b_i\)在减去每一个\(a_j\)后所有可能的值,将这个值按照从小到大的顺序排序,那么我们可以考虑固定最小值,查找最大值,这个时候从最小值到最大值的区间内应该每一种\(b_i\)都出现了一次。那么,我们可以使用一个桶或者map搭配双指针......
  • CF1922B Forming Triangles 题解
    解题思路显然,有以下两种选择的方法:所有边一样长;两条一样长的边,第三条边小于这两条边。然后组合数计算即可。AC代码#include<stdio.h>#include<stdlib.h>#include<algorithm>#include<vector>#definelllonglong#defineN300005intn,a[N];inlinellC3(llx){......
  • form-data、x-www-form-urlencoded的区别
    我们在平时的postman请求调试,以及web的http请求开发时,常常能看到以下几种传参的形式form-data、x-www-form-urlencoded、raw、binary,那么这些请求方式的区别是什么呢?1)form-data就是http请求中的multipart/form-data,它会将表单的数据处理为一条消息,以标签为单元,用分隔......
  • 解决terraform部署storage account management policy问题
    承接上文TerraformAzurediagnosticsetting升级,之前说到azurerm_monitor_diagnostic_setting里的retentionpolicy已经deprecated了,需要用azurerm_storage_management_policy替换以recoveryservicevault的诊断设置为例,对应的azurerm_storage_management_policy可以参考下边的代......
  • DevExpress WinForms中文教程 - 如何创建可访问的WinForms应用?(二)
    为用户创建易访问的WindowsForms应用程序不仅是最佳实践的体现,还是对包容性和以用户为中心的设计承诺。在应用程序开发生命周期的早期考虑与可访问性相关的需求可以节省长期运行的时间(因为它将决定设计决策和代码实现)。一个可访问的WinForms应用程序提供了各种好处,包括:扩大......
  • mask2former出来的灰度图转切割轮廓后的二值图
    切割后的灰度图切割后的原图转成二值图代码如下点击查看代码#ThisisasamplePythonscript.importcv2importnumpyasnp#PressShift+F10toexecuteitorreplaceitwithyourcode.#PressDoubleShifttosearcheverywhereforclasses,files,toolwin......
  • [Performance] Memory pool
    Amemorypool,alsoknownasamemorybufferpool,isamethodusedinsoftwaredevelopmentformanagingmemoryallocation.Insteadofallocatinganddeallocatingmemoryindividuallyforeachnewobjectatruntime,whichcanbecostlyintermsofperforma......
  • DevExpress ASP.NET Web Forms v23.2最新版本系统环境配置要求
    本文档包含有关安装和使用 DevExpressASP.NETWebForms控件的系统要求的信息。点击获取DevExpressv23.2正式版.NETFrameworkDevExpressASP.NETWebForms控件和MVC扩展支持以下.NETFramework版本。IDEDevExpressASP.NET控件支持以下VisualStudio版本。Visual......
  • DRIVERQUERY [/S system [/U username [/P [password]]]]               [/FO
    DRIVERQUERY[/Ssystem[/Uusername[/P[password]]]]       [/FOformat][/NH][/SI][/V]描述:  允许管理员显示已安装设备驱动程序  的列表。参数列表:   /S  system     指定要连接到的远程系统。   /U  [domai......