uniapp中用vue3实现表单校验

<template>
	<view class="box">
		<view class="login_card">
			<view class="title">智能制造管理系统</view>
			<uni-forms class="forms" :model="form" ref="formRole">
				<uni-forms-item name="username" :rules="[{ required: true, errorMessage: '请输入用户名' }]">
					<uni-easyinput prefixIcon="person-filled" type="text" v-model="form.username" placeholder="请输入用户名"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="password" :rules="[{ required: true, errorMessage: '请输入密码' }]">
					<uni-easyinput prefixIcon="locked-filled" type="password" v-model="form.password" placeholder="请输入密码"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="code" :rules="[{ required: true, errorMessage: '请输入验证码' }]">
					<uni-easyinput class="left" prefixIcon="checkbox"  v-model="form.code"  placeholder="请输入验证码" ></uni-easyinput>	
				</uni-forms-item>
				<button @click="submit" class="btn">登入</button>
			</uni-forms>
		</view>
	</view>
</template>
   
<script setup lang="ts">
import { reactive, ref, onMounted, computed, watch } from 'vue';
const formRole = ref<any>(null);
const form = reactive({
	username: null,
	password: null,
	code:null,
	uuid: null
});
const submit = async () => {
	formRole.value.validate().then(async ({ valid, errors }: any) => {
		if (valid) {
		} else {
            //验证成功
			login(form).then((res) => {
				console.log(res)
			});
		}
	});
};
</script>