vant4表单校验使用非输入框类型组件

迷糊_小袁

已于 2024-02-29 14:05:58 修改

阅读量1.3k

点赞数 13

文章标签：前端前端框架

于 2024-02-29 14:02:46 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_61211370/article/details/136369280

版权

本文介绍了在使用VantUI框架时，如何在不依赖输入框的情况下对图片上传进行校验，通过变量控制校验逻辑并在图片上传成功后关闭校验功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、正常表单输入框校验

<van-form @failed="onFailed">
    <van-field
      v-model="password"
      type="password"
      name="密码"
      label="密码"
      placeholder="密码"
      :rules="[{ required: true, message: '请填写密码' }]"
    />
</van-form>

2、校验图片是否上传

因为vant组件输入框使用插槽，与输入框相关的属性和事件将失效，就通过变量控制 isUpload 这个输入框本身是否使用校验，如果上传图片成功后，isUpload 变为fasle即可，提交表单时是否触发校验，这样就达到了非输入框的校验。

最低0.47元/天解锁文章