vant的van-form组件外部button触发submit事件问题

最新推荐文章于 2025-06-13 14:03:07 发布

原创最新推荐文章于 2025-06-13 14:03:07 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vantui

每日一记专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在不同浏览器中按钮元素type属性的默认差异，特别是InternetExplorer与其他浏览器的区别。通过引入Vant组件库，利用`<van-button native-type=button>`来指定原生button标签的type属性，确保在各种环境下行为一致。这有助于提高前端应用的跨浏览器兼容性和用户体验。

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

外部button：发送短信验证码

触发原因：

type 属性规定按钮的类型。
提示：请始终为按钮规定 type 属性。Internet Explorer 的默认类型是 “button”，而其他浏览器中（包括 W3C 规范）的默认值是 “submit”。

vant的解决：

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

# native-type  指定原生 button 标签的 type 属性

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

开发路上的AZhe

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

vant-- van-form 使用

King Saj

04-06

2908

需求: 输入框要求: 1: 必填项展示 2: 格式效验 3:可以清除 4:上传图片限制大小,类型手机号: 校验邮箱: 校验效果: 代码 <van-form ref="form"> <van-field v-model="form.name" clearable name="姓名" label="姓名" placeholder="姓名" required :rules="rules.

【微信小程序】表单组件-form表单组件

墨夶的博客

11-23

1832

除了内置的表单控件，微信小程序还支持自定义表单控件。通过使用和这些内置行为，可以创建具有表单控件行为的自定义组件。-- custom-form-field.wxml --> < view > < input name = " customInput " placeholder = " 请输入自定义内容 " />

参与评论您还未登录，请先登录后发表或查看评论

vant组件表单外部的button触发form表单的submit事件

热门推荐

manda Liu的博客

07-07

1万+

有时候根据需求以及布局需要，button按钮需要放在form外部，但是想触发提交事件的同时又想方便地获取表单的值一、给form表单添加ref属性 <van-form ref="formData" alidate-first @submit="submit"> <van-field readonly v-model="name" name="name" label="姓名" /

微信小程序+vant 实现form表单必填验证

liuyuting___的博客

06-13

362

最近修改一个微信小程序+vant组件的项目，需要增加一个表单页面，原本是按照vant官方文档中的写法放上去，结果发现不行，微信小程序有自己的一套写法，以下是输入框、单选、日期选择器表单写法，其他的表单也是类似。

vant中点击表单中的普通按钮为什么会触发表单提交？

u010227042的博客

08-08

1835

在表单中，除了提交按钮外，可能还有一些其他的功能性按钮，如发送验证码按钮。在使用这些按钮时，要注意将native-type设置为button，否则会触发表单提交。 <van-button native-type="button"> 发送验证码 </van-button> 这个问题的原因是浏览器中 button 标签 type 属性的默认值为submit，导致触发表单提交。我们会在下个大版本中将 type 的默认值调整为button来避免这个问题。 ...

vant组件手动触发van-form的表单提交事件

12-10

7384

1.给van-form一个ref属性 <van-form @submit="onSubmit" ref="formData"> <van-form /> 2.手动在任意事件中触发表单提交事件，可用来检测表格填写状态（是否填全） click() { this.$refs.formData.submit(); },

vant表单组件没有van-form怎么办，我想要必填提示

02-28

### Vant 表单组件缺少 `van-form` 时实现必填项提示当不使用 `<van-form>` 组件而仅依赖于 `<van-field>` 来构建表单项时，可以通过手动控制验证逻辑来实现实时的必填项提示功能。具体方法如下： #### 方法一：...

vant-form写一个登录页面

10-19

<van-form ref="form" :submit-method="handleSubmit"> <van-input v-model="username" placeholder="用户名" name="username" @blur="validateUsername"></van-input> <van-input type="password" v-model=...

<template> <van-form @submit="submitForm" @failed="onFailed" ref="ruleFormRef" :model="form"> <van-cell-group> <van-field v-model="form.username" label="账号：" placeholder="请输入账号" clearable name="username" :rules="usernameRules" ></van-field> </van-cell-group> <van-cell-group> <van-field v-model="form.password" label="密码：" placeholder="请输入密码" name="password" clearable type="password" :rules="passwordRules" ></van-field> </van-cell-group> <van-cell-group> <van-button block round type="primary" native-type="submit">登录</van-button> </van-cell-group> </van-form> </template> <script setup> import { ref, reactive } from 'vue' import { login, getUser } from '../api' import useToken from '../stores/token' import useUser from '../stores/user' import { useRouter } from 'vue-router' const { updateToken } = useToken() const { updateUser } = useUser() const router = useRouter() const form = reactive({ username: 'jhh', password: '123456' }) const ruleFormRef = ref() // 定义验证规则 const usernameRules = ref([ { required: true, message: '用户名不能为空' }, { pattern: /^\w{3,16}$/, message: '用户名长度为3-16个字符' } ]) const passwordRules = ref([ { required: true, message: '密码不能为空' }, { pattern: /^\w{6,24}$/, message: '密码必须为6-24位英文字母或数字' } ]) // 表单提交函数 const submitForm = async values => { const data = await login(values) if (data) { updateToken(data.token) const user = await getUser() updateUser({ isLogin: true, username: user.username, avatar: user.avatar }) router.push({ name: 'user' }) } } const onFailed = errorInfo => { console.log('failed', errorInfo) } </script> <style lang="less" scoped> button { position: fixed; top: 200px; } </style>

最新发布

07-02

**表单提交参数问题**：- `submitForm`函数接收了一个`values`参数，但在模板中，`van-form`的`submit`事件默认会传递表单数据。然而，在代码中，我们使用`reactive`的`form`对象来绑定字段，但在提交时却使用了`...

就关于vant调用插件实现固定框架的操作

weixin_45408258的博客

04-08

746

登陆------------------------ <template> <div id="dev"> <div id="login"> <h2>登录</h2> <div class="shurk"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm"

小程序 vant button 组件不触发 form submit 问题及解决

weixin_42369612的博客

03-09

1206

小程序通知需要使用 formId 参数,使用 vant 的button 关联 submit 无法触发事件。

vant form表单内部button触发提交解决办法

hy3528的博客

06-09

2495

/</</一开始我选择在事件中加上.stop来阻止，但发现并没有用。

vue中使用vant提交如何传参

weixin_42496938的博客

09-27

260

【代码】vue中使用vant提交如何传参。

小程序vant--form表单与验证

weixin_42017221的博客

02-08

2883

【代码】小程序vant--form表单与验证。

利用vant组件封装button

weixin_43852916的博客

07-13

1375

<template> <van-button class="i-button" type="default" round :class="classMap" :icon="icon" :size="size" :loading="loading" :loading-text="loadingText" :loading-type="loadingType" :loading-size="loadingSiz

vant中取消form按钮的默认提交行为

haoxinqing222的博客

08-26

3568

使用场景：需求中需要有一个表单，和两个按钮，vant中的按钮如果在表单内部，就会默认执行submit操作，这时如果另一个按钮想执行别的事情，那就要进行一些操作了，可以把按钮放在表单外面，然后按钮的click事件执行以下：this.$refs.checkform.submit()，这样按钮就可以执行form的submit操作了 <template> <div class="result"> <van-form ref="checkfrom" alida

Vue3+TypeScript+H5 项目笔记 - 模板语法与事件绑定

u013486889的博客

10-05

487

【代码】Vue3+TypeScript+H5 项目笔记 - 模板语法与事件绑定。

van-form无法校验表单必输项

tan_xiao_tan的博客

03-07

1417

【代码】van-form无法校验表单必输项。