Vant UI表单验证报错 TypeError: Cannot read property ‘reduce‘ of undefined

本文详细解析了VantUI框架中表单验证的常见问题及解决方案,特别是当未给每个表单项添加:rules属性时,表单提交时会触发TypeError错误。文章通过实例展示了如何正确配置:rules属性,以确保表单验证的正常运行。

VantUI 表单验证

之前使用Vant ui@v2.10.2 框架帮别人写了两个移动端页面,用到了from表单,但是令我不解的是from验证报错。

表单验证报错

直接点击提交按钮的时候就会如下报错:
TypeError: Cannot read property 'reduce' of undefined

vant点击表单验证报错
我明明就是使用官网的一些示例,跑一下就报错了,真的很令人费解。
无论是google搜索
在这里插入图片描述
还是百度搜索
在这里插入图片描述
或者是github issue搜索记录, 都没找到原因.
在这里插入图片描述

原因

后来自己测试对比后发现,form表单的每个字段都要:rules属性,否则就会报如上错误。

我在vant文档中也没看到必须要加这个属性的说明呀?
https://youzan.github.io/vant/#/zh-CN/form
只是有句话提了一下,并没有说必须要加

在表单中,每个 Field 组件 代表一个表单项,使用 Field 的rules属性定义校验规则

解决方式

在每个van-field表单项都加上:rules验证属性,就算当前表单项不做任何验证,也要添加否则就会报错(我的就是有个没有添加)
:rules="[{ required: false}]"
示例:(以下代码只是部分)

 <van-form @submit="onSubmit">
        <van-field
                :readonly=
评论 4
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值