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

已于 2022-03-08 19:39:42 修改
阅读量2k 收藏 7
点赞数
分类专栏： vue开发 文章标签： javascript vue.js 前端 elementui
于 2022-03-08 19:24:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pzlzyi/article/details/123360471
版权

问题记录：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">
          <el-col :sm="24" :md="24" :lg="24">
            <el-form-item  label="源地址:" prop="address">
                <el-col :span="11" style="padding-left:0"
最低0.47元/天 解锁文章
轻轨
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
el-table树形表格表单验证(列表生成序号)
10-15
`el-table`是一个强大的数据展示组件，支持多种复杂的表格布局和功能，包括树形结构。在处理树形表格时，验证表单和生成唯一的序号对于确保数据的准确性和一致性至关重要。 ### 一、树形列表生成序号 生成树形列表...
element 中 el-menu 组件的无限极循环思路代码详解
10-15
主要介绍了element 中 el-menu 组件的无限极循环,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
判断2个输入框至少输入1个
aocong5568的博客
02-22 453
<script type="text/javascript"> function check_input() { var name = document.getElementById("txtname"); var phone = document.getElementById("txtphon...
element-ui在vue中如何实现校验两个复选框至少选择一个！
TangMonk的博客
09-11 2058
来实现这一点。你可以在 `rules` 对象中定义一个自定义的验证规则来检查 `isCheck1` 和 `isCheck2` 至少有一个被选中。以下是一个示例：```vue。
el-form-item动态必填
最新发布
yy_demo的博客
04-26 276
有时候一个字段是否必填需要根据另一个字段的值确定，这时候就需要动态校验，动态校验是绑定在el-form-item上，代码如下。
element UI 中 el-form 表单包含多个 el-input 时的校验方法
qq_36437172的博客
08-28 1万+
需求场景：当一个Form-Item 下有多个输入框或者一个选择框时，同时该 Form-Item 为必填项，我们应该如何验证其下的各个输入框/选择框呢？ 方案一： <div class="flex-row"> <el-form-item label="加班标准" required> <div class="flex-row"> &...
form表单 校验 至少必填一项 或者 按条件决定是否必填
x_nweBorder01k的博客
08-05 3925
form表单 校验 至少必填一项 或者 按条件决定是否必填
一个el-form-item中有多个组件，但只有一个组件是必填的
weixin_38345306的博客
06-26 883
一个el-form-item中有多个组件，但只有一个组件是必填的
VUE+ElementUI的表单el-from表单验证二选一必填项，并且满足条件后会清除表单验证提示。
weixin_43185419的博客
09-16 6056
效果图： 使用Element-UI的自定义验证实现。 这里面有个坑是，两个input输入框都点出了提示信息，填写任一输入框之后只有操作的那一项的验证提示消失了，不主动清除另一项的验证提示就会一直存在，观感很不好。如图： 所以，在验证成功后要强制清除另一方的验证提示。本来应该分别清除的，我这里懒得写那么长了干脆一起清掉哈哈哈。 现在，填入其中一项效果如图： HTML： <el-form ref="form" class="forminfo
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
在开发Web应用时，Element-UI是一个非常流行的前端组件库，它提供了丰富的UI元素和功能。在本案例中，我们关注的是如何在使用Element-UI的`el-menu`组件时，确保用户在导航选中后刷新页面时仍能保持当前选中的状态。...
Android-一个多重嵌套:SwipRefreshLayout->RecyclerView->ViewPager->RecyclerView
08-12
`SwipRefreshLayout`是Google提供的一个下拉刷新的组件，通常用于顶部加载更多数据。它包含一个子视图，当用户从上向下滑动这个子视图时，会触发刷新操作。在这个案例中，`SwipRefreshLayout`被用作最外层的容器，...
react-hoc-form-validatable:使用Promise验证高阶组件
05-14
过滤不需要的道具给HOCInput子项。 改善打字稿d.ts。 v0.5.0 删除babel-cli作为dep 使用新的上下文ReactAPI。 所以从0.5.0开始需要react> 16.3.0 v0.4.0 validateLang现在是HOCForm中的可选道具 ...
el-form实现其中一个填写即可的校验
博客简介
07-07 1587
【代码】el-form实现其中一个填写即可的校验。
el-input设置必填提示（单个&多个）
热门推荐
song_song0927的博客
12-26 1万+
el-input设置必填
elementUI一条el-form-item控制两个必填项
qq_41346332的博客
01-11 2165
element-ui 一个props控制多个必填项
三分钟细数 el-form 表单校验的坑点，前车之鉴，可助你避坑
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
10-12 1万+
Vue 的 el-form 提供了表单校验功能，通过 :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。通过封装，让前端校验更方便。具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。...
element表单校验
qq_37273844的博客
09-18 255
<el-form ref="form" :rules="rules" :model="formData"> <el-form-item label="书籍id" prop="contentId"> <el-input v-model="formData.contentId" placeholder="请输入书籍id" clearable size="small"> </el-input> &l
Vue form表单input框 手动赋值 提交时 表单input值没有生效 验证仍然是空
zhang8907xiaoyue的博客
08-29 6503
一、问题 1、input 赋值后表单提交却为空 在调用接口将返回的值赋在表单的 input 上或者子页面传递数值给父页面form表单model元素后，提交表单，明明值已经赋上去了，结果提交后显示的该值为空。具体看以下代码： <el-form ref="form" :model="form" :rules="rules" label-width="100px"> <el-form-item label="司机ID" prop="driverId">
html表单多选框验证,表单 – 如何验证是否应选择至少一个复选框？
weixin_42502860的博客
06-04 849
考虑创建一个包含复选框组的FormGroup,并将组的选中值绑定到带有必需验证器的隐藏formcontrol.消耗你有三个复选框items = [{key: 'item1', text: 'value1'}, // checkbox1 (label: value1){key: 'item2', text: 'value2'}, // checkbox2 (label: valu...
el-form-item提示必填
09-03
- *3* [问题记录：el-form遇坑 el-form-item存在多个子项校验至少必填一项](https://blog.csdn.net/pzlzyi/article/details/123360471)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值