element验证中根据条件决定是否是必填项

最新推荐文章于 2025-07-11 18:08:36 发布
最新推荐文章于 2025-07-11 18:08:36 发布
阅读量2.1w 收藏 5
点赞数 4
CC 4.0 BY-SA版权
分类专栏： vue&element 文章标签： element
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_26522773/article/details/79277234
本文介绍了一个使用Element UI实现的表单验证规则示例，重点在于如何根据不同条件设置审核备注字段的验证规则。当价格状态不为特定值时，审核备注为必填项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

示例：
   <el-form-item label="审核备注" :label-width="formLabelWidth" prop="priceRemark" :rules="this.dialogForm.priceStatus!=3?rules.priceRemark:[{ required: false, message: '请填写审核备注', trigger: 'blur' }]">
   <el-input type="textarea" v-model="dialogForm.priceRemark" auto-complete="off" :disabled="!dialogSendData.isAdd" ></el-input>
</el-form-item>
   


   data中的relus
   rules:  {
priceRemark: [
         { required: true, message: '请填写审核备注', trigger: 'blur' }
       ]
             }
el-form单独设置校验规则（根据某条件判断required是否必填）
仙女的博客
09-24 6903
应用场景 联营扣率：当经营方式为“联营”时，必填，0.0000~100.0000；当经营方式为其他时，此出入框置灰 <el-form-item label="联营扣率：" class="Com-limitWord" prop="priceCutRate" :rules="[{required:form.saleType == 3 ? true : false,validator: checkDeductionRate,trigger: 'blur'}]" > .
element验证根据条件决定是否是必填项
qq_37515373的博客
04-18 6121
示例： <el-autocomplete class=“inline-input” v-model=“inputState” :fetch-suggestions=“querySearch” placeholder=“请输入或选择要删除的工单任务” @select=“handleSelectSheet” > 其实关键代码只有绑定的rule;如下：:rules=“this.f...
element ui 中根据条件动态判断表单项是否为必填项
qq_42853685的博客
03-13 1690
element ui 中如何根据条件动态判断表单的某一项是否为必填？ 我们一般在定义表单时，都习惯将表单的校验规则放在 data 中，当我们想动态的根据某一个数据的相应状态决定表单项是否为必填时，发现数据无法响应。 content: [ { required: this.isRequire, message: '请输入内容', trigger: 'blur' }, ...
Vue + Element UI 实现选框联动进而动态控制选框必填
最新发布
m0_70325779的博客
07-11 447
将字段必填校验规则绑定在 Vue 代码字段上；这一步是最简单的，完成第一步或第二步，只需要将定义好的属性或函数绑定到对应的字段即可；如下代码所示。
element 根据判断条件 校验表单非必填
weixin_54740858的博客
09-23 570
给el-form-item加的:rules判断就可以啦~根据选择的原因来判断描述是否为必填。
element某个字段根据特殊条件判断是否为必填项
CuiCui_web的博客
04-10 2797
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" > <el-form-item label="项目来源" prop="projectSource" :rules="projectSourceIsMust?rules.projectSou...
element ui表单必填_vue elementui rules根据选择条件判断下一个选项必填和非必填的校验...
weixin_32412379的博客
12-30 5204
效果图如下选择H5 link,HyperLink为必填项 选择non-clickable,HyperLink为非必填项 代码如下：v-for="item in typeOptions":key="item.value":label="item.label":value="item.value">formRule: {title: [{ required: true, message: 'Pl...
详解element-ui设置下拉选择切换必填和非必填
12-10
在Element-UI中，开发Web应用时常会遇到需要动态调整表单验证规则的情况，比如一个下拉选择框根据用户的选择，使得某个输入框变为必填或非必填。本篇文章将详细讲解如何实现这一功能。 首先，我们来看一下具体的...
vue element table中自定义一些input的验证操作
10-15
`required`表示该字段是否必填，`message`定义了验证失败时的提示信息，`trigger`指定了触发验证的事件，如`blur`表示失去焦点时触发验证。 然后，我们需要在`el-form-item`中使用`:prop`属性来指定需要验证的字段...
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
例如，我们可以使用 required 属性来指定某个表单项是否必须输入值。同时，我们也可以使用 message 属性来指定错误信息的内容。 在使用 Element 结合 Vue 进行表单验证时，我们需要在 template 中指定表单项的验证...
vue element自定义表单验证请求后端接口验证
12-30
做vue项目的时候遇到了一个需求，在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值。 template 账户 prop=userid> <el v-model=addForm.userid></el> 引入接口 import { checkUseridRepeat...
js必填项验证代码！！！！！
06-09
"js必填项验证"是指使用JavaScript进行的对表单字段的非空检查，以确保用户在提交前至少填写了必要的信息。以下是一些关于JavaScript必填项验证的关键知识点： 1. **DOM操作**：首先，你需要通过Document Object ...
element ui表单必填_element ui判断是否必填添加校验
weixin_39605840的博客
12-20 1733
是否v-for="item in appForm.findListData":key="item.dictKey":label="item.dictValue":value="item.dictKey">确定取消import { Loading } from 'element-ui'; //引用loading数据export default {created () {},mounted ()...
elementui中的表单，根据条件判断切换是否必填
EstherNi的博客
06-03 741
elementui中的表单，根据条件判断切换是否必填
【el-form】根据指定表单项，决定另一表单项是否必填
花椒和蕊的博客
06-05 1436
场景：表单中的下拉框，只有选择指定的值，才会让另一个输入框进行必填校验，选其他的值不校验。校验要动态，输入框的提示语也动态控了下。
el-input输入框加上红色星号必填验证
hello world
03-09 7288
vue文件: <el-form-item label="姓名：" prop="name"> <el-input v-model="form.name" minlength="1" /> </el-form-item> js文件: data() { return { rules: { name:[{required: true, message: '请输入姓名', trigger: 'blur'}] }
Elementui el-input 输入框校验以及表单校验
热门推荐
阿清的前端进阶之路
03-25 5万+
日常开发中输入框正则校验大全-------持续更新维护中.......
element中el-input输入框校验（vue项目）
编程小白的博客
10-10 2529
【代码】element中el-input输入框校验（vue项目）
el-input 必填 只可以输入数字校验
qq_42174597的博客
01-27 6285
<el-form-item label="审计资金量（万元）" label-width="150px" prop="auditAmount" :rules="[{ required: true, message: '请输入资金量', trigger: 'blur' }, { validator: this.checkNum, trigger: 'blur'}]"> ...
element的input必填项在不操作的适合不提示验证
10-26
HTML的`<input>`元素默认并不会在用户不操作时自动提示必填字段的要求，因为浏览器的表单验证通常是用户主动触发的行为，比如提交按钮点击或失去焦点等。如果你想要在输入框未填写内容时就显示提示信息，通常需要借助JavaScript来实现这个动态验证功能。 你可以通过添加一些JavaScript事件监听器，例如`onfocusout`（失去焦点）或`onsubmit`（表单提交前），当输入框为空时显示警告消息。以下是一个简单的例子： ```html <!DOCTYPE html> <html lang="zh"> <head> <title>必填字段验证示例</title> <style> .required-field-warning { display: none; } </style> </head> <body> <form id="myForm"> <label for="name">姓名：<input type="text" id="name" required></label> <span class="required-field-warning" id="nameWarning">姓名不能为空</span><br> <input type="submit" value="提交"> </form> <script> document.getElementById('name').addEventListener('blur', function() { if (!this.value) { this.nextElementSibling.style.display = 'block'; } else { this.nextElementSibling.style.display = 'none'; } }); // 或者使用更复杂的验证策略，如表单提交前校验 document.getElementById('myForm').addEventListener('submit', function(e) { var nameInput = document.getElementById('name'); if (!nameInput.value) { e.preventDefault(); // 阻止表单提交 nameInput.nextElementSibling.style.display = 'block'; } }); </script> </body> </html> ``` 在这个例子中，当你离开`name`输入框时，如果没有输入值，旁边的警示信息就会显示出来。如果在表单提交时输入框仍为空，提交操作会被阻止并展示警告。
评论 8
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值