表单校验空值拦截的情况

RT，在提交表单的时候，通常前端会做一个非空校验，必填为空的话直接前端拦截掉，代码如下

<template>
	<div>
		<el-input placeholder="姓名" v-model="form.name" clearable
			style="max-width: 220px;">
		</el-input>
		<el-input placeholder="年龄" v-model="form.age" clearable
			style="max-width: 220px;">
		</el-input>
		<el-input placeholder="性别" v-model="form.sex" clearable
			style="max-width: 220px;">
		</el-input>
	</div>
	<button @click='submit'>提交</button>
</template>
<script>
export default {
	data(){
		return {
			form:{
				name: '',
				age: '',
				sex: '',
			}
		}
	}
	method:{
		checkData(){
			for (let key in this.form){
				if (!this.form[key]){
					let text = '';
					switch (key) {
						case 'name':
							text = '姓名';
							break;
						case 'age':
							text = '年龄';
							break;
						case 'sex':
							text = '性别';
							break;
					}
					this.$message.error(`请输入${text}`);
					return true;
				}
			}
		},
		submit(){
			let bool = this.checkData();
			if(bool)return;
		}
	}
}
</script>