Element ui 表单动态去掉某一项的校验

最新推荐文章于 2024-04-25 16:37:07 发布
最新推荐文章于 2024-04-25 16:37:07 发布
阅读量3.7k 收藏 3
点赞数 1
分类专栏： element Ui 文章标签： elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_50864962/article/details/123663194
版权 
// 方式一
this.$refs.ruleForm.clearValidate('input2')
// 方式二
this.$refs.ruleForm.fields.map(i => {
    if (i.prop === 'input2') {
        i.clearValidate()
    }
})
风吹一夏v
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue ~ element-ui 动态表单验证，支持添加和删除操作
07-27
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
vuejs+element UI点击编辑表格某一行时获取内容填入表单的示例
12-11
综上所述，Vue.js结合Element UI实现的这个示例展示了如何利用组件化的方式构建一个可编辑的表格，包括数据绑定、事件处理、表单编辑和验证、数据同步以及UI交互，这些都是前端开发中的常见场景和重要技能。...
Element-Form表单单独取消某一项的校验
weixin_43551242的博客
10-12 2222
活动区域下拉框的值，选择为区域一时，活动形式则隐藏，因为活动形式为必填项，点保存是走ruleForm检验valid返回false，所以下面代码会报错走 console.log(‘error submit!**活动区域下拉框的值，选择为区域二时，显示活动形式（必填项）。
elementUI中表单校验的清空校验以及手动校验
qq_20086467的博客
01-31 1431
this.$refs.表单.clearValidate(),这个可以传入字符串或者字符串数组，字符串对应的是我们自定义的rule里面的属性名，rule的属性名对应的是el-form-item的prop。这个api目前遇到的场景是el-radio切换时v-if展示不同的表单内容，但是当有校验提示的时候会被带到不该在的地方。如上所示，这里就可以用clearValidate来清空提示文字。
移除表单项的校验结果的用法
weixin_61978391的博客
04-25 1222
el-form-item label="材料类型：" :prop="'RawList.' + index + '.MaterialType'" :rules="rules.MaterialType">问题：当等于钢板时，是必填的，有必填校验，这时候，把材料类型换成型钢，板厚是不必填的，板厚前面的红色*已经没有了，但是上一次的校验结果还是在下面显示着。需求：表单中有一块的数据是可以手动动态增加的，同时板厚的是否必填是和材料类型有关的，当材料类型等于钢板时，板厚是必填的，当等于型钢时，是非必填的。
elementui清除表单个别表单项验证
qq_45030898的博客
09-07 3904
elementui清除表单个别表单项验证
element 去掉form表单的某一项单个form-Item校验
卡卡罗特的博客
08-13 6191
element 去掉form表单的某一项单个校验
element ui-动态增删表单项及校验
CodingStudying的博客
12-15 312
点击添加按钮，增加一条 名称 与数量的表单项；点击每条表单项后面的垃圾桶图标，删除对应表单项。同时对名称和数量增加必填校验；点击确定提交表单信息。
vue element表单去掉某一项的校验
总结前端开发中遇到的问题，分享前端知识
04-06 4429
// 方式一 this.$refs.ruleForm.clearValidate('item1') // 方式二 this.$refs.ruleForm.fields.map(i => { if (i.prop === 'item1') { i.clearValidate() } })
VUE+ElementUI的表单验证二选一必填项，并且满足条件后清除表单验证提示
darling331的博客
08-10 2481
上代码 <el-form-item label="出库单号" prop="ecode" ref="ecode" :rules="rules.ecode"> <el-input v-model="queryParams.ecode" placeholder="出库单号和出库箱号至少填写一项" clearable style="width: 300...
详解element-ui 表单校验 Rules 配置 常用黑科技
10-15
`Rules`配置是Element-UI表单组件`el-form`的核心功能之一，用于定义表单字段的验证规则，确保用户提交的数据准确无误。以下是对这些规则配置的详细说明： 1. **类型验证**： - `string`：验证字段的值必须是字符...
Vue element-ui父组件控制子组件的表单校验操作
10-15
以下将详细介绍如何实现Vue Element-UI父组件控制子组件的表单校验操作。 首先，我们来看一下父组件的代码。在父组件的模板中，我们引入了一个名为`child-form`的子组件，并通过`ref`属性（`ref="childRules"`）来...
element-ui vue 表单校验
12-21
element-ui vue 表单校验
el-form 清除部分必填项校验 clearValidate
Shimeng_1989的博客
04-14 4409
el-form 清除部分必填项校验 clearValidate。
清除element残留表单校验
马优晨
10-12 2824
如上图所示，当给需要的表单加上校验以后。当点击 “添加新用户” 的时候 会发现，有莫名其妙的校验，明明没有任何的操作。 其实这个就是 校验的残留。 处理方案 <div class="account-dialog"> <el-dialog :title="iscreate?'创建新用户':'修改用户信息'" :visible.s...
关于element ui 中使用表单校验字段，校验一直不消失的问题
weixin_54938190的博客
02-17 2911
关于element ui 中使用表单校验字段，校验一直不消失的问题
vue form动态添加删除的校验
lqw199311的博客
10-29 626
form需要动态添加行组件时，需要遍历，这时在rules中再设置校验规则就不合适了，此时简单的方式是直接将规则写在el-form-item中就可以了 <div v-for="(item, index) in budgetAddForm.Budgetdetails" :key="index"> <el-row :gutter="10" class="row-content"> <el-col :span="4">
Vue elemen ui 移除上次校验与部分清除上次校验
qq_59626859的博客
11-01 486
如果不清除上次的校验就会出现，之前的大陆企业的校验还会出现在香港企业的校验中。可以切换类型，下面的输入框参数也会随着改变。也可以在这里动态修改表单的校验信息的提示语。
element表单 去掉表单某一项校验
LJJONESEED的博客
10-27 1815
el-form-item 标签中存在v-if 时，条件为true不需要校验。
element ui 动态添加input 的表单校验
最新发布
06-14
Element UI 提供了强大的表单组件和灵活的功能，包括动态添加输入字段的表单验证。当你需要在运行时根据用户交互或数据变化动态生成表单元素并进行校验时，可以使用 Vue.js 的响应式系统配合 Element UI 的 `el-form` 和 `el-form-item` 组件以及自定义验证规则。 以下是一个基本的步骤： 1. **Vue组件结构**： 使用 `v-for` 指令遍历动态数据，并为每个动态生成的 input 创建一个 `el-form-item`。 ```html <template> <el-form :model="form" :inline="true"> <el-row v-for="(item, index) in dynamicItems"> <el-col :span="6"> <el-form-item :key="index" :label="item.label"> <el-input v-model="item.value"></el-input> </el-form-item> </el-col> </el-row> <el-row> <el-col :span="24"> <el-button @click="addFormItem">Add Item</el-button> <el-button @click="submitForm">Submit</el-button> </el-col> </el-row> </el-form> </template> ``` 2. **数据绑定和方法**： 定义 `dynamicItems` 数组存储动态生成的表单项，`form` 对象用于存储整个表单的数据。`addFormItem` 和 `submitForm` 方法处理相应的事件。 ```js <script> export default { data() { return { form: {}, dynamicItems: [{ label: 'Dynamic Input', value: '' }], }; }, methods: { addFormItem() { this.dynamicItems.push({ label: 'New Input', value: '' }); }, submitForm() { // 这里可以使用 validate 方法进行表单验证，确保所有输入都有效 this.$refs.form.validate((valid) => { if (valid) { // 提交表单逻辑 } else { console.log('请确保所有字段已填写'); } }); }, }, }; </script> ``` 3. **表单验证**： Element UI 的 `el-form` 元素有一个 `ref` 属性，`validate` 方法会检查所有关联的表单项是否通过验证。你可以在 `submitForm` 中调用这个方法，然后根据返回的结果决定是否提交表单。 注意，对于动态添加的表单项，你需要确保每个 `el-input` 都有对应的 `v-model`，并且根据实际需求定制验证规则。例如，你可能希望对每个输入项设置特定的校验规则，如必填、长度限制等。可以使用 Element UI 的内置验证规则，也可以自定义 `validateHandler` 属性提供自定义验证函数。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值