uView UI 表单校验 相关字段有数据有值的情况下非空验证失败问题

问题情景描述:

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

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

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

4、这里就不截图了,搜索相关的关键词,出现最多的就是“vue+ element ui 表单验证有值但验证失败问题”,转载的基本上都是同一个内容,只能参考,我用的是uviewui;

5、遇到问题查找官网的文档最靠谱,看官方文档(form表单部分,主站访问慢,请访问镜像站),官网没有明确提示该问题的原因和解决方式,参考网上的内容,启发一下可能会找出问题所在。

官网:

https://uviewui.com/ (主站点)
https://1.uviewui.com/ (西南镜像站)

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

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

2、使用校验

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

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

我的问题解决方式:

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

参考官网给出的示例代码如下,示例代码中提到使用正则验证的时候需要转化为字符串,我的字段验证没有使用正则,但是添加了transform之后更新表单就不再提示数据为空,问题解决。

希望对你有帮助。

// 正则判断为字母或数字
		{
			pattern: /^[0-9a-zA-Z]*$/g,
			// 正则检验前先将值转为字符串
			transform(value) {
				return String(value);
			},
			message: '只能包含字母或数字'
		},
  • 11
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值