uniapp注册模板

注册模板

学生注册

<template>
	<view class="content">
		<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="username" :rules="[{'required': true,'errorMessage': '姓名不能为空'}]">
				<uni-easyinput type="text" v-model="formData.username" placeholder="请输入姓名"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="班级" name="class" :rules="[{'required': true,'errorMessage': '班级不能为空'}]">
				    <uni-data-select v-model="formData.class" :localdata="classOption"></uni-data-select>
			</uni-forms-item>

			<uni-forms-item label="手机号" name="phone"
				:rules="[{'required': true,'errorMessage': '手机号不能为空'},{pattern: /^(13|14|15|16|17|18|19)\d{9}$/,errorMessage: '请输入正确的手机号'}]">
				<uni-easyinput type="number" v-model="formData.phone" placeholder="手机号"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="家长姓名" name="parent_name" :rules="[{'required': true, 'errorMessage': '家长姓名不能为空'}]">
				<uni-easyinput type="text" v-model="formData.parent_name" placeholder="家长姓名"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="家长联系电话" name="parent_phone"
				:rules="[{'required': true, 'errorMessage': '家长联系不能为空'},{pattern: /^(13|14|15|16|17|18|19)\d{9}$/,errorMessage: '请输入正确的手机号'}]">
				<uni-easyinput type="number" v-model="formData.parent_phone" placeholder="家长联系电话"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="家庭住址" name="address" :rules="[{'required': true, 'errorMessage': '家庭住址不能为空'}]">
				<uni-easyinput type="text" v-model="formData.address" placeholder="家庭住址"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="密码" name="password"
				:rules="[{'required': true, 'errorMessage': '密码不能为空'}, {pattern: /^(?=.*[a-zA-Z])(?=.*\d)[a-zA-Z\d]{8,16}$/, errorMessage: '密码最少8位，至少包含一个字母和一个数字'}]">
				<uni-easyinput type="password" v-model="formData.password" placeholder="请输入密码" />
			</uni-forms-item>
			<uni-forms-item label="邮箱" name="email" :rules="[{format: 'email',errorMessage: '请输入正确的邮箱地址'}]">
				<uni-easyinput type="text" v-model="formData.email" placeholder="请输入邮箱" />
			</uni-forms-item>
		</uni-forms>
		<button @click="submit" type="primary">注册</button>
		<view>
			<navigator class="navigator" url="/pages/Login/Login">返回登入</navigator>
		</view>
	</view>
</template>
<script setup>
	import {
		ref
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import baseUrl from "/config/config.js"
	import {register} from "/utils/loginUtils.js"
	let from = ref(null)
	let formData = ref({})
	let classOption = ref([])
	
	onLoad((o) => {
		getClass()
	})

	function getClass(){
	// 获取班级列表
		uni.request({
			url: baseUrl + "/api/user/class/",
			success:res=>{
				res.data.data.forEach(item=>{
					classOption.value.push({value:item.id,text:item.name})
				})
			},fail: () => {
				uni.showToast({
					title:"请求失败"
				})
			}
		})
	}
	
	function submit() {
		from.value.validate().then(res => {
			res.class = [res.class]
			// 注册请求
			register(res)
		}).catch(err => {
			console.log('表单错误信息：', err);
		})
	}
</script>
<style>
	.content {
		padding: 10px;
		box-sizing: border-box;
		background: #fafafa;
		width: 100vw;
		height: calc(100vh - var(--window-top));
	}

	.navigator {
		text-align: center;
		color: #a3a3a3;
		margin-top: 20px;
	}
</style>