项目场景:

1、uniapp 微信小程序使用了uView UI,表单字段有验证;

2、表单添加功能,数据校验正常,因为表单数据本身都是空的;

3、表单更新数据的时候,有些字段明明是有数据的,提交的时候非空验证提示不能为空;


问题描述

表单更新,此时表单是有数据的,未再次改变表单校验的选择器的值,点击提交表单,校验提醒未选择
在这里插入图片描述


原因分析:

官方文档说明的注意事项:

1、rules中的属性名和form的属性名是一致的,同时传递给u-form-item的prop参数绑定的也是相同的属性名,注意这里prop参数绑定的是字符串(属性名),而不是一个变量。

2、使用校验

// 必须要在onReady生命周期,因为onLoad生命周期组件可能尚未创建完毕
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	}

PS:我遇到的问题,上面的注意事项都没有问题,但是表单更新的时候,字段(数值类型)明明有值就是提示不能为空。


解决方案:

rules中添加了transform,把内容转成了String。

	province: [{
		required: true,
		message: '请选择位置',
		trigger: ['blur', 'change']
	}],
	status: [{
		required: true,
		message: '请选择状态',
		// 更新已有数据,在当前数据项没有再次改变的情况下,校验显示未选择,加上下面三行就好了
		transform(value) {
			return String(value);
		},
		trigger: ['blur', 'change']
	}],
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐