前端注册代码

ops/2024/11/20 17:32:47/

代码

<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>

最终样式


http://www.ppmy.cn/ops/135286.html

相关文章

网络编程-002-UDP通信

1.UDP通信的简单介绍 1.1不需要通信握手,无需维持连接,网络带宽需求较小,而实时性要求高 1.2 包大小有限制,不发大于路径MTU的数据包 1.3容易丢包 1.4 可以实现一对多,多对多 2.客户端与服务端=发送端与接收端 代码框架 收数据方一般都是客户端/接收端 3.头文件 #i…

【Android、IOS、Flutter、鸿蒙、ReactNative 】实现 MVP 架构

Android Studio 版本 Android Java MVP 模式 参考 模型层 model public class User {private String email;private String password;public User(String email, String password) {this.email = email;this.password = password;}public String getEmail() {return email;}…

单片机的基本组成与工作原理

单片机&#xff08;Microcontroller Unit, MCU&#xff09;是一种将计算机的主要部分集成在一个芯片上的小型计算机系统。它通常包括中央处理器&#xff08;CPU&#xff09;、存储器&#xff08;Memory&#xff09;、输入输出接口&#xff08;I/O Ports&#xff09;、定时器/计…

天津渤海职业技术学院“讯方技术HarmonyOS人才训练营”圆满开展

5月6日-8日&#xff0c;讯方技术与天津渤海职业技术学院联合成功举办了一场技术盛宴——HarmonyOS人才训练营&#xff0c;吸引了学院网络专业的140余名学生踊跃参与。讯方技术专家帖莎娜作为本次训练营的讲师&#xff0c;为学生们提供了全面、深入的HarmonyOS操作系统技术讲解与…

OpenCV、YOLO、VOC、COCO之间的关系和区别

OpenCV、YOLO、COCO 和 VOC 是计算机视觉和深度学习领域常见的几个名词&#xff0c;它们分别代表不同的工具、算法和数据集&#xff0c;之间有一些联系和区别。下面分别说明它们的定义、用途以及相互关系。 1. OpenCV&#xff08;Open Source Computer Vision Library&#xf…

经验笔记:Git Merge 和 Git Rebase 的作用、区别和联系

Git Merge 和 Git Rebase 的作用、区别和联系 1. Git Merge 作用: git merge 用于将一个分支的更改合并到另一个分支中。它通过创建一个新的合并提交来记录两个分支的差异&#xff0c;并将这些差异应用到目标分支上。 实现过程: Git 找到两个分支的最近公共提交。Git 创建…

16.100ASK_T113-PRO 配置QT运行环境(二)

前言 1.在Ubuntu中安装QT Creator 文件名: qt-creator-opensource-linux-x86_64-4.8.0.run 2.配置 2.1 打开选项界面&#xff1a; 在 QtCreator 界面中&#xff0c;依次点击 tools -> options 2.2 选择编译器&#xff1a; 在出现的选项对话框中&#xff0c;在左边点击 Ki…

LeetCode 热题 100 回顾

目录 一、哈希部分 1.两数之和 &#xff08;简单&#xff09; 2.字母异位词分组 &#xff08;中等&#xff09; 3.最长连续序列 &#xff08;中等&#xff09; 二、双指针部分 4.移动零 &#xff08;简单&#xff09; 5.盛最多水的容器 &#xff08;中等&#xff09; 6…