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

最新推荐文章于 2024-03-12 22:32:13 发布

wgPython

最新推荐文章于 2024-03-12 22:32:13 发布

阅读量3.7k

点赞数 2

更多博文在我的个人网站 https://www.charmcode.cn

本文链接：https://blog.youkuaiyun.com/wgPython/article/details/108106910

版权

前端专栏收录该内容

16 篇文章

订阅专栏

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="isDisabled"
                left-icon="user-o"
                required
                v-model="form.memberName"
                name="memberName"
                label="用户名"
                placeholder="请输入用户名"
                :rules="[{ required: true, message: '输入用户名'}]"
        ></van-field>

        <van-field
                left-icon="friends-o"
                required name="gender"
                label="性别"
                :rules="[{ required: true, message: '请选择性别'}]"
        >
            <template #input>
                <van-radio-group
                        :disabled="isDisabled"
                        v-model="form.gender"
                        direction="horizontal">
                    <van-radio icon-size="17px" name="男">男</van-radio>
                    <van-radio icon-size="17px" name="女">女</van-radio>
                </van-radio-group>
            </template>
        </van-field>
        
        <van-field
                :rules="[{ required: false}]"
                :readonly="isDisabled"
                left-icon="location-o"
                v-model="form.detailAddress"
                rows="2"
                size="2"
                label="地址"
                maxlength="50"
                show-word-limit
                type="textarea"
                placeholder="常住地址"
        ></van-field>
        
        <div style="margin: 16px;">
            <van-button round block type="info" native-type="submit">
                提交
            </van-button>
        </div>
    </van-form>

关于from表单还有个小问题，文档得看仔细。

点击表单中的普通按钮为什么会触发表单提交？
在表单中，除了提交按钮外，可能还有一些其他的功能性按钮，如发送验证码按钮。在使用这些按钮时，要注意将native-type设置为button，否则会触发表单提交。

<van-button native-type="button">
  发送验证码
</van-button>

这个问题的原因是浏览器中 button 标签 type 属性的默认值为submit，导致触发表单提交。我们会在下个大版本中将 type 的默认值调整为button来避免这个问题。

解决后的结果

添加后点击提交按钮就正常了，不会报那个错误了。
在这里插入图片描述

总结

Vue UI 使用基本很简单，上午看下午就可以写了，照着文档自己组合就行了，最怕的就是文档说明不仔细，导致开发者使用难受，我没找到原因之前，是自己手写的表单验证。

一些题外话
Vue这么流行，Vue优秀的官网文档是密不可分的，还有Python FastAPI文档，这俩官方文档我得吹一吹，写的真好！
不光是列举API, 还解释原因，对应的demo能够直接运行，不按照那样做会报什么错，常见的错误有那些等等等。