el-form-item动态必填

yy_demo

已于 2024-05-22 09:56:01 修改

阅读量522

点赞数 1

文章标签： vue.js elementui javascript

于 2024-04-26 15:03:46 首次发布

本文链接：https://blog.csdn.net/yy_demo/article/details/138219373

版权

有时候一个字段是否必填需要根据另一个字段的值确定，这时候就需要动态校验，动态校验是绑定在el-form-item上，代码如下

<el-form-item label="单位" :rules="flage ? [{ required: true, message: '请输入单位名称', trigger: 'blur' }] : {}">
     <el-input v-model="formDate.itemUnit" />
</el-form-item>

这个时候el-form-item上面就不要绑定prop了，直接在里面的内容v-mode就好，不然校验会有报错

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

yy_demo

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

问题记录：el-form遇坑 el-form-item存在多个子项校验至少必填一项

pzlzyi的博客

03-08

2163

问题记录：el-form遇坑 el-form-item存在多个子项校验至少必填一项公司项目需求两个input表单校验选填一个，看了下el-form发现只能做单个校验，纠结了老半天，突然想到看能不能用vue提供的$refs获取一下dom元素，果然有效，话不多说上代码。 template <el-form :model="ruleForm" ref="ruleForm" :rules="rules" label-width="20%"> <el-row :gutter="24"

element 表单动态校验某个参数是否必填

夏沫之初的博客

08-13

1118

如图所示：当特殊资源项的线上品牌商赞助选中时，活动形式必填；原始代码为改造为在活动形式el-form-item 加入js部分的data中加入isMenu:false,即下图部分然后监听ruleForm.resource在methods中加入监听方法当特殊资源选择改变时，会触发监听回调，改变ruleForm的校验规则。

参与评论您还未登录，请先登录后发表或查看评论

在el-form中实现必填项的动态控制

最新发布

Jinxiansen0211的博客

08-27

240

一开始想通过控制prop=“email”，但是发现虽然 * 可以控制但是没有提示信息，后来加上了:required="form.invoicing == ‘1’"就可以了。

form表单校验至少必填一项或者按条件决定是否必填

x_nweBorder01k的博客

08-05

4086

form表单校验至少必填一项或者按条件决定是否必填

使用el-form时循环内容动态校验处理

想退休的程序媛

08-02

279

有的需求不固定form表单中存在什么，而是通过接口内容进行查询后赋值，这种情况就涉及了每一个el-form-item的动态校验问题，在这种情况下想要校验自动出现必填标识，未填写时可以在输入框下面进行提示。此处拿下面数据结构进行下面代码的演示，使用时根据各自需求进行优化。

el-form-item必填字符

longshiyue2的博客

12-12

5265

<el-form-item label="小区范围：" :prop="precinct.precinctName" required="true">

elementui表单item中包含多个必填项

冰冰酱

03-24

596

el-form自定义验证

el-form 里的 el-form-item 必填/正则检验

m0_61601708的博客

04-04

2678

【代码】el-form 里的 el-form-item 必填/正则检验。

vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法_el-form-item 必填项校验

2401_84182842的博客

04-12

3691

觉得这些内容对你有帮助，可以添加VX：vip204888 （备注大数据获取）**[外链图片转存中…(img-5bKrTOm7-1712864789725)]

＜el-form＞根据条件动态控制表单必填项

qq_38517231的博客

05-25

1513

根据条件动态控制表单必填项

单个el-form-item中有多个必填

Dhun_LI的博客

11-19

2660

element-ui组件里的el-form设置为必填都是一对一的，而一个里面包含多个选择框或输入框的却无法实现，怕自己说不清楚，附一张图吧：图中“下发周期”是一个el-form-item的label名，下面的都包含在里面，设置必填使二者都生效，有一个尾田都要有提示，废话不多说，直接上代码 html部分： <el-form :model="form" :ref="form" :rules="rules" label-width="80px"> <el-form-ite.

el-table+el-form 实现el-table中必填

weixin_45124380的博客

01-27

847

错误 vue.js:6 Error: please transfer a valid prop path to form item! 原因 prop的内容和rules中定义的名称不一致！应注意要一致一般出现在table中form验证代码 <el-form :model="serviceCheckForm" ref="serviceCheckForm" :rules="rules" size="small"> <el-table border :data="service

el-form嵌套el-table，表格必填

山谷里的杂货铺

11-10

1513

效果图：目的：实现表格中每一项都是必填项，如果没填，在提交时会发出警告。代码： <el-form ref="detailForm" :model="detail" label-width="0"> <el-table v-loading="loading" :data="detail.appear" border highlight-current-row .

【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）

前端知识分享喵

06-07

3372

前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。

el-form中某一个el-form-item包含多个必填项，要对里面的参数做必填项校验

qq_39500287的博客

01-05

783

el-form中某一个el-form-item包含多个必填项，要对里面的参数做必填项校验

el-form 根据数组动态渲染的el-form-item必填校验绑定

博客

04-30

581

3，必填校验的key要和绑定的数据key值对应，这里因为数据不多且懒得多写，直接写在template里面了：下例（:rules="[{ required: true, message: '电话号码', trigger: 'blur' }]"；4，以上都不是我一直出错的原因，我出错的原因是：data字段是单独引入的，没有和form数据对应~~注意校验是针对form表单的，所以在input的输入框加了change事件，及时同步form数据。注意：1，el-from必须绑定数据：下例（：model=form;

elementui form表单动态验证必填

Web_Notes的博客

01-31

1177

表单动态验证必填

el-form动态新增表单，并校验表单必填

qq_63522737的博客

01-10

926

el-form表单动态添加并校验表单必填

el-form-item必填

10-17

el-form-item的必填属性可以通过设置prop属性来实现，例如： ``` <el-form-item label="用户名" prop="username" required> <el-input v-model="form.username"></el-input> </el-form-item> ``` 其中，prop属性指定了该表单项对应的数据对象中的属性名，required属性表示该表单项为必填项。