form表单提示语切换表单信息的时候，表单校验提示语没跟着切换

原创于 2024-07-04 09:13:52 发布 · 388 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

问题原因：在 form 中 form-item 元素没有唯一标识，组件内部会误以为是同一个元素，导致切换时触发校验，提示语位置错乱。

解决方案：在每个 form-item 标签中添加相应的key，保证key的唯一性，即可解决。

 <el-form-item label="" prop="" key="唯一key值">

 </el-form-item>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

花生柿子

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

「已解决」React Antd Form.List 表单校验无飘红提示的问题

Constantiny的博客

07-27

3036

比如我有这样一段代码来实现对 list 具体内容的校验，但是写完后发现没有提示，打 console.log 发现也能进入到 throw new Error 里面去，但是就是没有飘红提示。我想对 Form.List 构建的表单进行校验，比如下拉框中的内容应当至少有一个 XX，表单的长度不能少于多少等等对 List 内容进行校验，并给出飘红提示。看官网，对 Form.list 整体进行校验需要加上 ErrorList 才能正常显示飘红提示。

iview表单动态校验提示信息错位

weixin_39818813的博客

04-22

1599

一开始我们对表单所有项进行校验，可以看到校验信息是正常的：然后我们取消一个口，通过v-if指令，justHz为false来隐藏掉对应的表单行： <FormItem label="执行标准适用国别" prop="standardPlace" v-if="justHz" :rules="{ required: justHz, message: `请选择执行标准适用国别`, trigger: 'blur' }"> <Select v-model="form.data.stan

参与评论您还未登录，请先登录后发表或查看评论

解决vue elementUI 切换语言表单验证提示不更新

weixin_43846401的博客

10-25

4831

项目需要国际化处理，发现一个问题：当切换语言时表单验证的提示信息没有同时更新过来看了一些解决方案，可以把rules放到computed里，但是这样切换语言会导致整个表单重新验证，而我只想把已经提示错误信息的几个表单项改变提示语言，解决方案：不使用message传入错误提示，手动传入验证规则 let validateCode = (rule, value, callback) => ...

vue3 表单数据发生改变时，切换路由给我提示

ZMJ_QQ的博客

03-14

666

1、当表单数据未发生改变时，save和discard按钮不可点击，路由切换时无提示（如下图所示）2、当表单数据发生改变时，save和discard按钮可点击，路由切换时出现提示（如下图所示）

使用elementUI的form表单校验时，错误提示位置异常解决方法

xuelong的博客

05-22

1722

最近在做项目时遇到一个问题，使用elementUI的Descriptions 描述列表与form表单校验时，遇到校验信息显示的位置不对，效果如图

element i18n 切换语言表单验证提示不更新

凡尘

10-18

952

element 切换语言表单验证提示不更新

Vue+Element-UI，表单校验多语言切换

StellaXiao98的博客

04-07

1962

技术栈：Vue、Element-UI、Vi18n 在做项目时，按照ElementUI官方demo写法，将validator的函数和rules写在了data里，然后发现当表单有错误提示信息时，切换语言而不清除错误提示（clearValidate），校验文字的语言并没有跟着改变，必须手动刷新才能实现想要的效果。如下图：解决方法：将rules写入计算属性 computed:{ rules(){ let checkName = (rule,value,callback)=&

HTML5 表单验证失败的提示语问题

12-13

前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆 js 来检查. 但是自从 H5 出现后, 很多常见的表达验证 , 它都已经帮我们实现了, 让我们减轻了很多负担, 就好像...

详解vue如何使用rules对表单字段进行校验

10-17

首先，需要了解的是，在Vue中通常会使用如VeeValidate或Vue-Form-Generator等第三方库来简化表单校验的过程，不过这里我们将介绍Vue原生的表单校验方法。在Vue中进行表单校验，需要在`<form>`元素中绑定一个rules...

在Vant的基础上实现添加表单验证框架的方法示例

12-01

在使用Vant作为移动端UI框架时，我们可能会遇到一个挑战：Vant并未内置表单验证功能。为了满足项目需求，我们需要自己实现一个表单验证框架。在这个过程中，我们需要解决几个关键问题，包括支持中文提示、适应Vant的...

vue+element UI的form表单规则校验国际化（多语言切换）

qq_38181746的博客

02-22

2270

element 表单规则校验国际化

【VUE的Form表单】使用v-if切换控件时，表单校验不生效

weixin_55846296的博客

09-29

3675

【VUE的Form表单】使用 v-if 或者 v-show 切换控件时，表单校验不生效

el-form表单验证触发过当前校验之后再切换到其他的校验会被上一个校验阻止

qq_40673807的博客

08-08

432

只要在有校验的el-form-item中添加一个key=“xx”就好了效果如下。

H5，form文本提示

weixin_44479107的博客

05-22

459

<input type="text" name="username" placeholder="小可爱" > <textarea rows="10" cols="30" placeholder="请简单介绍一下自己" ></textarea> placeholder ：在输入框还没有输入的时候，主动提示内容，当输入内容时，自动消失 ...

解决动态切换 el-form 表单中 el-form-item，导致rules校验下提示语位置错乱问题

Mr_Jule的博客

05-31

2558

解决动态切换 el-form 表单中 el-form-item，导致rules校验下提示语位置错乱问题

关于a-form-model-item的校验问题踩坑

最新发布

07-05

在 Vue 中使用 `el-form` 组件时，清除某个字段的提示语可以通过调用表单实例的 `clearValidate` 方法实现。该方法允许传入一个字段名组成的数组，从而仅清除指定字段的验证提示信息。 ### 示例代码 ```html <template> <el-form ref="form" :model="form" :rules="rules"> <el-form-item label="名称：" prop="name"> <el-input v-model="form.name"></el-input> </el-form-item> <el-button @click="clearNameMessage">清除名称提示</el-button> </el-form> </template> <script> export default { data() { return { form: { name: '' }, rules: { name: [ { required: true, message: '名称不能为空', trigger: 'blur' }, { min: 2, max: 6, message: '名称长度应在2到6个字符之间', trigger: 'blur' } ] } }; }, methods: { clearNameMessage() { this.$nextTick(() => { this.$refs.form.clearValidate(['name']); // 清除名称字段的提示信息[^1] }); } } }; </script> ``` 上述代码中定义了一个按钮，点击后会触发 `clearNameMessage` 方法，通过 `$refs` 获取 `el-form` 实例，并调用其 `clearValidate` 方法，传入需要清除的字段名数组 `['name']`，从而移除该字段的校验提示信息。 --- ### 注意事项 - 使用 `this.$nextTick()` 是为了确保 DOM 更新后再执行清除操作，以避免因 DOM 尚未更新导致无法正确清除提示信息。 - 如果表单字段是通过 `v-if` 动态渲染的，在切换字段显示状态时，可能也需要手动调用 `clearValidate` 来清除不再存在的字段的错误提示信息[^4]。 - 若需清除所有字段的提示信息，则可直接调用 `this.$refs.form.clearValidate()` 而不传递参数。 --- ### 相关问题 1. 如何在 Vue 中为动态生成的表单字段添加验证规则？ 2. Vue 表单中如何实现密码和确认密码一致性校验？ 3. 使用 ant-design-vue 时如何重置整个表单内容及验证状态？