VantUI 表单验证
之前使用Vant ui@v2.10.2 框架帮别人写了两个移动端页面,用到了from表单,但是令我不解的是from验证报错。
表单验证报错
直接点击提交按钮的时候就会如下报错:
TypeError: Cannot read property 'reduce' of undefined

我明明就是使用官网的一些示例,跑一下就报错了,真的很令人费解。
无论是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=

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





