切换el-from表单不触发验证

i'm_zhangting

于 2021-11-16 09:58:31 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： VUE 文章标签：前端 javascript 开发语言

本文链接：https://blog.youkuaiyun.com/weixin_42549581/article/details/121349365

VUE 专栏收录该内容

8 篇文章

订阅专栏

在Vue开发中遇到一个问题，当通过v-if切换表单字段时，一个字段从非必填变为必填，但验证仍会错误地通过空值。具体表现为，当报表方式切换至重点交办状态，交办人职务的必填输入框为空时，表单验证仍然通过。这个问题涉及到Vue的动态组件和表单验证逻辑的交互，需要深入理解Vue的生命周期和表单验证规则来解决。

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

开发时遇到一个问题，复用element表单，通过v-if控制显示的表单项，一个状态是非必填输入框，另一个是必填输入框。从非必填的表单项切换为必填表单项后，去验证表单会出现验证通过的情况，但是必填项其实为空。
在这里插入图片描述

<!-- 电话上报 && 其他-->
<template v-if="formData.reportingMethod === 1 || formData.reportingMethod === 4">            
	<el-form-item label="报案者手机" key="reportingMobile">
		<el-input v-model.trim="formData.reportingMobile" placeholder="记录报案者的手机号码">
		</el-input>
	</el-form-item>
</template>
<!-- 重点交办 -->
<template v-if="formData.reportingMethod === 2">  
	<el-form-item label="交办人职务" prop="assignUserTitle" key="assignUserTitle">
  		<el-input v-model="formData.assignUserTitle" placeholder="记录交办人职务">
  		</el-input>
	</el-form-item>
</template>

在这里插入图片描述