vue使用Antd，FormModel，赋值没有重新验证

原创 已于 2022-05-11 14:00:12 修改 · 1.5k 阅读 · 1 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
收录于
随笔

当前文章被收录于：

随笔
5 篇文章 0 人学习
订阅专栏 查看详情
于 2021-09-01 16:46:40 首次发布
本文讲述了在Vue应用中使用Ant Design的FormModel组件时，遇到值被动态赋值后未触发验证的问题，通过调用validateField方法修复验证过程。

Antd，FormModel，赋值没有重新验证

vue使用Antd，FormModel，赋值没有重新验证

习惯了表单元素的值发生改变后，会自动触发表单的验证，但是今天，它不验证了！好家伙。
好家伙
这个输入框有些特殊，值不是输入进去的，是我用了v-model后，直接赋值给它，然后就没触发验证；就比较纳闷了，那就主动调一次验证呗，翻api发现validate（验证整个表单），validateField（验证部分字段），用validateField试了一下
在这里插入图片描述

this.$refs.pageData.validateField("xsjl");

解决

标签
#react.js
Vue表单验证无效，解决方法
api_git355的博客
09-13 1444
在本文中，我们介绍了一些常见的原因，导致Vue表单验证无效，并提供了相应的解决方法。通过检查表单绑定、使用合适的验证规则、使用自定义验证规则、显示错误消息以及执行手动验证，我们可以解决大多数Vue表单验证无效的问题。如果Vue的内置验证规则无法满足您的需求，您可以使用自定义验证规则来实现更复杂的验证逻辑。在Vue中，表单验证通常是通过v-model指令和表单输入字段进行绑定实现的。有时候，我们可能需要在特定的事件中手动触发表单验证，而不是依赖于默认的自动验证。如果验证通过，我们可以执行相应的提交操作。
Ant Design Vue表单校验失效问题
cnbyz的博客
11-24 4879
form表单添加校验失效
小程序form表单验证,validate 在更新数据以后不能验证？还是提示同样的错误
LlanyW的专栏
07-17 1203
花了2个小时，最后发布是模式models写错了。一直报手机号码必须填写，但是我已经填写了。
VUE表单编辑重新赋值之后校验不生效的问题
Lydia
09-19 791
【代码】VUE表单编辑重新赋值之后校验不生效的问题。
antd 表单校验问题
lfalt的博客
06-28 1136
情况 校验有时执行有时不执行，或者点击提交打印valid 没有执行。
Ant Design Vue(antd)中FormModel表单验证功能（坑与填坑）
风のように.的博客
08-24 6695
Ant Design Vue中的FormModel组件 可以再官方文档里面找到表单验证的使用方法 下面是我的具体的代码（会导致错误的代码）： html代码 <a-form-model-item label="Group" prop="group"> <a-select v-model="basicForm.selectedgroup" placeholder="please select the group"> 我的表单数据和自定义的校验规则： basicForm
讲一讲Vue+Ant Design表单验证
qq_41394352的博客
05-09 3967
文章转发自：讲一讲Vue+Ant Design表单验证_mb5fd86dae5fbf6的博客的技术博客_51CTO博客 与Vue搭配的后台管理UI框架，最火的莫过于饿了吗的element-ui和阿里的Ant Design，这两个框架都在实际项目上使用过，也都是各有各的优点 最先接触的还是element - ui，后来项目调整，才接触到Ant Design，Form表单这块不支持双向绑定式的校验功能，在1.5.0+版本增加了FormModel表单才支持。今天就讲讲这两个在项目上使用的区别 1、Form
antd-vue-formModel如何写多层循环数据，如何自定义校验规则
y_yinkedada的博客
10-26 5702
一般的数据提交处理我们会用form组件，但是碰上数据复杂的，建议用formModel。更方便自己定义一些规则以及一些复杂的处理，本文以formModel为例来写多层循环校验（form也是一样用法，细节不同处参照官网）。 其实官网里面也有多层循环数据以及如何校验多层循环的表单实例（其实参照官网写就可以了，这里只是多了些注释）。 参照动态增减表单： 先来说多层循环数据。要实现以下功能：（点击添加条款、递增率、优惠、其它条款，上面对应的条款就要增加一条，并进行相应的必填校验，开始时间小于结束时间校验，月份不能大
Vue antd formModal 表单循环渲染 && React antd form 表单循环渲染
天生欧皇张狗蛋
09-01 3044
vue antd formModal 表单循环渲染 && react antd form 表单循环渲染 vue antd formModal 官方文档地址: https://www.antdv.com/components/form-model-cn/ <a-form-model :hideRequiredMark="true" :model="serviceForm" ref="servi
ant-design-vue 表单验证和 validator 自定义表单验证
热门推荐
qq_36437172的博客
02-09 3万+
在ant-design-vue中，提供FormModel表单组件，且支持v-model数据绑定，同时可以校验和提交功能的表单。 一、表单验证 <a-form-model ref="form" :rules="rules" :model="form" layout="inline" :label-col="{span: 10}" :wrapper-col="{span: 14}" > <a-form-model-item label="密...
JeecgBoot的前端Form升级为FormModel用法(支持 v-model 绑定)
JEECG官方博客
03-03 2977
FormModel 表单 (支持 v-model 绑定)(Ant Design of Vue 版本：1.5.0+) 新版form特性 1、支持双向绑定 2、无需v-decorator这个反人类属性设置 3、form用法跟目前主流框架(element ui iview风格形成统一,不在另类) 4、表单赋值无需手动设置，双向绑定自动赋值 新老form用法对比 标签规则升级 校验规则区别 表单赋值区别 表单提交区别 角色管理老版form代码 ~~~ <template> <a-
vue antd FormModel 表单自定义布局demo
weixin_50692948的博客
07-11 382
vue antd FormModel 表单自定义布局demo
Ant Design Vue 2.2.8 表格表单验证
Wannaer的博客
11-08 3815
刚刚接触 Ant Design Vue 2.2.8 有一个简单的需求需要实现表格的表单验证功能。但在官网demo和API中找了很久都没有发现实现功能的方法，网上能找到的实现案例大部分是基于 Ant Design Vue 1.1.5 的版本 使用 FormModel 表单。但 2.2.8 FormModal 移除了。以上就是记录碰见的问题内容，本文仅仅简单实现表格验证问题， 如果有不足希望能够评论指导一下。
ant-design-vue a-form 无法校验自定义组件
jiaweiliao的博客
02-18 1479
## 问题背景 项目中有一个需求，利用form表单校验表单内部值是否合法，当时需要校验一个自定义upload组件上传文件，按照官方文档的方式绑定对应的变量，校验官方input、select等组件都是能够成功的，但是校验自定义的upload组件却始终无法生效。当时使用版本为 "ant-design-vue": "^3.0.0-beta.7"。form表单无法主动校验自定义组件，需要由组件内部通知外部form表单进行校验。
vue表单校验一直不通过
weixin_44293690的博客
05-16 2871
el-form 的model属性和ref属性的值不要求一定相同，它们可以不一样，但是model属性的值一定是一个对象，且el-form-item中的el-input的v-model的值需要是el-form 的model值对象的。比如下面代码：el-form的model值为data中的一个名为activityForm的对象，el-input的v-model值为activityForm对象里面的直接属性的值，el-form的ref值是字符串ruleForm。
form表单校验可能出现的问题及解决方案
C422805的博客
08-11 3248
基于elementUi的el-form的校验表单校验目的: 在防止用户犯错的前提下,尽可能让用户更早地发现并纠正问题.以上几种情况是目前项目中可能遇到的情况最多的.针对以上问题一一给出解决方案。
三分钟细数 el-form 表单校验的坑点，前车之鉴，可助你避坑
本博客纯属个人网络笔记，如对阁下有用，甚喜；否则，关掉即可，不喜勿喷。专心写代码，不做键盘侠！
10-12 1万+
Vue 的 el-form 提供了表单校验功能，通过 :rules 属性设置校验规则，并通过 el-form-item 的 prop 属性绑定校验规则。通过封装，让前端校验更方便。具体使用过程中，有几个容易出错的地方，本文来整理一下。每一个坑都是笔者亲自趟过的，写完本文后，以后应该不会再踏入相同的坑。...
vue2+ant-design-vue a-form-model组件二次封装（form表单组件）FormModel 表单
wocwin的博客
11-01 2527
vue2+ant-design-vue a-form-model组件二次封装（form表单组件）FormModel 表单
antd vue表单验证_解决antd Form 表单校验方法无响应的问题
weixin_33267354的博客
01-12 6972
antd 的 表单校验方法包括 validateFields 和 validateFieldsAndScroll里面可以接收校验字段数组, options, 和一个回调函数from.validateFields([name, age], {}, (err, val)=> {})校验全部表单数据from.validateFields((err, val)=> {}) // 无响应发现无响...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值