ElementUI问题:el-form-item中新增校验红心，但是不校验必填属性！

于 2024-06-21 10:52:01 发布
阅读量221 收藏
点赞数 4
分类专栏： 前端 文章标签： elementui vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chenghao13834505361/article/details/139855091
版权

需求：产品需要在el-form-item中，label前面加红星，但是又不要走required校验。简直就是一个假象而已。

开始解决，给item直接加个css解决问题

<el-form-item label="内容" class="is-required">
    <WangEditor :maxlength="1000"  @change="change" :initializationValue="reportContent":editorDisable="showEditorDisable" />
</el-form-item>

新加class="is-required"

搞定完工！

米粒宝的爸爸
关注
专栏目录
问题记录：el-form遇坑 el-form-item存在多个子项校验至少必填一项
pzlzyi的博客
03-08 2155
问题记录：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"
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 3318
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
elementui el-form-item标签 label前加红色星号且不校验必填
m0_53682699的博客
12-15 2852
刚开始，我直接在该el-form-item标签上加 required 来获取红色星号。如何避开required且顺利加上红色星号呢？有两种方式：1、在该el-form-item标签上加一个class=“is-required”即可。2、在label下加label设置项。需求：需要在el-form-item标签 label前加红色星号，但不需要校验该字段。
给element from表单前面添加必填的星号但不触发校验
qq_46154004的博客
05-15 945
第二步：在打开表单页面时调用changeRequired(false）， 给form表单赋值完成以后清空校验结果即可 （场景：在保存时只校验某些项，打开保存的表单后，提交时需要的所有校验项没填的都要显示红星。比如保存时，只有这四个需要校验，则调用 changeRequired(true)只要打开界面添加该类的项就会显示红星，但是不会校验（校验功能需要另外写）提交时，全部项都要校验，调用changeRequired(false）第一步：先写一个功能，可以自行设置rules规则里项是否进行校验。
el-form-item lable前加红色星，设置label样式
weixin_44021888的博客
02-15 1825
el-form-item lable前加红色星，设置label样式
Element el-form-item标签加小红星但不校验内容
m0_63788547的博客
12-06 671
Element el-form-item标签加小红星但不校验内容
实现给el-table表头加必填符号星号（红*）
weixin_44021888的博客
04-12 1411
实现给el-table表头加必填符号星号（红*）
el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)
qq_41421033的博客
09-07 2675
关键点: 跟正常校验流程不同的是, el-form-item标签内的required和rules都要加上判断条件。场景: 输入框根据单选项来动态校验表单。没有选中的选项就不用校验。正题部分-表单动态校验。
el-form-item不显示报错$option；label和input不是行内样式显示；el-form表单校验不生效；el-form表单校验正则
killerdoubie的博客
02-27 1190
el-form-item不显示报错$option;label和input不是同行显示；el-form表单校验不生效；el-form表单校验正则
在elementUI中有时想触发el-form中的某一个校验，该怎么做？
luoteen的博客
04-24 8724
在form表单中 用ref绑定 <el-form :model="form" ref="form" class="mt20" label-width="140px"> <el-form-item label="标题：" prop="title" :rules="{required:true,message:'请输入标题',trigger:'change...
vue elementui el-form rules动态验证的实例代码详解
10-16
在使用elementUI el-form 中，对于业务不同的时候可能会产生不同表单结构，但是都是存在同一个表单控件el-form中。这篇文章主要介绍了vue elementui el-form rules动态验证的实例代码,需要的朋友可以参考下
el-form 表单项前面显示星号 但又不校验这一项代码怎么实现
killerdoubie的博客
06-19 1832
el-form 表单项前面显示星号 但又不校验这一项代码怎么实现
el-form-item label 文字前显示红色星号
nongcunqq的博客
08-05 6116
添加 :required=“true” <el-form-item label="选择对应权限的角色" :label-width="formLabelWidth" :required="true"> 效果图
element中form表单el-form-item 添加红色星号
热门推荐
Hello_oll的博客
01-18 1万+
1.如果只需要加个红星星不需要验证就如下所示 <el-form-item label="选择考点：" prop="theoryCenterId" :required="true" /> 只需添加 :required=“true” 2.如果是想加校验：只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可 ...
【Element Ui】el-table表头增加星号 *
alikami的博客
03-07 802
el-table表头增加星号 *
Element UI进行表单校验的时候，输入正确内容后，还有提示问题
weixin_52727969的博客
03-31 6114
默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。1.看看你的el-form 是否绑定了值model并且model后面的名称是否和你后面表单输入时使用的名称相同；2.el-form 是否绑定了验证规则：rules(起个名字我们的提示信息就是在这里面写的)字眼表明其主要的使用场景是在组件内部，后面的那一大段是说明缘由的。的值是否和rules的值对应。
element-ui el-form自定义规则rules，小红心不出现解决方案
lkx_icy的博客
11-28 2514
这段时间用element-ui比较多，在el-form这里遇到了一些坑，话不多说直接上效果图 需要在自定义规则处再加required:true 此时自定义规则会生效，且元素前方会有小红心提示用户该项为必填项 rules: { idCard: [{ validator: validateidIdCard, trigger: 'change', required: true }] } 若不加该字段，规则依旧生效，但是却会出现下方的情况，即无小红心，用户交互感变差 rules: { idCard.
更改el-form表单必填红星的位置，*废弃css属性(vue3)
qq_38210427的博客
06-06 407
在做表单验证的时候 加入必填校验 required 会在左方默认出现一个红色星号 文字向右推移。再写一份after的 复用之前before的就可以。为了保持页面的统一性 选择把红色星号放到右边实现。控制台复制before的代码把它隐藏了。
el-form-item里面遍历的el-form-item怎么做必填校验
最新发布
07-20
在Element UI的`el-form-item`中，如果需要对动态生成的表单项做必填验证，可以结合Vue的响应式特性以及`el-form`提供的内置规则来做。当遍历的数据结构发生变化时，你可以为每个动态生成的`el-form-item`设置一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值