vantUI中的van-form使用 vue2版本

使用@submit="onSubmit"提交,然后button按钮native-type="submit"提交,单个form的时候没有问题,但是多个form组件多次点击的时候就容易出现混乱提交

javascript 复制代码
<van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="[{ required: true, message: '请填写用户名' }]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">提交</van-button>
  </div>
</van-form>

优化使用@click方法点击,然后validate()进行校验***********************************

javascript 复制代码
<van-form ref="ruleForm">
  <van-field
    v-model="submitForm.username"
    name="用户名"
    label="用户名"
    placeholder="用户名"
    :rules="rules.username"
  />
  <van-field
    v-model="submitForm.password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="rules.password"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" @click="handleSubmit">提交</van-button>
  </div>
</van-form>

<script>
export default {
	data(){
		submitForm:{
			username:"",
			password:"",
		},
		rules:{
			username:[{ required: true, message: '请填写用户名' }],
			password:[{ required: true, message: '请填写密码' }]
		}
	},
	methods:{
		handleSubmit(){
			const _this = this;
			this.$refs.submitForm.
			?.validate()
			.then(() => {
	          console.log("验证成功");
	          //提交数据  _this.submitForm
	          console.log(_this.submitForm)
	        })
	        .catch(() => {
	          console.log("验证失败");
	        });
		}
	}

}
</script>
相关推荐
逐步前行2 小时前
C标准库--C99--布尔型<stdbool.h>
c语言·开发语言
QX_hao2 小时前
【Go】--闭包
开发语言·golang
web打印社区5 小时前
使用React如何静默打印页面:完整的前端打印解决方案
前端·javascript·vue.js·react.js·pdf·1024程序员节
喜欢踢足球的老罗5 小时前
[特殊字符] PM2 入门实战:从 0 到线上托管 React SPA
前端·react.js·前端框架
小光学长5 小时前
基于Vue的课程达成度分析系统t84pzgwk(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
林月明5 小时前
【VBA】自动设置excel目标列的左邻列格式
开发语言·excel·vba·格式
喜欢吃燃面5 小时前
数据结构算法题:list
开发语言·c++·学习·算法·1024程序员节
。TAT。5 小时前
C++ - 多态
开发语言·c++·学习·1024程序员节
武当豆豆6 小时前
C++编程学习(第42天)
开发语言·c++·学习
Baklib梅梅6 小时前
探码科技再获“专精特新”认定:Baklib引领AI内容管理新方向
前端·ruby on rails·前端框架·ruby