代码
<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) returnformEl.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>
最终样式