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

目录
  • vant组件表单外部的button触发form表单的submit事件
    • 一、给form表单添加ref属性
    • 二、处理外部button
  • vant点击表单中普通按钮为什么会触发表单提交

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

有时候根据需求以及布局需要，button按钮需要放在form外部，但是想触发提交事件的同时又想方便地获取表单的值

一、给form表单添加ref属性

<van-form ref="formData" alidate-first @submit="submit">
      <van-field
           readonly
           v-model="name"
           name="name"
           label="姓名"
       />
</van-form>

二、处理外部button

1.给button添加点击事件

<button type="submit"  @click="send">外部提交</button>

2.在点击事件内部处理逻辑

send(){
   this.$refs.formData.submit();
},

这里的formData是form表单上的ref属性值

然后就可以点击button时就会触发表单的submit事件了，以后可以直接在submit事件里面写逻辑

完整代码附上：

<template>
    <div class="result">
         <van-form ref="formData" alidate-first @submit="submit">
             <van-field
                 readonly
                 v-model="name"
                 name="name"
                 label="姓名"
             />
             <van-field
                 readonly
                 v-model="idNumber"
                 name="idNum"
                 label="身份证号码"
             />
             <van-field
                 readonly
                 v-model="phoneNumber"
                 name="phone"
                 label="手机号"
             />
         </van-form>
         <button type="submit"  @click="send">外部提交按钮</button>
    </div>
</template>
<script>
export default {
    data(){
        return{
            
        }
    },
    methods:{
        submit(values){
            //提交事件的逻辑
            console.log(values) //values为表单中van-field的值
        },
        send(){
            this.$refs.formData.submit();
        },
    }
}
</script>
<style>
 
</style>

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

在表单中，除了提交按钮外，可能还有一些其他的功能性按钮，如发送验证码按钮。

在使用这些按钮时，要注意将native-type设置为button，否则会触发表单提交。

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

这个问题的原因是浏览器中 button 标签 type 属性的默认值为submit，导致触发表单提交。

我们会在下个大版本中将 type 的默认值调整为button来避免这个问题。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

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

    前几天做的项目里有用到下拉刷新.使用了vant-ui里的 List 列表 瀑布流滚动加载,用于控制长列表的展示 先说使用 1.用npm下载该模块包 npm i vant -S 2.引入组件 官方提供了三种方法.(我使用了第三种,全局引入方法) 方式一. 使用 babel-plugin-import(推荐) babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装 babel-plugin-import 插件 np

  • vant组件中 dialog的确认按钮的回调事件操作

    不知道是不是我理解有问题,看了vant的组件库,他的文档是这样说的 然后我就绑定了事件 :confirm 结果他的触发机制是:加载页面时会触发,点击按钮打开模态框时会触发,点击确定会触发,点击取消也会触发. 经过查阅资料以后,可以绑定他一个事件:beforeClose 这个事件的回调 有两个参数, 第一个参数是来判断点击的是确认按钮还是取消按钮.第二个参数我感觉就是可以关闭模态框. 补充知识:修改 vant 弹窗Dialog 组件调用是确认按钮与取消按钮的文字 Props 有关props 两个属

  • vant-ui组件调用Dialog弹窗异步关闭操作

    需求描述: 需求描述:官方文档又是组件调用方式,又是函数调用方式. 我就需要一个很简单的:点击操作弹窗显示后,我填写一个表单,表单校验通过后,再调用API接口,返回成功后,关闭弹窗. 一个很简单的东西,element-ui用的很方便,在这里就懵比了,刚开始做的,弹窗关闭了,才返回异步接口调用的结果.网速慢点,用起来真的很不好. 正确的解决方式一: <van-dialog v-model="showDialog" title="提示" show-cancel-b

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

    目录 vant组件表单外部的button触发form表单的submit事件 一.给form表单添加ref属性 二.处理外部button vant点击表单中普通按钮为什么会触发表单提交 vant组件表单外部的button触发form表单的submit事件 有时候根据需求以及布局需要,button按钮需要放在form外部,但是想触发提交事件的同时又想方便地获取表单的值 一.给form表单添加ref属性 <van-form ref="formData" alidate-first @s

  • 通过button将form表单的数据提交到action层的实例

    form表单中不需要写action的路径,需要给form表单一个唯一的id,将你要提交的信息的表单中的标签name="action中的javabean对象.javabean属性".给button按钮添加一个onclick()点击事件,并实现该点击事件,在该onclick()方法中通过ajax将form表单中的数据提交给action层 JSP页面中的代码: <form id="handleform"> <!-- 根据学生id修改学生信息 -->

  • vue封装form表单组件拒绝重复写form表单

    vue封装form表单组件拒绝重复写form表单

    目录 前言 核心思想: 实现重点: 表单双向绑定的方式有两种: 1.使用v-model进行双向绑定 2.使用v-model的语法糖 配置项 整体字段: 效果浏览 源码放送 1. baseForm组件 2. 父组件 3. 配置项 4. 添加或编辑 前言 在日常工作中,当需要处理的form表单很多时,我们没有必要一遍又一遍地重复写form表单,直接封装一个组件去处理就好.其实很早之前就有涉猎通过使用类似配置json方法写form表单的文章,虽然当时也没怎么认真看...我们前端组也是使用这种思想配置的

  • Vue数据驱动表单渲染,轻松搞定form表单

    Vue数据驱动表单渲染,轻松搞定form表单

    form-create 具有动态渲染.数据收集.校验和提交功能的表单生成器,支持双向数据绑定.事件扩展以及自定义组件,可快速生成包含有省市区三级联动.时间选择.日期选择等17种功能组件. Github| 文档 form-create 是基于 Vue开发的开源项目,可快速生成 iviewUI 的表单元素.目的是节省开发人员在表单页面上耗费的时间,从而更专注于功能开发.使用 form-creae 可快速.便捷的生成日常开发中所需的各种表单. 下面向大家介绍一下 form-create 使用方法和生成

  • 使用Ajax方法实现Form表单的提交及注意事项

    写在前面的话 在使用form表单的时候,一旦点击提交触发submit事件,一般会使得页面跳转,页面间的跳转等行为的控制权往往在后端,后端会控制页面的跳转及数据传递,但是在某些时候不希望页面跳转,或者说想要将控制权放在前端,通过js来操作页面的跳转或者数据变化. 一般这种异步的操作,我们都会想到ajax方式,因此在实现了功能后就整理了这篇文章,通过ajax方法实现form表单的提交并进行后续的异步操作. 常见的form表单提交方式 <!DOCTYPE HTML PUBLIC "-//W3C/

  • layui form表单提交后实现自动刷新

    刚刚使用layui 来做东西,对这一切都不熟悉,使用一下form表单,但是,不能成功的使用. 问题: 1.提交表单,页面自动刷新. 出现这样的情况呢,搜索了一下是因为表单的提交按钮没有type类型.哪怕是button标签呢,也不行.我试了一下,使用这种情况的话,主要是在监听事件中并没有返回return false,如果返回了return false,这个就可以不再刷新. 2.提交表单,获取不到form表单中的数据. 有人说,是因为给了一个id,并没有给name属性,用惯了jquery.我懒得去找

  • Form表单及django的form表单的补充

    Form表单及django的form表单的补充

    form 表单中的button按钮 <button>提交</button> :放在form表单中,会有一个提交事件,会提交form数据, <input type="button" value="提交"> :是一个单纯的按钮,没有任何默认事件, 先匹配url和视图函数 from django.conf.urls import url from django.contrib import admin from app01 import

  • Vue导入excel文件的两种方式(form表单和el-upload)

    目录 前言 第一种方法:form表单 一.文件上传的三要素是什么? 二.具体使用步骤 第二种方法:el-upload 总结 前言 两种导入文件的方法:form表单和el-upload 第一种方法:form表单 一.文件上传的三要素是什么? 文件上传的三要素: 表单post请求 input框的type=file 在form表单中添加enctype=“multipart/form-data” 二.具体使用步骤 代码如下(示例): <form action="/" method=&qu

  • JS组件Form表单验证神器BootstrapValidator

    JS组件Form表单验证神器BootstrapValidator

    本文为大家分享了JS组件Form表单验证神器BootstrapValidator,供大家参考,具体内容如下 1.初级用法 来看bootstrapvalidator的描述:A jQuery form validator for Bootstrap 3.从描述中我们就可以知道它至少需要jQuery.bootstrap的支持.我们首先引入需要的js组件: <script src="~/Scripts/jquery-1.10.2.js"></script> <sc

  • Element Plus组件Form表单Table表格二次封装的完整过程

    Element Plus组件Form表单Table表格二次封装的完整过程

    目录 前言 Form表单的封装 简述 正常的使用 开始封装① 开始封装② 开始封装③ 开始封装④ 完整封装代码⑤ 配置项类型文件 配置项文件 form表单组件文件 page-search组件文件 role页面组件文件 结语 Table表格的封装 简述 正常使用 开始封装① 开始封装② 开始封装③ 完整封装代码④ 配置项类型文件 配置项文件 table表单组件文件 page-table组件文件 user页面组件文件 结语 前言 直至今天,看了一下别人写的代码,才发现以前自己写的代码太垃圾,所以在这

随机推荐