element的表单校验输入框有值但校验未通过的问题

解决elementUI select 的disabled属性设置无效问题一例 阅读详情

先说重点,prop中的名称要和ruleForm中对应的字段名一致

上element UI 官方文档

       <div class="details_main">
          <el-form ref="form" :model="form" :rules="rules" class="detail_form">
            <template>
              <div v-for="(item, index) in subjectData" :key="item.id">
                <!-- 单选循环处 -->
                <el-form-item
                  v-if="item.tmlxD == 'RADIO'"
                  label=" "
                  class="form_item"
                  :prop="'radio' + [index + 1]"
                >
                  <p class="form_title">{{ item.tmmc }}</p>
                  <!-- 单选选项循环 -->
                  <el-radio-group
                    v-model="form['radio' + [index + 1]]"
                    class="group_style"
                    :disabled="disabledShow"
                    @change="radioFn(item, index)"
                  >
                    <template>
                      <div
                        v-for="radioOption in item.tmxxPoList"
                        :key="radioOption.id"
                        :label="index + 1"
                      >
                        <el-radio
                          v-model="form['radio' + [index + 1]]"
                          :label="radioOption.id"
                        >
                          {{ radioOption.tmxx }}
                        </el-radio>
                      </div>
                    </template>
                  </el-radio-group>
                </el-form-item>
                <!-- 多选循环处 -->
                <el-form-item
                  v-if="item.tmlxD == 'MULTIPLE'"
                  required
                  label=""
                  class="form_item"
                >
                  <!-- 多选选项循环 -->
                  <p class="form_title">{{ item.tmmc }}</p>
                  <el-checkbox-group
                    v-model="form['checked' + [index + 1]]"
                    class="group_style"
                    :disabled="disabledShow"
                    @change="checkFn(item, index)"
                  >
                    <el-checkbox
                      v-for="checkItem in item.tmxxPoList"
                      :key="checkItem.id"
                      :label="checkItem.id"
                      >{{ checkItem.tmxx }}</el-checkbox
                    >
                  </el-checkbox-group>
                </el-form-item>
                <!-- 问答问题循环处 -->
                <el-form-item
                  v-if="item.tmlxD == 'QA'"
                  required
                  label=""
                  class="form_item"
                >
                  <p class="form_title">
                    {{ item.tmmc }}
                  </p>
                  <el-input
                    v-model="form['wd' + [1 + index]]"
                    placeholder="请输入"
                    type="textarea"
                    rows="6"
                    :disabled="disabledShow"
                    @change="textareaFn(item, index)"
                  />
                </el-form-item>
              </div>
            </template>
          </el-form>
        </div>

 

起初以为prop中字段名称只要和rules对应一致就行,然后就各种尝试,都不行。百度寻找方法,各种条件都满足了,还是不能正常校验(我比较奇葩,乱换名称)。最后对着官方文档一一验证,最后发现问题所在。

没事不要乱换名字!!!

Google Earth Engine(GEE)——使用归一化燃烧指数 (NBR) 绘制地表烧伤严重程度图 归一化燃烧指数(Normalized Burn Ratio, NBR)是一种遥感指标,用于评估野火或烧伤地面后的植被恢复情况。NBR能增强较大范围的火灾区域,如大于200公顷。它是通过比较远红外波段 (SWIR) 和近红外波段 (NIR) 的反射率来计算的。SWIR波段测量烧伤地面的反射率,NIR波段测量没有受到烧伤影响的植被的反射率。NBR的计算公式为:NBR =(NIR-SWIR)/(NIR + SWIR)。其中,NIR为近红外波段,SWIR为短波红外波段。 阅读详情

相关推荐

DC综合中set_dft_signal的实战配置与优化策略

本文深入解析了DC综合中set_dft_signal命令的实战配置与优化策略。文章从命令的核心作用出发,详细拆解了-view、-type、-usage等关键参数,并通过扫描使能与时钟门控的实战案例,展示了如何正确配置以实现测试模式下的功耗优化。同时,文章总结了高级优化策略、与低功耗流程的协同方法以及常见错误排查清单,旨在帮助数字芯片设计工程师构建高可测性、低功耗的稳健DFT基础。

weixin_28347369的博客 403

解决element的表单校验输入框有值但校验未通过的问题

实际项目中,为了精简代码,会涉及到在同一个表单中同时完成 查看编辑 新增等功能, 此篇解决: 1. 编辑的时候,明明给页面回显赋值了,但是校验非空却没有通过的问题。 2. 表单刚一进页面就校验非空,显示红色提示的问题。 3.常规表单关于校验的规则。

JCat的博客 4万+

cadence—virtuosoic617的使用技巧收集区

cadence使用

qq_33599939的博客 3万+

vue有关elementui form表单rules验证问题,有值却仍然显示不通过

帮同事解决一个vue表单验证的问题,利用了rules,但是填完内容还是一直提示不能为空的错误,情况如下图所示: 1、检查:rules ref,例如本黎:rules=“rules” ref="reluForm"是否与data中定义的一致 2、检查prop值与绑定的属性一致,例如本例中prop="title"中title与data中rules规则绑定的属性一一对应 3、检测表单是否一致,例如本例中:model="addForm"与data中定义的表单名是否一致 以上都检查过没有问题 <el-form :

web15085181368的博客 1万+

Gromacs文件格式全解析:xtc vs trr vs cpt,哪种更适合你的模拟需求?

本文深入解析Gromacs分子动力学模拟中的三种核心文件格式xtc、trr和cpt,详细对比其技术特性和适用场景。xtc适合存储效率优先的场景,trr保留完整动力学数据,cpt确保模拟精确重启。通过实际配置示例和存储优化技巧,帮助用户根据模拟需求选择最佳格式组合,平衡分析灵活性与存储成本。

weixin_29281941的博客 96

从问卷到结论:手把手教你用SPSS 28完成一份完整的社科数据分析报告

本文详细介绍了如何使用SPSS 28完成社会科学研究中的数据分析报告,从问卷数据导入、清洗到描述性和推断性统计分析,再到结果呈现与报告撰写。通过实际案例演示,帮助研究者掌握SPSS 28的核心功能,提升数据分析效率与报告质量。

weixin_28717431的博客 249

解决vue+ element ui 表单验证有值但验证失败问题

一.如图:有值但是验证失败 二. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <el-form :model="form" :rules="rules"> <el-form-item label="数据模板" prop="template" >

weixin_46144929的博客 3727

17、神经网络训练算法与高阶模糊Cohen - Grossberg神经网络稳定性分析

本文介绍了一种新的数据驱动算法用于神经网络训练,该算法继承三次样条权重函数的优点,具有简单架构和良好泛化性能,并通过并行机制显著提升训练速度。同时,研究了高阶模糊Cohen-Grossberg神经网络(HOFCGNN)在可变及无界延迟下的稳定性,利用M矩阵理论和向量Lyapunov函数方法,证明了系统平衡点的存在性、唯一性和全局指数稳定性。研究成果为神经网络的高效训练与稳定应用提供了理论支持和技术路径。

b9c0d的博客 147

vue-element-ui表单验证走过的坑(表单项明明有值,却总是提示验证失败)

首先,看看官方(https://element.eleme.cn/#/zh-CN/component/form)例子(我就截取部分): 视图: <el-form-item label="特殊资源" prop="resource"> <el-radio-group v-model="ruleForm.resource"> <el-radio label="线上品牌商赞助"></el-radio> <el-radio l

Lhy_JL的博客 1975

基于UC3842的反激电源的全面深入解析与MATLAB仿真

内置电流检测,可实现电流模式控制,提高系统的动态响应性。多种保护功能,如欠压锁定、过温保护、短路保护等,确保系统的安全可靠运行。宽工作电压范围,适应不同的电源设计需求。简单的外部元件配置,易于实现。UC3842的典型应用包括开关电源、DC-DC转换器和反激式电源等,其稳定性和可靠性在实际应用中得到了广泛验证。

qq_38334677的博客 1086

华为OD机试双机位C卷:挑选宝石 (C/C++/Python/JAVA/JS/GO)

华为OD机试双机位C卷 挑选宝石,提供C语言、Java、C++、Python、Go、JavaScript源码实现,并提供完整思路讲解。华为OD机试-挑选宝石,华为OD机考-挑选宝石。

qq_45776114的博客 1500

使用element表单校验必填错误的解决方法(表单有值但是一直提示错误)

表单校验错误(input框有值提交的时候一直提示错误) 昨天做了一个element表单的必输项,当时还能用,现在就用不了了,输入了值一直报错未输入,如下所示: [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hDRp1808-1583853736237)(http://image-static.codingdylan.com/img/Snipaste_2020-03-...

my466879168的博客 1万+

【AI编程】Qoder AI 编程工具从部署到深度使用实战详解

Qoder AI 编程工具从部署到深度使用实战详解

congge 8339

ElementUI关于表单验证不起作用的问题解决

在项目中用到ElementUI的表单验证时,发现离开焦点后获取的输入框内容是空的,表示就是获取不到输入的字段。 以下是官网给出的表单验证的步骤和相关的代码。这是上半部分的。 script部分的代码如下: 重点来了:在仔细检查后发现,element-ui的表单校验规则中,el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。也就是我把formData里的属性名改成和rules里的属性名一致就可以了!!!但是,在官网中并没有说到这个名字需要一致的问题。 官网的使用

⭐【World of Yeeking】⭐ 2734

WINCC7.3破解文件

WINCC7.3硬件够破解文件,有需要的下载!WINCC7.3硬件够破解文件,有需要的下载!

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

element的form表单中输入框、下拉框、treeselect的校验问题

1. 下拉框校验 当前版本的element对select选择器的验证存在问题:select选了值,关闭弹框,再打开会触发自动校验。 * 目前有两种解决方法: * 1.使用 v-if 控制表单,太消耗性能 * 2.关闭弹框时直接delete选择器校验,下次打开弹框再添加进去 //使用第二种,触发form中的方法addRules(),把对下拉框的校验重新加进去 header openDialog() { 触发form中的方法addRules(),把对下拉框的校验重新加进去 th

xy405580364的博客 9851

VC中sqlite的使用

在VC中对sqlite的使用,实现数据库大批数据的快速插入,读取数据库中的数据在ListCtrl中显示

element表单校验不生效问题

element表单校验不生效问题 根据我所遇到的问题情况,主要分两种,请遇到相同情况的同学,自己对号入座一波!! 1.第一种是直接没反应,直接就不触发错误提示类。 这种一般就是数据绑定的名称没有对应,以下是需要对应的位置,请自行参照。 html js 中data 第二种就是名称都对应上了,也修改了绑定的值,但是错误提示就是不消失问题。 就类似如如下这种情况: 如图所示我的图片已经显示成功了,但是错误提示还是没有消失,但是在保存校验的时候是没有问题的,所以初步判断为,表单校验方法没有触发。 所以我定义了

weishachucuo的博客 1万+

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

Elementui el-input 输入框校验以及表单校验

日常开发中输入框正则校验大全-------持续更新维护中.......

阿清的前端进阶之路 5万+

vue element-ui的form表单校验总结,动态校验、自定义校验(用正则校验手机号码、数字、url、中文)

写了一段时间的vue,前端用了element-ui,经常会用到from表单,总结一下form表单的校验,以及遇到过的问题。 1. 正常添加校验流程。在form表单加rule; 2. 只想对单个input校验; 3. 自定义校验; 4. 添加动态校验(可以根据需要显示校验或者改变校验规则); 5. 遇到校验无效的问题

新林的博客 5万+

Element的表单校验

实现表单基本结构 vue create login 安装Element(Element - The world's most popular Vue UI framework)官网地址 开发时依赖 : 开发环境所需要的依赖 -> devDependencies 运行时依赖: 项目上线依然需要的依赖 -> dependencies 安装下载element npm i element-ui 在main.js中对ElementUI进行注册 import ElementUI fro

m0_66430246的博客 2931

表单验证输入框必填校验,输入框中存在值时,校验的提示还一直展示,校验如果有值则是必填项,并且输入的值是正确的;如果没有值,不校验

form表单校验,表单校验某个指定属性,表单校验有值时,校验提示信息没有清除。表单中如果有值必须校验,没有值不校验

m0_60594323的博客 1985

element-plus中,表单校验的使用

element-plus中,表单校验的使用。

casually的博客 3145

element-ui表单校验、重置表单与移除表单项的校验结果

1.element-ui的表单校验使用validate方法。参数为一个回调函数,该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。 示例代码如下: <el-form ref="dynamicValidateForm" :model="uploadObject"> <el-form-item label="名字" pr...

u010007013的博客 9996

如何对 element 表单的某条输入框 进行单独校验

对element 表单的某条属性 进行单独校验

qq_45300842的博客 2819
上一篇: elment多选循环绑定值必须为数组问题
下一篇: 前端开发小技巧$eventBus
FF_XM
博客等级 码龄5年 19粉丝 44原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值