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>
相关推荐
磨十三13 分钟前
C++ 容器详解:std::list 与 std::forward_list 深入解析
开发语言·c++·list
Yeats_Liao24 分钟前
Go语言技术与应用(二):分布式架构设计解析
开发语言·分布式·golang
脚踏实地的大梦想家28 分钟前
【Go】P6 Golang 基础:流程控制
开发语言·golang
信息快讯31 分钟前
“COMSOL+MATLAB光子学仿真:从入门到精通,掌握多物理场建模
开发语言·matlab·comsol·光学工程
LK_0733 分钟前
【Open3D】Ch.3:顶点法向量估计 | Python
开发语言·笔记·python
鸠摩智首席音效师33 分钟前
如何清除 Yarn 缓存 ?
javascript
写不来代码的草莓熊42 分钟前
vue前端面试题——记录一次面试当中遇到的题(5)
前端
小码哥06843 分钟前
智能化招聘系统设计与实现-Java
开发语言·python
北山太湖1 小时前
Matlab安装硬件支持包
开发语言·matlab
weixin_ab1 小时前
【HTML分离术】
前端·html