vue3 uniui表单验证

<template>
	<view class="example">
		<!-- 基础表单校验 -->
		<uni-forms ref="valiForm" :rules="rules" :modelValue="valiFormData">
			<uni-forms-item label="姓名" required name="name">
				<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
			</uni-forms-item>
			<uni-forms-item label="年龄" required name="age">
				<uni-easyinput v-model="valiFormData.age" placeholder="请输入年龄" />
			</uni-forms-item>
			<uni-forms-item label="自我介绍" name="introduction">
				<uni-easyinput type="textarea" v-model="valiFormData.introduction" placeholder="请输入自我介绍" />
			</uni-forms-item>
		</uni-forms>
		<button type="primary" @click="submit('valiForm')">提交</button>
	</view>
</template>

<script lang="ts" setup>
	import { reactive, ref, toRefs } from 'vue';
	const rules = {
		name: {
			rules: [{
				required: true,
				errorMessage: '姓名不能为空'
			}]
		},
		age: {
			rules: [{
				required: true,
				errorMessage: '年龄不能为空'
			}, {
				format: 'number',
				errorMessage: '年龄只能输入数字'
			}]
		}
	}
	const {
		valiFormData,
	} = toRefs(reactive({
		valiFormData: {} as any,

	}))
	const valiForm = ref(null as any)
	const submit = (ref : any) => {
		valiForm.value.validate().then((res : any) => {
			console.log('success', res);
			uni.showToast({
				title: `校验通过`
			})
		}).catch((err : any) => {
			console.log('err', err);
		})
	}
</script>

<style>

</style>