注册模板
学生注册
<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>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/67aa2d026aee941f2065e2fc4bc61f69.png)