代码

<template>
    <el-card class="register" style="max-width: 480px ; background-color: aliceblue;">
        <template #header>
            <div class="card-header">
                <span>注册</span>
            </div>
        </template>

        <el-form ref="formRef" style="max-width: 600px" :model="formData" :rules="rules" label-width="auto" status-icon>
            <el-form-item label="手机号" prop="tel">
                <el-input v-model="formData.tel" />
            </el-form-item>
            <el-form-item label="验证码" prop="code">
                <el-row :gutter="20">
                    <el-col :span="16"><el-input v-model="formData.code" /></el-col>
                    <el-col :span="8"> <el-button type="primary" @click="sendCode">发送验证码</el-button></el-col>
                </el-row>
            </el-form-item>
            <el-form-item label="昵称">
                <el-input v-model="formData.nickName" />
            </el-form-item>
            <el-form-item label="密码" prop="password">
                <el-input v-model="formData.password" type="password" />
            </el-form-item>
            <el-form-item label="确认密码" prop="password2">
                <el-input v-model="formData.password2" type="password" />
            </el-form-item>


            <el-form-item class="btn-box">
                <el-button type="primary" @click="submitForm(formRef)">
                    注册
                </el-button>
                <el-button @click="resetForm(formRef)">重置</el-button>
            </el-form-item>
        </el-form>

        <template #footer>已有账号,去 <el-button type="danger" round>登录</el-button></template>
    </el-card>
</template>




<script lang="ts" setup>
import { log } from 'console';
import { onMounted, ref, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import userApi from '../../api/userApi';
import { ElMessage } from 'element-plus';
import { Md5 } from 'ts-md5';


const router = useRouter();
const formRef = ref();
const formData = reactive({
    tel: "",
    code: "",
    password: "",
    password2: "",
    nickName: ""
})

const sendCode = () => {
    if (formData.tel == "") {
        ElMessage.error("请输入手机号");
        return;
    }
    userApi.sendCode.call({ tel: formData.tel }).then((res: any) => {
        ElMessage.success("验证码发送成功");
    })
}

const rules = reactive<any>({
    tel: [
        { required: true, message: '请输入手机号', trigger: 'blur' },
        { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/, message: '手机号格式错误', trigger: 'blur' },
    ],
    code: [
        { required: true, message: '请输入验证码', trigger: 'blur' },
        { pattern: /^\d{4}$/, message: '验证码为4位数字', trigger: 'blur' },
    ],
    password: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^[a-zA-Z]\w{5,17}$/, message: '以字母开头,长度在6~18之间', trigger: 'blur' },
    ],
    password2: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { pattern: /^[a-zA-Z]\w{5,17}$/, message: '以字母开头,长度在6~18之间', trigger: 'blur' },
    ]
})


onMounted(() => {
    // console.log(router);
})

const submitFormDate = () => {
    const md5Pwd=Md5.hashStr(formData.password).toUpperCase();
    if (formData.password != formData.password2) {
        ElMessage.error("两次密码不一致")
        return
    }

    let params = {
        tel: formData.tel,
        password: md5Pwd,
        code: formData.code,
        nickName: formData.nickName,
    }

    userApi.register.call(params).then((res: any) => {
        ElMessage.success("注册成功")
        router.push({ name: "user-login" })
    })

    console.log(formData);
}


const submitForm = async (formEl: any) => {
    await formEl.validate((valid: any, fields: any) => {
        if (valid) {
            submitFormDate()
        }
    })
}

const resetForm = (formEl: any) => {
    if (!formEl) return
    formEl.resetFields()
}

</script>


<style scoped>
.register {
    width: auto;
    height: 550px;
    background-color: rgb(187, 207, 225);
    margin-top: 100px;
    margin-left: 30%;
    /* 边框阴影 */
    box-shadow: 0 0 10px rgb(79, 7, 7);
    /* 溢出隐藏、清除浮动、解决外边距塌陷*/
    overflow: hidden;
    /* 设置边框圆角 */
    border-radius: 10px;
    /* 文字居中 */
    text-align: center;
}

.register .card-header {
    font-size: 27px;
    font-weight: bold;

}

.wapper {
    height: 100vh;
    background-color: antiquewhite;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-box {
    padding-left: 33%;
}
</style>

最终样式