uView UI 表单校验 相关字段有数据有值的情况下非空验证失败问题
问题情景描述:1、uniapp 微信小程序使用了uView UI,表单字段有验证;2、添加功能验证正常,表单数据本身都是空的;3、更新数据的时候,有些字段明明是有数据的,但是非空验证提示不能为空;4、这里就不截图了,搜索相关的关键词,出现最多的就是“vue+ element ui 表单验证有值但验证失败问题”,转载的基本上都是同一个内容,只能参考参考,但是解决不了问题;5、官方问官方文档最靠谱,有
问题情景描述:
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-item
的prop
参数绑定的也是相同的属性名,注意这里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: '只能包含字母或数字'
},
更多推荐
所有评论(0)