Vant2表单form内部按钮触发校验问题

最新推荐文章于 2024-05-08 10:57:09 发布
最新推荐文章于 2024-05-08 10:57:09 发布
阅读量2k 收藏 4
点赞数 6
分类专栏： Vue 文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42969725/article/details/127889898
版权

表单.png

问题

表单内部加入了button时，调用这个button的点击事件时会触发表单的校验。

原因

浏览器中 button 标签 type 属性的默认值为submit，导致触发表单提交。

解决方案

将button的native-type设置为button，同时加上.stop来阻止其冒泡。
<van-button native-type='button' @click.stop='xxx'>

与繁星的相遇
关注
  • 6
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
微信小程序实现表单校验功能
08-29
"微信小程序实现表单校验功能" 微信小程序实现表单校验功能是小程序开发中最难实现的公共业务之一。表单校验的难点在于表单组件的多样性和校验规则的多样性，导致复杂度达到n³。解决这个问题的关键是组件化和非...
【Vue3+Ts project】vant4 form表单校验流程
m0_64494670的博客
05-20 2898
点击button登录时校验form表单内input框内容是否满足条件，满足允许提交，否则失败，总体分为三步
vant表单验证
weixin_37863088的博客
11-15 1721
vant表单验证validator: (value) =>{true or false}
玩转Vant的第二天（最详细、保姆级Button篇）
最新发布
墨杨清竹的博客
05-08 863
玩转Vant的第二天（最详细、保姆级Button篇）
vue黑马头条
i2270626407的博客
03-15 244
4.8、文章收藏 该功能和关注用户的处理思路几乎一样，建议由学员自己编写。 封装组件 处理视图 功能处理 思路： 给收藏按钮注册点击事件 如果已经收藏了，则取消收藏 如果没有收藏，则添加收藏 下面是具体实现。 1、封装组件 创建src/components/collect-article/index.vue <template> <van-button icon="star-o"></van-button> </template>
给自定义组件添加单击事件
cbbgs_cb的博客
04-11 2274
自己定义了一个按钮按组件 <template> <div> <div class="endBtn"> <van-button type="danger" block color="linear-gradient( to left ,#F24B0B, #FF4A44 )">{{btnMsg}}</van-button> </div> </div> </template> &
基于Vant组件的Vue移动端黑马头条项目Day02 登录注册
qq_39349116的博客
09-11 3942
二、登录注册 目标 能实现登录页面的布局 能实现基本登录功能 能掌握 Vant 中 Toast 提示组件的使用 能理解 API 请求模块的封装 能理解发送验证码的实现思路 能理解 Vant Form 实现表单验证的使用 准备 创建组件并配置路由 1、创建 src/views/login/index.vue 并写入以下内容 <template> <div class="login-container">登录页面</div> </template>
vant form表单内部button触发提交解决办法
hy3528的博客
06-09 1646
/</</一开始我选择在事件中加上.stop来阻止，但发现并没有用。
vant(ZanUi)结合async-validator实现表单验证的方法
10-17
主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue表单自定义校验规则介绍
10-18
在`submitForm`方法中，我们使用`this.$refs[formName].validate`来触发整个表单的验证。如果所有字段都通过验证，`valid`参数将为`true`，否则为`false`。`resetForm`方法用于重置表单的所有字段。 总结起来，Vue...
在Vant的基础上实现添加表单验证框架的方法示例
12-01
Vant 一套基于Vue的移动端UI框架，有赞出品。 因为UI设计的够漂亮，源码结构也比较清晰，插件定位也比较明确，重要是实战过程中的使用体验不错。在最近的项目当中就使用 Vant 作为移动端的基础UI框架，但在实践过程...
Vant2 清除form表单校验的操作
m0_72663698的博客
07-06 1407
在pc端使用element清除表单校验非常方便，直接调用ui框架内置的resetFields()方法就能清除校验，vant-ui里面清除校验挺含糊其辞的，在这里总结一下一个方法。1.在form表单上 加上 :key=“formKey”3.在关闭的事件里加 this.formKey ++2. 在data定义 formKey:0。
小程序小知识点总结及vant weapp UI组件库的使用
官方小可爱√的博客
11-22 759
文章目录前言一、小程序是什么？二、点击方法三、传值四、自定义组件五、父子通信六、 尺寸单位 rpx七、 引入vant weapp UI组件库引入组件使用组件 前言 微信小程序，小程序的一种，英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。 微信小程序是一种不用下载就能使用的应用，也是一项创新，经过将近两年的发展，已经构造了新的微信小程序开发环境和开发者生态。微信小程序也是这么多年来中国IT行业里一个真正能够影响
vant 组件的表单校验
weixin_60885570的博客
10-08 9866
使用 :rules="XX" 定义校验的规则,对于手机号的校验。
利用Vant ui 中 form 表单组件，实现通过一个按钮校验多个表单
qq_50721840的博客
03-21 1388
多个表单校验
Vue3中如何点击外部button进行van-form表单验证
trabecula_hj的博客
11-23 1251
【代码】Vue3中如何点击外部button进行表单验证。
基于Vant组件库的表单校验
04-17 3570
TS+Vue3.x+Vant
Vant表单验证的使用（移动端）
热门推荐
qq_33235680的博客
03-09 1万+
Vant表单验证的使用（移动端）
vant、elementUI的form，整个表单校验and部分表单字段校验
qq_46302247的博客
01-13 1420
当其他表单字段明确为空的情况下， 可以不用部分表单检验 因为其他表单字段是校验不到的，可以直接使用整个表单校验。
vant form表单不触发校验
05-18
如果你使用的是 Vant 2.x 版本，可以尝试加上`ref`属性，然后在提交表单的时候手动触发校验，示例代码如下： ```html <template> <van-form ref="form"> <van-field v-model="name" name="name" label="用户名" placeholder="请输入用户名" :rules="nameRules"></van-field> <van-field v-model="password" type="password" name="password" label="密码" placeholder="请输入密码" :rules="passwordRules"></van-field> <van-button type="primary" @click="submitForm">提交</van-button> </van-form> </template> <script> export default { data() { return { name: '', password: '', nameRules: [ { required: true, message: '请输入用户名' } ], passwordRules: [ { required: true, message: '请输入密码' } ] } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过，提交表单 console.log('submit form') } else { // 校验不通过 console.log('validate failed') } }) } } } </script> ``` 如果使用的是 Vant 3.x 版本，可以使用 `validate` 方法自动触发校验，示例代码如下： ```html <template> <van-form :model="form" :rules="rules"> <van-field v-model="form.name" name="name" label="用户名" placeholder="请输入用户名"></van-field> <van-field v-model="form.password" type="password" name="password" label="密码" placeholder="请输入密码"></van-field> <van-button type="primary" @click="submitForm">提交</van-button> </van-form> </template> <script> export default { data() { return { form: { name: '', password: '' }, rules: { name: [ { required: true, message: '请输入用户名' } ], password: [ { required: true, message: '请输入密码' } ] } } }, methods: { submitForm() { this.$refs.form.validate((valid) => { if (valid) { // 校验通过，提交表单 console.log('submit form') } else { // 校验不通过 console.log('validate failed') } }) } } } </script> ``` 其中 `:model` 绑定表单数据，`:rules` 绑定校验规则，点击提交按钮时通过 `validate` 方法触发校验。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

与繁星的相遇

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值