uni-app开发——使用uni-forms在input表单校验遇到复杂自定义操作时，第一次无法响应校验的坑

最新推荐文章于 2025-10-22 16:37:39 发布

原创最新推荐文章于 2025-10-22 16:37:39 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #uni-forms

uni-app 同时被 2 个专栏收录

20 篇文章

订阅专栏

ThorUI

3 篇文章

订阅专栏

在uni-app中使用uni-forms进行表单验证时，遇到首次点击提交不触发校验的异常。问题在于自定义表单事件在第一次触发时，字段`this.formData[item.prop]`为undefined。解决方案是初始化formData时，确保所有字段已定义。

表单选的时提交时做校验，

validate-trigger="submit"

自定义了表单事件，第一次点击提交无法触发校验，再选择操作，才没问题

<uni-forms-item class="side-padding" :name="item.prop" :required="item.required||false" :label="item.label" v-else-if="item.type==='actionsheet'&&item.hidden!==false">
				<input :disabled="formData.disabled || false" type="text" v-model="formData[item.prop]" class="uni-input-border" placeholder-style="font-size: 32rpx;color:#CCCCCC;text-align: right;" @focus="getsyscode(item)" @blur="binddata(item.prop, $event.detail.value)" :placeholder="item.placeholder||'请选择'" />
				<tui-actionsheet  
				  :show="item.showActionSheet || false" 
				  :item-list=" item.itemList||'' " 
				  @click="itemClick($event,item)" 
				  @cancel="()=>{item.showActionSheet=false}">
				</tui-actionsheet>
</uni-forms-item>

问题处理过程中，发现第一次点击选择后调用

this.$refs.form.setValue(this.formData[item.prop],item.itemList[i].text)

时，this.formData[item.prop],即该字段undefine,不存在，原来就是未定义，只需要在开始定义formData时，把字段初始化定义一遍即可。