<el-form-item label="类型" :label-width="formLabelWidth" prop="typeId">
<template>
<el-select v-model="form.typeId" clearable
placeholder="请选择">
<el-option v-for="type2 in types" :key="type2.id"
:label="type2.name" :value="type2.id">
</el-option>
</el-select>
</template>
</el-form-item>
<el-form-item label="设计师" :label-width="formLabelWidth" prop="designer.id">
<template>
<el-select v-model="form.designer.id" clearable
placeholder="请选择">
<el-option
v-for="designer in designers" :key="designer.id"
:label="designer.name" :value="designer.id">
</el-option>
</el-select>
</template>
</el-form-item>

如果是直接绑定属性,是可以的,但是绑定对象中的属性就需要特别处理,需要在rules中添加双引号 " "

data:function() {
return {
form: {id:"",name:"",code:"",config:"",designer:{id:""}},
types:[],
diyResourceImgs:[],
designers:[],
formLabelWidth:"100px",
uploading:false,
uploadings:false,
//rules 加校验
rules: {
name: [
{ required: true, message: '请输入素材名称', trigger: 'blur' },
],
code: [
{ required: true, message: '请输入素材编号', trigger: 'blur' },
],
price: [
{ required: true, message: '请输入素材价格', trigger: 'blur' },
],
typeId: [
{ required: true, message: '请选择类型', trigger: 'blur' },
],
"designer.id":[
{required:true,message: '请选择类型',trigger:'blur'},
]
}
}
},

element-ui 无法对绑定表单的对象中的对象属性进行验证的更多相关文章

  1. Element Ui使用技巧——Form表单的校验规则rules详细说明

    Element UI中对Form表单验证的使用介绍: Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item的 prop 属性设置为需校验的字段名 ...

  2. spring boot:使用validator做接口的参数、表单、类中多字段的参数验证(spring boot 2.3.1)

    一,为什么要做参数验证? 永远不要相信我们在后端接收到的数据, 1,防止别人通过接口乱刷服务:有些不怀好意的人或机构会乱刷我们的服务,例如:短信接口, 相信大家可能很多人在工作中遇到过这种情况 2,防 ...

  3. DHTMLX 前端框架 建立你的一个应用程序 教程(九)--绑定表单Form到表格Grrid中

    绑定表单Form到表格Grrid中 现在我们需要选中一行表格数据的时候 数据能在表单中显示出来 我们可以使用DHTMLX 丰富的组件功能实现它. 绑定表单到表格 1.调用bind方法将表单绑定到网格, ...

  4. amaze UI 如何添加原生表单验证

    这段时间做的一个项目,整个系统就一个页面,然后就是各种模态框,js里拼HTML代码,而且因为表单空留距离小,最后选定了amaze ui原生的表单验证 在amaze ui官网找到 表单验证. 但是ama ...

  5. vue指令:v-model绑定表单控件;v-model与v-bind结合使用

    一.v-model绑定表单控件 v-model 双向数据绑定:一般用于表单元素,会忽略表单元素的value.checked.selected的初始值,且将Vue实例的数据作为数据来源. 1. 单行文本 ...

  6. 一款基于jquery ui的动画提交表单

    今天要给大家分享一款基于jquery ui的动画提交表单.这款提交表单的的效果是以动画的形式依次列表所需填写的信息.效果非常不错,效果图如下: 在线预览   源码下载 实现的代码. html代码: & ...

  7. SpringMVC表单或Json中日期字符串与JavaBean的Date类型的转换

    SpringMVC表单或Json中日期字符串与JavaBean的Date类型的转换 场景一:表单中的日期字符串和JavaBean的Date类型的转换 在使用SpringMVC的时候,经常会遇到表单中的 ...

  8. 一、表单和ajax中的post请求&&后台获取数据方法

    一.表单和ajax中的post请求&&后台获取数据方法 最近要做后台数据接收,因为前台传来的数据太过于混乱,所以总结了一下前台数据post请求方法,顺便写了下相对应的后台接收方法. 前 ...

  9. php开发面试题---2、php常用面试题二(表单提交方式中的get和post有什么区别)

    php开发面试题---2.php常用面试题二(表单提交方式中的get和post有什么区别) 一.总结 一句话总结: 数据位置:get参数在url里面,post在主体里面 数据大小:get几kb,pos ...

  10. Spring绑定表单数据

    Spring提供了一些jsp页面常用的form标签,很大程度上提高了我们开发的速度,不用再一个个的标签去绑定属性,而且后台接收数据也很简单,可以直接接收object对象作为属性.官方form标签介绍的 ...

随机推荐

  1. navicat12.0.24安装注意事项

    关闭防火墙并断网,或者不要改变安装路径,或者换一个注册机 链接:https://pan.baidu.com/s/1AvEuD6TWGOCisSctF7pcbg  提取码:o4wp

  2. shell脚本创建身份证号

    --作者:飞翔的小胖猪 --创建时间:2021年5月16日 --修改时间:2021年5月16日 说明 运行脚本,用户手动输入信息生成身份证号.该程序的核心在于函数模块化及select的使用. 注意:该 ...

  3. Html实现背景科技流星雨效果

    <!doctype html><html><head><meta charset="utf-8" /><title>流星 ...

  4. JZ-008-跳台阶

    跳台阶 题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果) 题目链接: 跳台阶 代码 public class Jz08 { ...

  5. SpringMVC入门一:基础知识(依赖、注解、文件上传/下载、拦截器、异常处理等)

    为了使Spring可插入MVC架构,SpringFrameWork在Spring基础上开发SpringMVC框架,从而使用Spring进行WEB开发时可以选择使用Spring的SpringMVC框架作 ...

  6. Spring Cloud Gateway 不小心换了个 Web 容器就不能用了,我 TM 人傻了

    个人创作公约:本人声明创作的所有文章皆为自己原创,如果有参考任何文章的地方,会标注出来,如果有疏漏,欢迎大家批判.如果大家发现网上有抄袭本文章的,欢迎举报,并且积极向这个 github 仓库 提交 i ...

  7. laravel7 jqAjax下拉框搜索

    html: 设置页面改变事件 <div id="show"> <div class="page-container" style=" ...

  8. php 23种设计模型 - 单例模式

    单例模式(Singleton) 单例模式(Singleton Pattern)是 Java 中最简单的设计模式之一.这种类型的设计模式属于创建型模式,它提供了一种创建对象的最佳方式. 这种模式涉及到一 ...

  9. 《Shader入门精要》第11章-11.3.1流动的河流中的offset.x的解释

    在我学习入门精要的时候,经常遇到不解释api,甚至是关键代码的实现原理. 11.3.1流动的河流中的offset.x的sin函数查了一下好像大家也都是书上原话直接复制,现在好不容易想明白了希望能帮到和 ...

  10. 八、Java面向对象编程

    Java面向对象 初识面向对象 面向过程 & 面向对象 面向过程思想 步骤清晰简单,第一步做什么,第二部做什么... 面对过程适合处理一些较为简单的问题 面向对象思想 物以类聚,分类的思维模式 ...