el-form表单输入框根据另一输入框的值添加必填校验

最新推荐文章于 2024-08-17 17:56:24 发布
最新推荐文章于 2024-08-17 17:56:24 发布
阅读量635 收藏 8
点赞数 8
文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Gpointy/article/details/135296272
版权

0 描述

两个表单，第二个表单的单选框需要根据第一个表单下拉框中的值去动态添加是否必选检验

1 代码

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

o0麦嘎
关注
el-form表单中对不同的下拉项（el-select）的选择，提交时的校验提示问题的解决 —— vue
weixin_46419373的博客
07-02 2654
—— 上篇博客：弹窗封装 前言 在写这篇博客前，大家可能对我上篇的博客（自定义弹框）的使用还有点迷茫，因此接下来我会首先根据我上一篇的弹框封装来作为这篇博客的开头 一、弹框使用 1、效果 点击新增会有一个弹框 2、代码 二、今天的主题（下拉值不一样，提交校验的问题） 1、先看几个图 问题描述： 从图一可以看出，只要我上一篇的博客能看懂的话，那么图一的样式以及校验都可以根据element-ui来实现。现在的问题是，从图一都知道，第一个下拉框有三个值，银行，微信和支付宝。然后从图二和
vue el-form 表单验证输入框只能输入自然数
且听风吟的博客
09-06 4633
el-form 表单验证的数字验证为： 但是这个验证存在着一些问题，比如可以输入负数，如下所示： 有时候只允许输入自然数，所以需要对输入的负数加以限制，所以就对输入框加 @input 来定义输入，并绑定验证输入的方法： <el-form-item prop="mainType" :label="$t('basicData.device.table.mainType')+'...
el-form表单验证-当某一项有修改后另一项为必填
qq_45021462的博客
12-19 863
el-form:表单验证
vue2表单校验：el-form表单绑定数组并使用rules进行校验
l_q_l的专栏
08-17 2580
1、在el-form中指定rule，可引用data或compute中集中定义的rules，也可以每一条item中单独定义自己的rule2、另外，花费1天的时间买来的教训：如果rules集中写，在el-form中已经引用了，那么在el-form-item中不能重复引用，否则console中不会报错，但是，rules将不起作用，且提示 people is not a string，即便在rules中添加了 type: 'array' 也不行。如下写法是错误的。​。
【el-form】根据指定表单项，决定另一表单项是否必填
花椒和蕊的博客
06-05 1146
场景：表单中的下拉框，只有选择指定的值，才会让另一个输入框进行必填校验，选其他的值不校验。校验要动态，输入框的提示语也动态控了下。
el-from中校验，如果某一项需要另一项填写才能校验
m0_61265297的博客
07-10 373
使用validateField。
VUE实现element的form表单中字段联动必填校验（根据一个字段内容决定另一个字段是否为必填项）
gyzzdjy的博客
02-17 5334
VUE实现element的form表单中字段联动必填校验（根据一个字段内容决定另一个字段是否为必填项）
el-form表单动态校验(场景: 输入框根据单选项来动态校验表单 没有选中的选项就不用校验)
qq_41421033的博客
09-07 2735
关键点: 跟正常校验流程不同的是, el-form-item标签内的required和rules都要加上判断条件。场景: 输入框根据单选项来动态校验表单。没有选中的选项就不用校验。正题部分-表单动态校验。
问题记录：el-form遇坑 el-form-item存在多个子项校验至少必填一项
pzlzyi的博客
03-08 2203
问题记录：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-form表单校验失效，检测不到输入内容
m0_48390697的博客
11-01 1927
el-form表单校验失效，检测不到输入内容检测不到输入内容，很可能是没绑上，尤其是已经输入内容了，还是提示输入为空，这个时候一定要保证对应的数据名称都一样，以官网的例子说明一下。
el-form单个表单项校验方法；element-ui表单单个选项校验；el-form单个表单校验
weixin_43286206的博客
08-26 5658
el-form单个表单项校验方法；element-ui表单单个选项校验；el-form单个表单校验 当我们使用element-ui的el-form时，想在提交表单前对其中一个表单进行验证时就可以使用element自带的方法“validateField”
【ElementUI 表单校验】一个 el-form-item 下多个表单校验（循环校验）
前端知识分享喵
06-07 3531
前端开发项目的过程中，批量表单循环校验是很常见的，如上图，动态添加奖励计算规则，把所有的表单放到了一个 el-form-item 下。也可以理解为 el-form-item 做了嵌套，外层当然也可以省略，样式做微调，下面通过代码来详细的看一下。不足之处，多多交流。
form表单输入框JS校验
Joson
09-22 2649
form表单输入框JS校验 在填写form表单的输入框时，需要校验对应数据是否合法，以下为常用的数据JS校验函数。 输入框校验示例：（用户名） 在input输入框内部添加onkeyup函数 在input输入框内部调用onchange函数
Javascript的form表单校验输入框
m0_74359467的博客
12-06 591
对于每个输入框，我们使用条件语句来检查其值是否满足特定要求，并在不符合要求时显示警告框并返回false以阻止表单提交。同样地，我们使用正则表达式来验证电子邮件和电话号码的格式，使用比较运算符来验证年龄的范围。在HTML部分，我们将每个输入框与相应的标签进行关联，并在表单元素上添加了onsubmit事件来调用validateForm函数。否则，将阻止表单提交。首先定义了一个名为validateForm的JavaScript函数，该函数用于验证表单数据。在函数中，首先获取每个输入框的值，然后逐一进行验证。
elementUI 两个输入框联动校验 第一个输入框值不能大于第二个输入框值 第二个输入框值不能小于第一个输入框值
weixin_44963140的博客
09-13 6963
elementUI 两个输入框联动校验 第一个输入框值不能大于第二个输入框值 第二个输入框值不能小于第一个输入框值 <el-form-item prop="start" label-width="70px"> <el-input clearable type="text" v-model="thisForm.start" @clear="$refs.thisForm.validateField('start')" @inp
el-form表单多项控制校验；el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
i_am_a_div的博客
06-30 8669
el-form表单新增表单项动态校验；el-form校验动态表单v-if不生效；
element Form表单自定义校验（针对局部输入控件局部校验）
热门推荐
Beamon__的博客
09-07 1万+
最近帮朋友看一个vue项目，需要在整个表单的一个输入控件上添加校验，因为表单是动态创建的，就没有考虑整个表单绑定rules，而是在&lt;el-form-item&gt;上绑定了rules，具体代码如下： template/html部分： &lt;el-form-item label="自定义校验" prop="text" :rules="[ { ...
Antd-Design-Vue专题：From基础表单如何在输入过程中校验？
qq_43235864的博客
10-29 1564
From基础表单如何在输入过程中校验？ 前端技术：Vue + Ant-Design-Vue 场景模拟：网上有很多关于校验Form-Input的校验方法（都很不错~~）。突发奇想，想通过watch监听输入框的内容 实现校验过程。 效果展示： 实现代码： // 输入框内容首先添加一个v-model实现双向数据绑定 //<a-form-item>元素上加入属性validateStatus(提示样式) help(提示内容) <template> <a-form :form
vue+element ui 实现相互校验表单 前后 实时 校验两个输入框
记录常见的问题以及解决办法
04-18 2194
标题 前后相互校验 实时输入实时校验 <el-form :rules="rules2" :model="form" ref="ruleForm2"> <el-table ref="tableRef" :data="form.tableData" style="width: 100%" :cell-style="cellStyle" class="zn
el-form validate 校验信息显示在输入框右边
最新发布
09-25
`el-form` 是 Element UI 提供的一个用于构建表单组件的工具，它提供了一种方便的方式来验证用户输入。当你设置 `validate` 属性时，可以配置校验规则，并利用内置的提示机制在输入框旁边实时显示校验结果。 例如，在 `el-form-item` 中，你可以这样设置： ```html <el-form-item label="必填字段" :rules="['required', { message: '不能为空', trigger: 'blur' }]"> <el-input v-model="form.example" placeholder="请输入内容"></el-input> <el-form-item-explain slot="message" class="validation-message">这是一个必填字段</el-form-item-explain> </el-form-item> ``` 这里的 `:rules` 定义了验证规则，`required` 表示必填，`trigger: 'blur'` 指定在用户停止编辑（失去焦点）时触发验证。如果输入不符合规定，`el-form-item-explain` 或者自定义的 `slot="message"` 就会显示错误消息。 如果你想要将错误信息直接放在输入框右侧，可以考虑使用第三方库或者自定义样式来调整布局。不过，Element UI 的默认样式通常是将错误信息放在标签旁边而不是输入框内。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值