Vue防止表单重复提交
程序员文章站
2022-07-02 23:38:26
...
有两种方法
<!DOCTYPE html>
<html>
<head>
<title>页面</title>
<meta http-equiv="Content-Type" content="textml; charset=UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script type="text/javascript" src="../js/jquery.min.js"></script>
<!--vue JS-->
<script src="../../static/js/vue.min.js"></script>
<!--VUE表单校验JS-->
<!--<script src="https://cdn.jsdelivr.net/vee-validate/2.0.0-rc.3/vee-validate.min.js"></script>-->
<script src="../../static/js/vee-validate.min.js"></script>
</head>
<body class="loading">
<div class="wrapper">
<div class="whole">
<div class="zhuanz">
<!--<form id="fm" @submit.prevent="validateBeforeSubmit" method="post">-->
<form id="fm" method="post">
<strong style="text-align:center; ">
<!--第一种-->
<input type="button" @click="validateBeforeSubmit()" :disabled="isDisabled" value="确认提交">
<!--第二种-->
<!--<input type="button" @click.once="validateBeforeSubmit()" value="确认提交">-->
</strong>
</form>
</div>
</div>
</div>
<script>
$(document).ready(function () {
Vue.use(VeeValidate, {
locale: "zh_CN",//中文
});
var v= new Vue({
el: '#fm',
data: {isDisabled: false},
methods: {
validateBeforeSubmit() {
// 禁用按钮
this.isDisabled = true;
// DOM 还没有更新
/*this.$nextTick(function () {
// DOM 现在更新了
var _this = this;
});*/
alert(1);
// 启用按钮
// this.isDisabled = false;
/*setTimeout(function () {
alert(2);
v.isDisabled = false;
},3000);*/
}
}
});
});
</script>
</body>
</html>
第一种效果，按钮直接禁用，不能点击。
注意:
如果启用按钮this.isDisabled = false;，可能会导致表单重复提交（反正我是遇到过），
应该
setTimeout(function () {
//alert(2);
v.isDisabled = false;
},3000);
给个延迟时间。
第二种效果，按钮只能点击一次，第二次点击没有反应
下一篇： React——高阶组件(HOC)