Vue防止表单重复提交

在提交表单时按钮点击一次后，为防止重复表达提交，需要将提交按钮置灰。这需要操作button的disabled属性。<!doctype html><html lang="en"><head><meta charset="UTF-8"><

霸道流氓气质

4937人浏览 · 2018-09-17 21:01:56

霸道流氓气质 · 2018-09-17 21:01:56 发布

在提交表单时按钮点击一次后，为防止重复表达提交，需要将提交按钮置灰。

这需要操作button的disabled属性。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Vue防止表单重复提交</title>
 </head>
 <body>
 	<div id="app">
		<button @click="function1()" :disabled="isDisabled">提交</button>
	</div>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>  
<script>
	new Vue({
		el:'#app',
		data:{
			isDisabled:false
		},
		methods:{
			function1(){
				this.isDisabled = true
			}
		}
	})
</script>
 </body>
</html>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^