使用elelment-ui表单校验切换就自动开启了所有的校验

原创 已于 2023-07-21 09:42:22 修改 · 2.1k 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

于 2021-10-28 17:32:06 首次发布
在Element UI的表单中遇到问题，当输入第一个表单字段后，所有后续字段立即进行校验。通过设置`validate-on-rule-change`属性为`false`可以阻止这一行为，使其不在rules属性变化后立即触发验证，确保用户友好的表单交互体验。

今天在做需求的时候遇到一个问题
输入完第一个表单，后面所有的表单就自动校验了
使用element表单中的validate-on-rule-change来判断 这个是 是否在 rules 属性改变后立即触发一次验证 值为布尔值；

 <el-form ref="addForm" :model="addForm" label-width="120px" :rules="rules" :validate-on-rule-change="false">

表单校验有一个validate-on-rule-change属性，默认是true，我们设置为false就可以了！

详解element-ui 表单校验 Rules 配置 常用黑科技
12-28
指示type要使用的验证器。可识别的类型值为： string：类型必须为string。type 默认是 string // 校验 string: [ {type: 'string', message: `请输入字符串`, trigger: 'blur'} ] 测试字段 prop=string> <el v-...
Vue element-ui父组件控制子组件的表单校验操作
10-15
以下将详细介绍如何实现Vue Element-UI父组件控制子组件的表单校验操作。 首先，我们来看一下父组件的代码。在父组件的模板中，我们引入了一个名为`child-form`的子组件，并通过`ref`属性（`ref="childRules"`）来...
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
12-12
前言 开发过程中遇到了一个需求，根据用户选择的联系方式，动态改变输入框的检验条件，并且整个表单是可以增加的 在线访问:动态表单校验 github(欢迎star): https://github.com/Mrblackant. .. 思考几个问题 1.整个表单是可新增的，所以要遍历生成； 2.联系方式(手机/座机)的切换，是要切换后边不同类型输入框还是只改变校验规则(本篇是动态改变校验规则) 实现 1.elementui的form表单实现校验的时候要给当前el-form-item加上prop属性,因为我们是遍历生成的表单，那我们的写法就要写成: 重点在prop属性 <template v-
vue3 elemet-plus中表单验证修改required，导致校验字段全部出现
a2357346100的博客
04-04 1431
el-plus修改验证
element中表单赋值为空时触发校验
weixin_41009649的博客
01-04 1487
element ui 表单赋值为空时触发校验
解决element ui切换语言时,表单验证自动触发
weixin_44373861的博客
07-01 1577
项目国际化处理。一切换中英文，表单的验证就自动触发，一片红，影响观感。像这样： 可以在watch中监听语言变化 watch:{ //处理切换语言时，表单验证全部自动触发 "$i18n.locale": function () { this.$nextTick(() => { this.$refs.form.clearValidate() //form是你自己表单的ref属性值
当点击编辑页面时，element-ui输入框的校验自动触发了，如何解决
qq_50386946的博客
05-24 1248
可以在请求查询接口完毕之后，清除整个表单的校验。
Element-UI 表单校验
Jana Jing的分享
07-13 3281
表单验证规则
Vue自定义组件使用Element-ui表单校验
qq_42731434的博客
07-17 2741
一般情况下(form中的组件都是element提供的组件)在使用elm的表单校验时我们是这么使用的：// 栗子.vue <template> <el-form :model="formData" :rule="rules" ref="formRef"> <el-form-item prop="inputValue"> <el-input v-model="formData.inputValue"></el-
[elementui]form表单先编辑后新建form自动触发校验
qubes的专栏
04-03 1378
element form表单先编辑后新建form自动触发校验。
【element-ui】 el-form之rules赋值后校验没消失
小墨鱼的前端问题录
09-06 3766
错误原因是在return中定义了一个空对象formLabel,在校验过程中，formRules值找不到对应的formLabel值，此时就出现了在输入框中赋值之后，校验不消失。
【Element Ui】 vue3中修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息
alikami的博客
03-05 5648
修改el-form的rules后不触发自动校验,再次修改rules时清除验证信息
element-ui 表单自动校验
凡尘
04-20 286
element 表单自动校验
两个表单之间tab选项切换时，总会触发密码校验
蓦然回首，那人却在，灯火阑珊处。
06-05 389
两个表单之间tab选项切换时，总会触发密码校验
ElementUI问题:el-form表单校验功能
chenghao13834505361的博客
07-08 1912
ElementUI问题:el-form表单校验功能
element-ui 表单里面的字段根据条件展示时，不同情况下对不同字段进行校验
m0_66899315的博客
04-29 1966
element-ui 表单里面的字段根据条件展示时，不同情况下对不同字段进行校验，当前字段明明有值，也没有错误校验，但是提交表单时候，valid始终为false，将rules放在计算属性中
Element UI打开表单自动验证问题的解决
10-18 1627
页面一打开什么都没做表单就自动验证的解决方法
elementui表单验证：2个关联，2个不填为非必填，但填写了一个后另一个也得为必填项
weixin_45613604的博客
03-16 4371
关键：在prop后面添加rules判断 <template> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="姓名" prop="name" :rules="ruleForm.pass ? rules.name:[{required:false}]">
el-form表单初始化赋值表单dataForm，，校验有问题，校验必填的也校验成功了
m0_59157023的博客
02-21 1084
el-form表单初始化赋值表单dataForm，，校验有问题，校验必填的也校验成功了
element-ui表单校验动态变化
最新发布
11-04
在 Element UI 中实现表单校验动态变化，可采用以下两种方法： ### 基于特定字段事件动态修改校验规则 当表单校验规则的变化与某个字段的值相关时，可在该字段的事件中动态修改校验规则。例如，添加动态规则与...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值