解决element-ui form表单校验明明有值，校验的错误提醒还在

最新推荐文章于 2024-07-02 14:55:55 发布

sun0_cat

最新推荐文章于 2024-07-02 14:55:55 发布

阅读量8k

点赞数 2

分类专栏： element 文章标签： vue.js

本文链接：https://blog.csdn.net/sun0_cat/article/details/106619521

版权

element 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题：

我的form表单用的是最简单的非空校验，点击提交按钮，输入几个值，然后在点提交按钮，一部分的值还在显示错误校验

解决：

将rules里的校验顺序重新排列一下

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

sun0_cat

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

ElementUI el-form 表单规则验证输了值却依然提示报错

News777的博客

06-21

3495

element ui 解决 el-form 表单规则验证中明明在输入框或选择框输入值却依然提示报错

element ui表单必填_element-ui Form表单校验小结及踩坑

weixin_39602967的博客

12-29

1882

1、要验证输入只能为数字时、方法一如果使用type=“number”样式这边去掉type=number时自带的属性/*去除webkit中input的type="number"时出现的上下图标*/input::-webkit-outer-spin-button,input::-webkit-inner-spin-button {-webkit-appearance: none;}input[type...

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

【element-ui表单验证明明有值都是却一直提示不能为空——转载】

weixin_44958189的博客

10-31

1371

从上诉代码与下图中分析可以看见，prop与v-model的值不同，prop 是指我们要验证下面输入框里面最后输入进去的值是不是符合我们想要的规则所以这个prop 后面的等号不能直接自己随便定义名称。根据elementUI文档配置了表单验证，但是在页面输入了内容后表单验证依旧提示“请输入内容”，表单验证貌似未检测到我输入的值。// 设置一个动态title，为新增与编辑时变化。// 设置一个动态title，为新增与编辑时变化。// 默认为false，新增弹窗开关。// 默认为false，新增弹窗开关。

element表单校验有值但是一直出现提示解决

热门推荐

Fture_Bird的博客

01-16

2万+

关于elementui form表单的验证，明明填写了正确的值却显示验证还没通过可能存在的原因（个人看法，有不正确的请指出）： 1、首先需要保证表单上的 :model=" "和prop=" "绑定正确；下面是官网的例子： <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class=...

element表单填写了数据，验证的错误提示仍然不消失

weixin_42935964的博客

11-18

2604

先上代码 <template> <el-dialog id="palceOrderDialog" title="请选择套餐" :visible="palceOrderDialog" top="5vh" :show-close="false" center > <el-main> <el-row> <el-col :span="24"> &

Vue element-ui父组件控制子组件的表单校验操作

10-15

总的来说，Vue Element-UI的父组件控制子组件的表单校验操作主要是通过`ref`属性创建子组件引用，然后在父组件中调用子组件的校验方法来实现的。子组件则通过`el-form`和`el-form-item`的`prop`属性来设置验证规则，...

详解element-ui中表单验证的三种方式

10-16

在使用Element-UI开发时，表单验证是必不可少的功能之一，它可以帮助我们保证用户输入的数据是正确和有效的。本文将详细介绍Element-UI中表单验证的三种常用方式，并通过示例代码进行说明。首先，Element-UI提供的...

详解element-ui 表单校验 Rules 配置常用黑科技

10-15

在Element-UI中，表单校验是实现数据验证的关键部分，它可以帮助开发者确保用户输入的数据符合预期格式和要求。`Rules`配置是Element-UI表单组件`el-form`的核心功能之一，用于定义表单字段的验证规则，确保用户提交...

Vue ~ element-ui 动态表单验证，支持添加和删除操作

07-27

在Vue.js框架中，Element-UI是一个非常流行的UI组件库，它提供了丰富的界面元素和功能，使得开发者可以快速构建美观的后台管理系统。本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，...

uniapp u-form赋值后提示未通过校验

lyxkgc的博客

12-05

1364

加载页面后，给 form.impact 赋值，提交仍然提示未通过校验。解决： form.impact = “40” ，改为字符串类型。

关于element ui 中使用表单校验字段，校验一直不消失的问题

weixin_54938190的博客

02-17

3030

关于element ui 中使用表单校验字段，校验一直不消失的问题

Element form表单验证填完信息校验仍然存在的问题

weixin_49847397的博客

10-07

3102

el-date-picker v-model="formInline.applyDate" type="date" placeholder="选择日期" >今天在使用element表单验证的时候，在填入必填信息之后，必填提示仍然存在，然后通过搜索得到答案。原因：表单域的item项的prop值要与绑定的v-model值相同如下。以上为修改之后的效果。

antd +vue3 a-form表单验证（校验）规则填写数值后提示仍然存在的问题嵌套

lpfhjw的博客

10-24

4444

antd +vue3 a-form表单验证（校验）规则填写数值后提示仍然存在的问题嵌套 TS 表单验证失效

element-ui的表单校验过后，下拉框时间选择器等重新选择值后，检验为空提示语还在，不消失

m0_63237100的博客

05-07

473

针对element-ui的表单校验过后，下拉框时间选择器等重新选择值后，检验为空提示语还在，不消失的问题，如图。，可以给下拉框或者时间选择器等绑定change事件，然后再重新校验当前项。结果如下：有值后，提示语就消失了。

关于Elementui输入框有值，校验一直有提示问题

weixin_46156770的博客

01-28

2306

关于Elementui输入框有值，校验一直有提示问题 1、prop的值必须要和v-model的值一致 2、只要用到prop，validate这些校验，form必须有model这个属性官方文档也有介绍

关于Element ui加了验证后填了值验证不消失的问题

风华流沙君莫笑的博客

11-29

1394

由于不是专业的前端所以这两天在做前端开发的时候遇到了很多坑网上百度的答案也好多不管用还都是复制粘贴这里记录一下遇到的问题以免以后再受折磨之前的写法是这样我感觉没啥问题我以为就只加个:rules就好了结果因为我这个是form.name 还是识别不了好像最后去elementui看了一下结果还要写个:model 绑定一下form <el-form :rules="rules" label-position="right" size="small"> <.

vue中element-ui清除表单校验

05-24

在vue中使用element-ui进行表单校验时，可以通过调用`this.$refs.formName.resetFields()`来清除表单的校验状态。其中`formName`为表单的ref属性值。示例代码如下： ```html <template> <el-form :model="form" :rules="rules" ref="myForm" label-width="80px"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('myForm')">提交</el-button> <el-button @click="resetForm('myForm')">重置</el-button> </el-form-item> </el-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 20, message: '长度在 6 到 20 个字符', trigger: 'blur' } ] } } }, methods: { submitForm(formName) { this.$refs[formName].validate(valid => { if (valid) { console.log('表单校验通过') } else { console.log('表单校验失败') } }) }, resetForm(formName) { this.$refs[formName].resetFields() } } } </script> ``` 注意，在调用`resetFields()`之前，需要确保该表单已经被挂载到了DOM上。