vue—必填项已填后仍提示未填写

最新推荐文章于 2024-01-10 22:05:49 发布

qq_28218401

最新推荐文章于 2024-01-10 22:05:49 发布

阅读量2.7k

点赞数 1

分类专栏： vue 文章标签： vue.js elementui 前端

本文链接：https://blog.youkuaiyun.com/qq_28218401/article/details/125553101

版权

vue 专栏收录该内容

1 篇文章

订阅专栏

1、不存在嵌套的场景

（1）中的model与v-model绑定的是否一致

（2）v-model绑定的值与prop的值是否一致

（3）是否定义rules

2、一层嵌套（如下图configInfo）：需要在:prop的时候进行处理，不然会无法指定绑定的值

3、两层嵌套：如fieldMapping_list

1、不存在嵌套的场景

（1）<el-form>中的model与v-model绑定的是否一致

（2）v-model绑定的值与prop的值是否一致

（3）是否定义rules

2、一层嵌套（如下图configInfo）：需要在:prop的时候进行处理，不然会无法指定绑定的值

3、两层嵌套：如fieldMapping_list

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

qq_28218401

关注关注

1
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

【Vue3.0实战逐步深入系列】为问卷主题添加必填项配置及数据有效性校验功能

lixiaosenlin的专栏

11-27

2444

前言小伙伴们大家好。今天将带着大家继续来完善我们的问卷调查功能。到目前为止我们的问卷调查功能已经实现了问卷主题配置、问卷结果提交，问卷结果保存及回填，问卷结果展示等基本功能。看上去貌似一个问卷调查功能已经实现了，然而还有一个比较重要的功能没有实现，那就是数据有效性校验功能，想想如果没有数据有效性的校验，打开一个问卷什么都不填就直接提交，那就失去了问卷调查的意义了。因此本文将在前面分享的基础上增加数据有效性校验功能。需求描述 ...

表单校验自动定位到必填项

南乡人的博客

11-09

2235

场景描述一般在长表单中，有些必填项很难发现，因此需要自动定位到相应位置，方便用户找到填写。解决思路先通过基础UI库校验必填项时的样式变化来选中相应的元素，再通过Input,textarea自带的focus方法，实现定位具体代码 let isError = document.getElementsByClassName('is-error') // 适用于element isError[0].querySelector('input').focus() // 只定位到第一个必填项

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

el-form必填校验明明填了还报未填的原因

生而为人我很抱歉

11-03

2150

【代码】el-form必填校验明明填了还报未填的原因。

【前端】vue表单验证input内明明有值却提示错误

开染坊的白猫

07-31

3573

vue: rules:{ appId:[{required: true, message:'请输入appId', trigger: blur}] } // 前端 <el-form-item label="业务系统编号" prop="appId"> <el-input v-model="messageLimitForm.appId" placehold...

Vue在写表单validatorRules验证的时候出现，*必填中输入数据仍然有提示填写信息，验证rules无效

qq_41113780的博客

07-22

2071

vue

vue有关elementui form表单rules验证问题，有值却仍然显示不通过

热门推荐

ic_xcc的博客

07-15

2万+

帮同事解决一个vue表单验证的问题，利用了rules，但是填完内容还是一直提示不能为空的错误，情况如下图所示： 1、检查:rules ref，例如本黎:rules="rules" ref="reluForm"是否与data中定义的一致 2、检查prop值与绑定的属性一致，例如本例中prop="title"中title与data中rules规则绑定的属性一一对应 3、检测表单是否一致，例如本例中:model="addForm"与data中定义的表单名是否一致以上都检查过没有问题 <el

vue form表单验证出现选择输入了值，但是还是提示未选择时的问题

neverlandkk的博客

03-26

8074

掉坑日记02：vue form表单验证出现选择了值，但是还是提示未选择时的问题在表单验证是，发现选择或者输入了值，但是rules验证还在显示未输入值警告的message。大概率是你没定义modal值，这个时候rules 监测不到你是否输入了值确定的点 1.是否有ref 2.是否有rules属性且在data中定义了规则 3.props定制的字段名是否和rules里一样 4.输入框或者选择框的v-modal绑定的是否和a-form-model的modal是否一致 ...

element 结合vue 在表单验证时有值却提示错误的解决办法

08-28

Element 结合 Vue 在表单验证时有值却提示错误的解决办法 Element 是一个功能强大的前端 UI 框架，结合 Vue.js 可以快速开发复杂的 Web 应用程序。然而，在使用 Element 结合 Vue 进行表单验证时，有时可能会遇到...

vue中表单提交有必填项未填写自动跳转到第一个地方

09-04

综上所述，通过给必填项设置标识符、使用`$refs`获取并定位焦点、阻止默认提交行为和添加必填项提示信息，可以实现在Vue中表单提交时自动跳转到第一个未填写的必填项处。这样可以提升用户的操作体验，避免填写遗漏，...

uniapp触发必填项校验填写内容后必填项校验没有消失

最新发布

10-25

在UniApp中，如果你想要实现表单的必填项验证，通常会在数据绑定的元素上设置`v-model`属性，并利用Vue的内置指令如`:required`来标记哪些字段是必填的。当你在输入框中填写了内容并提交时，如果没有满足必填条件，...

【bug-el+vue】表单规则验证：必输入值输入后仍然报红

m0_74574927的博客

01-10

790

1.<el-form>内用 :model=""

表单校验：下拉框的非空校验，有值但一直提示非空错误

weixin_43773218的博客

05-17

6191

错误：初次编辑表单时提示了非空，但下拉框选择了值后，这个非空错误一直还在，如下图所示：一、先排除一些基本的问题 1.是否有ref 2.是否有rules属性且在data中定义了规则 3.props定制的字段名是否和rules里一样 4.输入框或者选择框的v-model绑定的是否和a-form.model的model是否一致附加提示一下 required 是否必填 trigger 触发条件（blur 是失去焦点触发 change 是数据改变触发...

关于前端Vue中表单验证符合条件仍提醒的问题

一枚正在学习的渣渣

04-26

278

图一Script中的验证对象的名称要跟图二里绑定的model的属性名称相同，不只是跟prop的名称相同。

element-ui vue form的rules修改后红色提示信息还在

aoeace

05-11

3695

<el-form ref="addForm" :model="addData" :rules="add?rules:rules2" size="mini" label-width="100px"> js： this.add=true //dom更新后再执行 this.$nextTick(() => { let af = this.$refs['addForm'] if(af){ af.clearValidate() } }) ...

vue 表格嵌套表单验证，填写了其中一个后另一个提示为必填项，俩个不填为非必填，

m0_49471668的博客

05-31

1335

<el-col :span="6"> <el-form-item label="证书名称:" prop="fileName" :rules="RecordOperation.upload[i].classHour?[{required: true, message: '请输入证书名称', trigger: 'blur'}]:[{required:false}]"> <el-input .

VUE3- ant design自动校验，明明输入框都输入内容了，还是显示提醒

m0_59214979的博客

10-10

3701

本节：ant design自动校验，明明输入框都输入内容了，还是显示提醒。

关于element-ui form表单必填项已经选入值并回填了，但是还会报错必填提示

m0_59157023的博客

06-20

3800

今天用el-form表单的时候发现明明已经选入值并回填了发现还是会触发必填报错。因为我这里是点击后右边是一个select选项帮助。这里代表的是只有blur的时候才触发rule规则。经过发现，是因为rule表单触发校验规则。但是我选择应该是change事件。

vue+element ui表单提交校验问题

qq_40283211的博客

09-11

1813

3、rules中的校验规则需要注意，例如：如果是对input输入框设置校验，触发条件应设置为"blur"；如果对select下拉框设置校验，触发条件应设置为"change"。1、el-form-item中的prop字段需要和v-model中绑定的字段值一致，且还需要和rules中设置的校验值一致；4、rules中的校验字段未在data中声明，如果字段未申明，那么就无法实现数据双向绑定的效果。2、el-form中需要用model绑定，并且绑定的字段名称需要和后面一致；这样的话就可以解决校验不起作用的问题啦！

解决vue中v-if绑定data里的数据提示未定义的问题！！

Yfw的博客

07-15

1万+

是不是有遇到自己v-if绑定的参数明明在data里，但是就是提示错误：错误的大概意思是： Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property。通过初始化该属性，确保该属性是生效的，无论是在...