对原作者的页面进行了修改(增加了表单验证)

<template>
	<view class="content">
		<!-- <uni-notice-bar single text="忘记密码,请联系管理员重置密码(重置后的密码为账户)" /> -->
		<view class="avatorWrapper">
			<view class="avator">
				<image class="img" src="/static/logo.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="form">
			<uni-forms ref="from" :modelValue="formData">
				<uni-forms-item label="" name="num" :rules="[{'required': true,'errorMessage': '学号不能为空'}]">
					<uni-easyinput type="text" v-model="formData.num" placeholder="请输入学号"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item label="" name="password" :rules="[{'required': true, 'errorMessage': '密码不能为空'}]">
					<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
				</uni-forms-item>
			</uni-forms>
			<view class="loginBtn" @click="submit()">
				<text class="btnValue">登录</text>
			</view>
			<view class="forgotBtn">
				<navigator url="/pages/StuRegister/StuRegister"><text>注册</text></navigator>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {login} from "/utils/loginUtils.js"
	import {ref} from "vue";
	import {onLoad,onShow} from "@dcloudio/uni-app";
	let formData = ref({})
	let from = ref(null)
	
	function submit() {
		from.value.validate().then(res => {
			console.log('表单数据信息：', res);
			// 登入请求
			login(res)
		}).catch(err => {
			// console.log('表单错误信息：', err);
		})
	}

</script>

<style>
	.content {
		background: #44a6e3;
		width: 100vw;
		height: calc(100vh - var(--window-top));
	}
	.avatorWrapper{
		height: 30vh;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: flex-end;
	}
	.avator{
		width: 200upx;
		height: 200upx;
		overflow: hidden;
	}
	.avator .img{
		width: 100%
	}
	.form{
		padding: 0 100upx;
		margin-top: 80px;
	}
	.loginBtn{
		width: 100%;
		height: 80upx;
		background: #81be07;
		border-radius: 50upx;
		font-weight: 600;
		margin-top: 50px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.loginBtn .btnValue{
		color: white;
	}
	.forgotBtn{
		text-align: center;
		color: #EAF6F9;
		font-size: 15px;
		margin-top: 20px;
	}
</style>
复制