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

最新推荐文章于 2024-05-29 15:42:29 发布
最新推荐文章于 2024-05-29 15:42:29 发布
阅读量7.4k 收藏 10
点赞数 3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/neverlandkk/article/details/115241056
版权

掉坑日记02：vue form表单验证出现选择了值，但是还是提示未选择时的问题

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

师傅我悟了
关注
  • 3
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
解决vue+ element ui 表单验证有值但验证失败问题
01-19
一.如图：有值但是验证失败 二. <el model=form rules=rules> <el label=数据模板 prop=template> <el span=20> <el type=textarea v-model=form.template rows=8 placeholder=请输入数据模板 readonly=true></el> </el> </el> </el> export default { data()
element 结合vue 在表单验证时有值却提示错误的解决办法
08-28
主要介绍了element 结合vue 在表单验证下，有值却提示错误的解决办法,需要的朋友可以参考下
vue+antd表单已输入内容但校验一直不消失问题总结
under taker
05-29 654
值得注意的是，如果你的表单是在弹框里，在弹框打开的方法中是否对form进行了重新赋值，如果用等于号赋值可能会导致form缺少字段，正确做法是用对象合并的方法。使用antd表单校验规则经常出现已经填写内容了但校验提示一直存在的情况，以下是我遇到并问题总结的解决方法，希望能帮到你们。5、在表单校验规则中，输入框、文本框的触发方式最好使用blur，日期选择器、普通选择器使用change。4、确认form绑定的model是否已初始化各个字段（最常见但容易忽略的情况）3、确认form绑定的model。
表单校验：下拉框的非空校验，有值但一直提示非空错误
weixin_43773218的博客
05-17 5475
错误：初次编辑表单时提示了非空，但下拉框选择了值后，这个非空错误一直还在，如下图所示： 一、先排除一些基本的问题 1.是否有ref 2.是否有rules属性且在data中定义了规则 3.props定制的字段名是否和rules里一样 4.输入框或者选择框的v-model绑定的是否和a-form.model的model是否一致 附加提示一下 required 是否必填 trigger 触发条件 （blur 是失去焦点触发 change 是数据改变触发...
解决vue页面表单校验不生效，一直不消失的问题
qq_51472580的博客
01-18 1169
今天写个Vue页面，这个校验真的是绝了，两个下拉选择的输入框，一样的写法，一个选择后校验提醒会消失，另一个一直不消失，我用表单校验方法在属性更新后单独校验，这个提示还是不消失，然后我把他俩的位置换了一下，发现就那个位置的表单项校验有问题，真的是离谱。后来看文档，翻百度，发现这是vue为了提高性能去复用相同组件导致的，所以需要给每个表单项一个唯一标识的key,让vue对它们单独操作，如下图所示。这样就完美解决了，救命，被这个校验折磨了俩小时！
vue form表单验证出现选择了值，但是还是提示未选择时的问题
weixin_43431702的博客
06-10 8385
如上问题是因为你的form表单绑定的form未定义改属性 但是你在data里面未定义改roleId,注释了就会报上述错误，打开就没事了
vue form表单验证
qq_28586135的博客
07-21 2832
vue form表单验证 非必填不能为空，并且需要正则验证 必填，正则验证，不能只输入空格验证 必填，正则验证，不能输入空格(v-model.trim) 选了多选框后必填
vue-element Form表单验证踩坑（表单验证明明有值，却提示错误）
qq_37213573的博客
09-21 6622
错误提示： 代码： 经过一番捣鼓，终于解决了这个问题，渣渣的我还不知道是什么原因
vue+element-ui form表单Select框已绑定值，但是表单认证不通过,一直提示请选择。
xuqingbaobao的博客
11-08 1798
需求：根据省id获取市，再根据市id获取区县。 原因：由于form表单认证对象的字段为动态添加的属性。所以初始化时动态添加的属性未加入认证。 解决方法：在声明form认证的时候必须要把动态属性，在页面打开的时候绑定到对象中，如下在Object.assign中添加对应的属性 比如： 1: openeDialog(){ this.formData = Object.a...
vue form表单验证清除
Lyouths的移动笔记本
07-28 4015
vue from 表单验证清除
vue-form表单验证是否为空值的实例详解
10-16
总结一下，这个 Vue-form 表单验证实例展示了如何利用 Vue 的响应式系统和事件处理来实现表单验证。通过绑定数据、监听表单事件以及编写验证逻辑，我们可以创建出一个能够有效处理用户输入并提供反馈的交互式表单。...
Vue ElementUI之Form表单验证遇到的问题
12-09
本文将详细解析在使用ElementUI的Form表单验证时可能遇到的问题及解决方案。 首先，我们遇到的第一个问题是如何在表单中验证数组类型的输入。通常，ElementUI的`el-form`组件要求绑定的`model`是一个对象，但有时...
解决Vue+Element-UI 进行From表单校验时出现了英文提示问题
cdtaogang's blog
08-08 2178
规则时就会需要表单输入框输入数据删除为空时，出现英文校验提示信息。将required属性放在el-input元素上即可，问题解决。表单时，往往会对表单字段进行校验，字段为必填项时会添加。
vue的form表单验证
weixin_44706621的博客
06-22 1290
vue中form表单验证
2024浙江省行政区划矢量图层-省市县乡镇四级行政区划数据下载-带python代码
最新发布
08-02
2024最新浙江省行政区划矢量图层数据，包含省、市、县、乡镇四级行政区划数据下载，附带shp转geojson的python代码
年度销售计划表.xlsx.xlsx
08-01
销售统计，调查问卷，库存明细，跟进表，业绩统计表，差异分析 ，产品清单 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
蓝牙BLE 4.0开发课程
08-01
蓝牙BLE 4.0课程
每日销售情况统计表.xls
08-01
销售统计，调查问卷，库存明细，跟进表，业绩统计表，差异分析 ，产品清单 适用人群：学习不同技术领域的小白或进阶学习者；可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
vue form表单验证器代码
05-26
你可以使用 Vue.js 提供的内置表单验证器，或者使用第三方库来实现表单验证。以下是一个使用 Vue.js 内置表单验证器的示例代码： ``` <template> <form @submit.prevent="submitForm"> <label>Name:</label> <input type="text" v-model="name" required> <span v-if="!$v.name.required">Name is required</span> <label>Email:</label> <input type="email" v-model="email" required> <span v-if="!$v.email.required">Email is required</span> <span v-if="!$v.email.email">Invalid email</span> <label>Password:</label> <input type="password" v-model="password" required> <span v-if="!$v.password.required">Password is required</span> <span v-if="!$v.password.minLength">Password must be at least 8 characters</span> <button type="submit">Submit</button> </form> </template> <script> import { required, email, minLength } from 'vuelidate/lib/validators'; export default { data() { return { name: '', email: '', password: '' }; }, validations: { name: { required }, email: { required, email }, password: { required, minLength: minLength(8) } }, methods: { submitForm() { // Handle form submission } } }; </script> ``` 在这个示例中，我们使用了 `vuelidate` 库来定义验证规则，并在模板中使用 `$v` 对象来访问验证结果。当用户提交表单时，我们可以在 `submitForm` 方法中处理表单数据。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值