elementPlus form表单(最简洁)

这是基于elementPlus简化后的表单，去除了ts部分，更加通俗易懂，有利于初学者学习

<template>
	<!-- 
		ruleForm的属性和rules的prop需要一一对应
		不然规则找不到name的数据就会一直报message的错误
		
		ruleFormRef  提交表单需要的二次验证
	 -->
	
	<el-form
	:model="ruleForm"
	:rules="rules"
	ref="ruleFormRef"
	>
		<el-form-item label="Activity name" prop="name">
		  <el-input v-model="ruleForm.name" />
		</el-form-item>
		
	    <el-form-item>
	      <el-button @click="submitForm(ruleFormRef)">提交</el-button>
	    </el-form-item>
	</el-form>
</template>

<script setup>
	import { reactive, ref } from 'vue'
	
	const ruleForm = reactive({
	  name: 'Hello',
	})
	
	const rules = reactive({
	  name: [
	    { required: true, message: 'Please input Activity name', trigger: 'blur' },
	    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
	  ]
	})
	
	const ruleFormRef = ref()
	
	//formEl 就是 ruleFormRef，如果没有二次验证即使提示了错误也能提交
	const submitForm = async (formEl) => {
	  if (!formEl) return
	  await formEl.validate((valid, fields) => {
	    if (valid) {
	      console.log('submit!')
	    } else {
	      console.log('error submit!', fields)
	    }
	  })
	}
</script>