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>
相关推荐
presenttttt13 分钟前
用Python和OpenCV从零搭建一个完整的双目视觉系统(四)
开发语言·python·opencv·计算机视觉
每日出拳老爷子18 分钟前
[C#] 使用TextBox换行失败的原因与解决方案:换用RichTextBox的实战经验
开发语言·c#
半桔22 分钟前
【Linux手册】从接口到管理:Linux文件系统的核心操作指南
android·java·linux·开发语言·面试·系统架构
nightunderblackcat31 分钟前
新手向:实现ATM模拟系统
java·开发语言·spring boot·spring cloud·tomcat·maven·intellij-idea
开开心心就好33 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享34 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
笑衬人心。41 分钟前
Java 17 新特性笔记
java·开发语言·笔记
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
序属秋秋秋2 小时前
《C++初阶之内存管理》【内存分布 + operator new/delete + 定位new】
开发语言·c++·笔记·学习
Savior`L2 小时前
CSS知识复习5
前端·css