vue3中使用element-plus表格验证遇到的坑

最近用element-plus写自己的alone-admin后台管理系统的时候，遇到了一些坑，，，也可能是因为自己比较菜，毕竟自己其实是一枚后端程序员，，， 

其实如果直接复制element-plus官网上的写法也没什么问题，但是官网的是ts写法，奈何自己对ts的了解并不多，所以并不想直接复制，，，而后就是不断踩坑了，经过不断的努力终于成功了。

下面代码很简单，就是一个登录验证表单实例：

<template>
	<div class="login">
		<p>alone-admin管理系统</p>
		<el-form ref="loginFormRef" :model="loginForm" :rules="rules">
			<el-form-item label="账号" prop="username">
				<el-input v-model="loginForm.username" />
			</el-form-item>
			<el-form-item label="密码" prop="password">
				<el-input v-model="loginForm.password" />
			</el-form-item>
			<el-button @click="submitForm">登录</el-button>
		</el-form>
	</div>
</template>

<script>
	import {reactive,ref} from 'vue'
	export default{
		setup() {
			const loginForm = reactive({
				username:'',
				password:''
			})
			const rules = reactive({
				username:[
					{
						required:true,
						message:'请输入账号'
					}
				],
				password:[
					{
						required:true,
						message:'请输入密码'
					}
				],
			})
			
			const loginFormRef=ref({})
			const submitForm = async()=>{
				loginFormRef.value.validate((valid)=>{
					if(valid){
						console.log('验证通过')
					}else{
						console.log('验证不通过')
					}
				})
			}
			
			return {
				loginForm,
				submitForm,
				loginFormRef,
				rules
			}
		}
	}
</script>

<style>
</style>