Ant Design of Vue表单元素因为v-if换切导致rules校验失败

最新推荐文章于 2024-08-24 09:07:37 发布
最新推荐文章于 2024-08-24 09:07:37 发布
阅读量871 收藏 1
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_51972964/article/details/115494444
版权
本文介绍了在Vue中如何使用`a-form-model-item`组件并绑定`key`属性来确保视图更新。通过设置`key`为`switchVif`并在`data`中定义相应属性，实现了输入框与数据模型的双向绑定，确保了用户交互时界面的正确响应。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

解决方法:
在item标签绑定key

<a-form-model-item  key="switchVif" prop="switchVif">
<input v-model="switchVif" />
</a-form-model-item>

在data中定义

data(){
	return{
		switchVif:""
	}
}
Vue中使用ElementUI的Form组件时使用 v-if 切换时导致表单自动校验问题
鸭绒的博客
04-10 3388
说明：利用ElementUI的Form表单组件实现登录、注册功能，当chooseItem == 0时是登录模块，否则是注册模块，同时也给表单项添加了校验规则。 示例代码： <template> <el-form v-if="chooseItem == 0" :model="loginForm" :rules="loginRules" ref="loginForm" siz
ant-design-vue表单自定义校验规则以及提交前验证，防止校验未通过发送请求/含a-form-modal-item嵌套校验（详细）
热门推荐
weixin_43242112的博客
06-17 2万+
ant-design-vueForm表单自定义校验规则一、自定义校验规则一、页面代码：二、表单绑定数据以及校验规则二、提交前验证，防止校验未通过发送请求 一、自定义校验规则 本处以校验手机号为例。 一、页面代码： <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 4 }" :wrapperCol= "{ span: 4 }"> <a-form-model-ite
ant-design-vue的a-form-model表单，a-form-model-item项用v-if切换时，校验不生效问题
weixin_40992252的博客
11-09 1239
原始代码确认校验代码。
vue 表单在用到 v-if，表单校验不生效
宁夏前端工程师，马卫斌，wx：1457508895
03-24 1334
而v-if用来切换的元素是会被销毁的，导致了v-if内的表单项，由于在mounted时期没有进行渲染，所以规则也没有绑定上，因此初始化时不符合显示条件的不会生成规则，导致后面切换条件，显示的输入框的校验不会生效。因为在v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况（同理，所以 v-for 渲染的标签也要加key来区分）。最近在用 element中 的 form 表单校验的时候，因为有些字段是根据特殊条件来设置显示隐藏的，所以用了 v-if 控制显示；
Vue+Element中v-if 表单验证时出现的问题
jslong66的博客
02-07 1943
问题描述： 使用 Vue + Element 中的 el-form-item 做表单切换时， 用 v-if 处理显示或隐藏 ，同一字段校验文本提示错位，校验规则也失效 如图所示： 错乱样式 原因分析： v-if在操作dom时，在根节点上进行的删减 导致rules 判断的时候 无法取到 v-if 添加进来的prop值 解决方案： 1：在 el-form-item 中添加一个属性 key key值要唯一 <el-form-item label="借款金额" prop="applyMoney" :k
【VUE的Form表单】使用v-if切换控件时，表单校验不生效
weixin_55846296的博客
09-29 3567
【VUE的Form表单】使用 v-if 或者 v-show 切换控件时，表单校验不生效
Ant-Design-Vue快速上手指南+排坑
破损的天堂鸟博客
08-24 1914
Ant-Design-Vue 是 Ant Design 的 Vue 实现，提供了一套高质量的 UI 组件库，适用于各种类型的 Web 应用开发。
ant-design-vue 自定义数据校验注意事项
csdnlaiyanqi的博客
06-05 1569
在前台进行数据校验时，除了必需的校验的外，有时还需要自己定义长度，数字，手机号，email等的校验。此时可以通过自定义的校验规则来实现。通常使用以下方式：
ant-design-vue form表单实现动态增减表单项
weixin_41258179的博客
12-10 4216
在项目中遇到了需要对表单的最后两项进行动态增减 ，我这里实现以后做个记录。 <a-form-model ref="ruleForm" :model="form" :rules="rules" > //不需要增减的表单项 //设置display:flex属性 可让表单显示在一行 <div style="display:flex"> // prop 表单域的model字段 <a-form-model-item label=
Vue+Element中的 el-form-item 进行表单验证时 使用 v-if 出现的问题
qq_37330613的博客
09-11 4929
问题描述 使用 Vue + Element 中的 el-form-item 时 用 v-if 处理显示或隐藏 校验规则失效 原因 v-if在操作dom时 在根节点上进行的删减 导致 rules 判断的时候 无法取到 v-if 添加进来的prop值 解决 在 el-form-item 中添加一个属性 key key值只需要是独一无二即可 ...
element-ui表单使用v-if进行触发后，表单校验错乱的问题
Heartnottowake的博客
04-28 1034
表单有多个元素需要校验，但是其中某些元素是根据另一个元素的值去用v-if控制显示与隐藏,切换值得时候，就会出现校验错乱。解决方法: 给表单的el-form-item去绑定一个key,这样每次刷新验证，就会找对应的key去校验，这是唯一的。
Vue中使用 v-for和v-if被语法检测到错误信息时（You should not mix ‘v-for‘ with ‘v-if‘）
qq_46016217的博客
01-12 1486
Vue中使用v-for和v-if同时使用被语法检测到错误信息时（You should not mix ‘v-for’ with ‘v-if’） v-for和v-if一起使用时会报错 提示错误：The ‘undefined’ variable inside ‘v-for’ directive should be replaced with a computed property that returns filtered array instead. You should not mix ‘v-for’ wi
表单校验bug
cw_csdn的博客
06-01 255
表单校验失效，由v-if导致
解决vue两个表单切换时,校验规则失效问题
weixin_44111864的博客
07-01 3397
问题:两个表单切换,分别使用不同校验规则,校验规则失效 解决思路:1.切换时使用resetField对该表单项进行重置，将其值重置为初始值并移除校验结果 问题本质:即使两个表单绑定的值不同，但是浏览器在解析时，先解析第一个表单，此时表单上是没有绑定ref，之后再解析第二个表单时，浏览器发现这它的prop和第一个表单的prop一样，所以就认为这两个表单是同一个表单，就没有重新渲染，而ref本身是作为渲染结果被创建的，所以第二个表单没能成功绑定ref，验证就无法生效。 loginTypeFlag() {
vue中使用v-if出现的值回显不了的问题
xueyu012的博客
04-02 3450
vue中使用v-if出现的值回显不了的问题 这样会有其中某一个值回显不了 的问题， 去掉v-if可以正常回显 加上之后会莫名不回显 解决方法：外边包个div就可以了 如果还解决不了 div别再太外围 包住不能回显的那个值 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解...
ant design vue 中v-if无效
wanghuan1020的博客
08-03 3074
ant design vue 中v-if无效问题：在组件内部使用 v-if 动态渲染一张图片，但渲染出来的一直是 v-else 的内容结论：Grid布局组件上（即：a-row, a-col）中使用 v-for、v-if 需谨慎 问题：在组件内部使用 v-if 动态渲染一张图片，但渲染出来的一直是 v-else 的内容 验证 v-if 后的变量是否为 true，{{ item.img_url ? 1 : 2 }} 语法完全正常 <div>{{ item.img_url ? 1 : 2 }} &
VUE + ant-design组合组件校验失败
weixin_45662786的博客
12-08 239
【代码】VUE + ant-design组合组件校验失败。
v-if 导致 elementui 表单校验失效问题解决
jiangjunyuan168的博客
01-25 1830
在使用 elementui 表单的过程中，某些表单项需要通过 v-if 来判断是否展示，但是这些表单项出现了检验失效的问题。 1、给需要 v-if 判断的表单项添加 key 值 2、将校验规则直接绑定在 el-form-item 上 3、v-show 代替 v-if 这种方法存在一个问题，就是如果 v-if 判断的表单项中如果存在相同字段的项就会导致重复校验的问题，所以这种方法需要在判断的表单项字段都不相同的情况下使用。
Ant 条件判断 if
tianlihu的专栏
08-19 875
转载自[url=http://www.blogjava.net/fingki/archive/2008/05/21/201919.html]ant 条件判断 condition [/url] 最近收到一个ticket，用ant写个build.xml，用到condition，作笔记如下： basic elements: istrue isfalse not and or xor avai...
ant-design-vue表单校验
最新发布
03-28
### Ant Design Vue 表单校验规则及示例 #### 使用 `Form` 组件进行表单校验 Ant Design Vue 的 `a-form-model` 是用于构建复杂交互逻辑的组件之一，支持内置验证功能。通过设置 `rules` 属性来定义字段的校验规则[^2]。 以下是实现表单校验的一个完整示例： ```vue <template> <a-form :model="form" :rules="rules" @submit="handleSubmit"> <!-- 用户名输入框 --> <a-form-item label="用户名" prop="username"> <a-input v-model="form.username" /> </a-form-item> <!-- 密码输入框 --> <a-form-item label="密码" prop="password"> <a-input type="password" v-model="form.password" /> </a-form-item> <!-- 提交按钮 --> <a-button type="primary" html-type="submit">提交</a-button> </a-form> </template> <script> export default { data() { return { form: { username: '', password: '' }, rules: { username: [ { required: true, message: '请输入用户名', trigger: 'blur' } // 验证必填项 ], password: [ { required: true, message: '请输入密码', trigger: 'change' }, // 验证必填项 { min: 6, max: 18, message: '长度应在 6 到 18 之间', trigger: 'change' } // 长度范围验证 ] } }; }, methods: { handleSubmit(e) { e.preventDefault(); this.$refs.form.validate(valid => { if (valid) { alert('提交成功'); } else { console.log('表单校验失败'); } }); } } }; </script> ``` 上述代码展示了如何创建一个简单的登录表单并应用基本的校验规则。其中： - `required: true` 定义该字段为必填项。 - `min` 和 `max` 设置字符串长度限制。 - `trigger` 控制触发校验的时间点（如 `blur` 或 `change`）。 #### 常见校验规则说明 | 参数 | 类型 | 描述 | |------|------|------| | `required` | Boolean | 是否必填 | | `message` | String | 校验不通过时显示的消息 | | `min/max` | Number | 字符串最小/最大长度 | | `pattern` | RegExp | 自定义正则表达式匹配 | 例如，如果需要对邮箱地址进行校验，则可以添加如下规则： ```javascript email: [ { required: true, message: '请输入邮箱地址', trigger: 'blur' }, { type: 'email', message: '请输入有效的邮箱地址', trigger: ['blur', 'change'] } ] ``` ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值