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

最新推荐文章于 2024-05-08 10:57:09 发布

hy3528

最新推荐文章于 2024-05-08 10:57:09 发布

阅读量1.5k

点赞数 3

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/hy3528/article/details/131126012

版权

<van-form validate-first validate-trigger="onSubmit" @submit="saveResume" :show-error-message="false">
                <van-field v-model="mobile" name="手机号" label="手机号" placeholder="请填写手机号" required
                    :rules="[{ required: true, message: '请填写手机号' }]">
                    <template Slot="button">
                        <van-button size="small" type="info" @click.stop="getInfoResume">获取已上传简历</van-button>
                    </template>
                </van-field>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>

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

原因

浏览器中 button 标签 type 属性的默认值为submit，导致触发表单提交。
知道原因就很好解决这个问题了，我们把type属性设置为其他类型，就不会触发表单提交

<van-button size="small" type="info" native-type='button' @click.stop="getInfoResume">获取已上传简历</van-button>

注意是 native-type=‘button’
并且事件中也要加上 .stop 来阻止其冒泡

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

hy3528

关注关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
vant form表单内部button触发提交解决办法

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

扫一扫

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

12-10

6698

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

【Vue3+Ts project】vant4 form表单校验流程

m0_64494670的博客

05-20

2838

点击button登录时校验form表单内input框内容是否满足条件，满足允许提交，否则失败，总体分为三步

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

玩转Vant的第二天（最详细、保姆级Button篇）

最新发布

墨杨清竹的博客

05-08

644

玩转Vant的第二天（最详细、保姆级Button篇）

解决使用Vant组件库表单组件无法提交数据的问题

weixin_51828648的博客

05-25

716

的判断，但是v-show是相当于控制css属性进行的渲染，即使隐藏掉了但是组件没有销毁，还是存在的只是看不见了，所以在设置了必填的表单验证的情况下，是无法通过的，所以没有办法提交表单，点击复选框，选择毕业时间这一栏将被隐藏掉，但是点击保存，总是无法提交表单。要解决这个问题，使用v-if进行条件渲染即可。原本使用了v-show进行条件渲染。

微信小程序动态生成表单来啦！你再也不需要手写表单了！

分享互联网的有趣知识~

11-18

2370

由于我们在小程序上涉及到数据采集业务，需要经常使用表单，微信小程序的表单使用起来非常麻烦，数据和表单是分离的，每个输入框都需要做数据处理才能实现响应式数据，所以我开发了dc-vant-form，针对原生微信小程序+vant组件构建的自定义表单，开发者可以通过表单配置项来快速生成表单。

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

weixin_42017221的博客

02-08

1301

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

在Vant的基础上实现添加表单验证框架的方法示例

12-01

Vant 一套基于Vue的移动端UI框架，有赞出品。因为UI设计的够漂亮，源码结构也比较清晰，插件定位也比较明确，重要是实战过程中的使用体验不错。在最近的项目当中就使用 Vant 作为移动端的基础UI框架，但在实践过程...

微信小程序表单验证form提交错误提示效果

10-18

主要为大家详细介绍了微信小程序表单验证form提交错误提示效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

表单Form的submit事件不响应

01-19

当用JS调用form的方法submit直接提交form的时候，submit事件不响应。为什么？知道的请回复。类比一下，我用input.select()做了测试，却能响应select事件。这个原因先放一边，我们看看先怎么把眼下的问题解决了。不...

vant-ui框架的一个bug(解决切换后onload不触发)

01-22

使用了vant-ui里的 List 列表瀑布流滚动加载，用于控制长列表的展示先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件官方提供了三种方法。（我使用了第三种，全局引入方法）方式一. 使用 babel-plugin...

vue+vant使用formdata上传数据给后台

qq1154667112的博客

08-10

1215

vue+vant使用formdata上传数据给后台

vue+vant动态渲染生成form表单生成多个上传插件（页面配置化）

ss_Tina的博客

09-30

4071

页面配置化！上传组件+输入框+单选框+复选框。页面动态渲染表单。根据数据库配置，动态生成表单的上传组件。数据库字段设计。

vant-form 统一校验表单

weixin_38992765的博客

11-08

7572

vant 官网点击进入 vant 官网提供了submit按钮，但是submit按钮实在很不好用（防抖节流用不了，独立样式不好用） vant 官网提供的form的校验方法：当我在输入: console.log(this.$refs.form) 输出的是: 发现了其中的validateAll，打断点进去，发现该方法用Promise.all去提交所有验证，如果发现errors.length大于1，返回reject，否则返回resolve validateAll: function va.

vant 表单验证

蓝胖子的博客

04-20

8965

标签：van Vant form 验证验证码表单 message 一、使用方法表单校验 1.1 用 van-form 包住 1.2 在 van-field 上要有 v-model=“变量” 和绑定rules属性 :rules=“rules变量” rules变量:[ { // 是否必填 required:true, message:错误信息, trigger:"onBlur/onChange"}, { // 自定义表单校验 validator: value =&

Vant-UI 表单组件（Field组件）：验证表单元素&&表单提交 - 踩坑篇

热门推荐

草巾冒小子的博客

03-01

8万+

Vant-UI 表单组件（Field组件）：验证表单元素&amp;amp;&amp;amp;表单提交：

vant表单点击提交没有触发验证_点击提交按钮后submit事件没有被触发

weixin_39786141的博客

12-22

2630

var forms = document.querySelectorAll("form")for (var i = 0; i < forms.length; i++) {forms[i].addEventListener("submit", function (e) {console.log(this);if (!this.checkValidity()) {e.preventDefault...

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-- van-form 使用

King Saj

04-06

2358

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

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` 方法触发校验。

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

非常没帮助
没帮助
一般
有帮助
非常有帮助

提交