4-注册界面

提示

由于我们上一篇已经使用了代码抽离和组件的引入，所以本章直接使用该方式编辑代码

1. 编辑注册表单组件

在 components 文件夹内创建 RegisterForm.vue 文件，代码如下：

<template>
    <el-form ref="registerForm" :model="registerUser" :rules="registerRules" class="registerForm sign-up-form">
        <div class="titletext" style="margin-top: 5rem;">注册Demo</div>
        <el-form-item prop="name">
            <el-input v-model="registerUser.name" placeholder="请输入用户名" />
        </el-form-item>
        <el-form-item prop="email">
            <el-input v-model="registerUser.email" placeholder="请输入邮箱" />
        </el-form-item>
        <el-form-item prop="password">
            <el-input type="password" v-model="registerUser.password" placeholder="请输入密码" />
        </el-form-item>
        <el-form-item prop="password2">
            <el-input type="password" v-model="registerUser.password2" placeholder="请再次输入密码确认" />
        </el-form-item>
        <el-form-item>
            <el-select type="password" v-model="registerUser.role" placeholder="选择你的角色" style="width: 100%;">
                <el-option lable="管理员" value="管理员">管理员</el-option>
                <el-option lable="用户" value="用户">用户</el-option>
                <el-option lable="游客" value="游客">游客</el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <!--   -->
            <el-button type="primary" @click="handleRregister('registerForm')" class="submit-btn">注册</el-button>
        </el-form-item>
        <div  class="register-btn">去登陆</div>
    </el-form>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue'

const props = defineProps({
    registerUser: {
        type: Object,
        required: true
    },
    registerRules: {
        type: Object,
        required: true
    }
})

// @ts-ignore
const { ctx } = getCurrentInstance()

const handleRregister = (formName: String): void => {
    ctx.$refs[formName].validate((valid: boolean) => {
        if (valid) {
            alert('submit!')
        } else {
            console.log('error submit!')
            return false
        }
    })
}

</script>

<style scoped>
</style>

2. 编辑注册表单数据验证ts

// 注册表单数据验证
import { reactive } from 'vue'

interface RegisterUser {
    name: string;
    email: string;
    password: string;
    password2: string;
    role: string;
}

export const registerUser = reactive<RegisterUser>({
    name: '',
    email: '',
    password: '',
    password2: '',
    role: ''
})

interface RegisterRules {
    name: ({
        message: string;
        required: boolean;
        trigger: string;
    } | {
        min: number;
        max: number;
        message: string;
        trigger: string;
    })[];
    email: {
        type: string;
        message: string;
        required: boolean;
        trigger: string;
    }[];
    password: ({
        message: string;
        required: boolean;
        trigger: string;
    } | {
        min: number;
        max: number;
        message: string;
        trigger: string;
    })[];
    password2: {
        validator: (rule: RegisterRules, value: string, callback: any) => void;
        trigger: string;
    }[];
}

// ? 确认密码校验回调函数
const validatePass2 = (rule: RegisterRules, value: string, callback: any) => {
    if (value === '') {
        callback(new Error('请再次输入密码'))
    } else if (value !== registerUser.password) {
        callback(new Error('请输入相同的密码'))
    } else {
        callback()
    }
}

export const registerRules = reactive<RegisterRules>({
    name: [
        {
            message: '用户名不能为空',
            required: true,
            trigger: 'blur',
        },
        {
            min: 2,
            max: 30,
            message: '用户名长度在 2 到 30 字符',
            trigger: 'blur'  // 元素失去焦点的时候触发
        }
    ],
    email: [
        {
            // ? 与表单组件中的 prop 保持一致
            type: 'email',
            message: '邮箱的格式有误',
            required: true,
            trigger: 'blur'  // 元素失去焦点的时候触发
        }
    ],
    password: [
        {
            message: '密码不能为空',
            required: true,
            trigger: 'blur'
        },
        {
            min: 6,
            max: 30,
            message: '密码长度范围必须在 6~30 字符内',
            trigger: 'blur'
        }
    ],
    password2: [
        {
            validator: validatePass2,
            trigger: 'blur'
        }
    ]
})

3. 组件和验证ts的引入

• 1. 将注册组件引入到 LoginRegister.vue

<script lang="ts" setup>
import { loginUser, rules } from "@/utils/loginValidators"  // 导入登录验证 ts
import { registerUser, registerRules } from "@/utils/registerValidators"  // 导入注册验证 ts

import LoginForm from "@/components/LoginForm.vue"; // 导入登陆组件
import RegisterForm from "@/components/RegisterForm.vue"; // 导入注册组件

</script>

• 2. 引入注册组件到 template

<template>
    <div class="container">
        <div class="forms-container">
            <div class="loginbgicon"></div>
            <div class="signin-signup">
                <div class="signbox">
                    <!-- 登陆 -->
                    <LoginForm :loginUser="loginUser" :rules="rules" />
                    <!-- 注册 -->
                    <RegisterForm :registerUser="registerUser" :registerRules="registerRules" />
                </div>
            </div>
        </div>
    </div>
</template>