You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

175 lines
3.9 KiB

<script setup lang="ts">
import { useLoginStore } from "@/stores/login";
import { ref, Ref } from "vue";
const store = useLoginStore();
interface RegisterInfo {
username: string;
nickname: string;
password: string;
email: string;
phone: string;
third_user_id: string;
union_id: string;
platform: string;
confirmPassword: string;
}
// 注册信息
const registerInfo: Ref<RegisterInfo> = ref({
username: "",
nickname: "",
password: "",
email: "",
phone: "",
third_user_id: "",
union_id: "",
platform: "",
confirmPassword: "",
});
const rules = {
username: [
{ required: true, message: "用户名不能为空", trigger: "blur" },
{
min: 3,
max: 20,
message: "用户名长度应在3到20个字符之间",
trigger: "blur",
},
{
pattern: /^[a-zA-Z0-9]+$/,
message: "用户名只能包含英文和数字",
trigger: "blur",
},
],
password: [
{ required: true, message: "密码不能为空", trigger: "blur" },
{ min: 6, message: "密码长度不能小于6位", trigger: "blur" },
],
confirmPassword: [
{ required: true, message: "请再次输入密码", trigger: "blur" },
{
validator: (rule: any, value: any, callback: any) => {
console.log(rule);
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== registerInfo.value.password) {
callback(new Error("两次输入的密码不一致"));
} else {
callback();
}
},
trigger: "blur",
},
],
email: [
{ required: true, message: "邮箱不能为空", trigger: "blur" },
{
type: "email",
message: "请输入有效的邮箱地址",
trigger: ["blur", "change"],
},
],
phone: [
{ required: true, message: "手机号不能为空", trigger: "blur" },
{
pattern: /^1[3-9]\d{9}$/,
message: "请输入有效的手机号",
trigger: "blur",
},
],
nickname: [
{ required: true, message: "昵称不能为空", trigger: "blur" },
{
min: 2,
max: 20,
message: "昵称长度应在2到20个字符之间",
trigger: "blur",
},
],
};
</script>
<template>
<el-form
label-position="left"
label-width="0px"
:model="registerInfo"
ref="regFormRef"
:rules="rules"
>
<el-form-item prop="username">
<el-input
v-model="registerInfo.username"
size="large"
placeholder="请输入用户名"
prefix-icon="UserFilled"
></el-input>
</el-form-item>
<!-- <el-form-item prop="nickname">
<el-input
v-model="registerInfo.nickname"
size="large"
placeholder="请输入真实姓名"
prefix-icon="Avatar"
></el-input>
</el-form-item>
<el-form-item prop="email">
<el-input
v-model="registerInfo.email"
size="large"
placeholder="请输入邮箱"
prefix-icon="Message"
></el-input>
</el-form-item>
<el-form-item prop="phone">
<el-input
v-model="registerInfo.phone"
size="large"
placeholder="请输入手机号"
prefix-icon="Iphone"
></el-input>
</el-form-item> -->
<el-form-item prop="password">
<el-input
v-model="registerInfo.password"
size="large"
type="password"
placeholder="请输入密码"
show-password
prefix-icon="Key"
></el-input>
</el-form-item>
<el-form-item prop="confirmPassword">
<el-input
v-model="registerInfo.confirmPassword"
size="large"
type="password"
placeholder="请再次输入密码"
show-password
prefix-icon="Lock"
></el-input>
</el-form-item>
<el-form-item class="button-center">
<el-button
class="login-button"
type="primary"
size="large"
@click="store.onRegister"
>注册</el-button
>
</el-form-item>
</el-form>
</template>
<style scoped>
.button-center {
width: 100%;
.login-button {
width: 100%;
height: 45px;
border-radius: 50px;
}
}
:deep(.el-input__wrapper) {
border-radius: 50px;
height: 45px;
}
</style>