mirror of
https://github.com/itbaima-study/SpringBoot-Vue-Template-Session.git
synced 2025-05-17 22:01:15 +08:00
完成注册相关内容校验
This commit is contained in:
NagoColer
parent
5a44454cc0
commit
c212c73285
@ -5,40 +5,50 @@
|
||||
<div style="font-size: 14px;color: grey">欢迎注册我们的学习平台，请在下方填写相关信息</div>
|
||||
</div>
|
||||
<div style="margin-top: 50px">
|
||||
<el-input v-model="form.username" type="text" placeholder="用户名">
|
||||
<template #prefix>
|
||||
<el-icon><User /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input v-model="form.password" type="password" placeholder="密码" style="margin-top: 10px">
|
||||
<template #prefix>
|
||||
<el-icon><Lock /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input v-model="form.password_repeat" type="password" placeholder="重复密码" style="margin-top: 10px">
|
||||
<template #prefix>
|
||||
<el-icon><Lock /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
<el-input v-model="form.email" type="email" placeholder="电子邮件地址" style="margin-top: 10px">
|
||||
<template #prefix>
|
||||
<el-icon><Message /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</div>
|
||||
<div style="margin-top: 10px">
|
||||
<el-row :gutter="10" style="width: 100%">
|
||||
<el-col :span="17">
|
||||
<el-input v-model="form.code" type="text" placeholder="请输入验证码">
|
||||
<el-form :model="form" :rules="rules" @validate="onValidate">
|
||||
<el-form-item prop="username">
|
||||
<el-input v-model="form.username" type="text" placeholder="用户名">
|
||||
<template #prefix>
|
||||
<el-icon><EditPen /></el-icon>
|
||||
<el-icon><User /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-button type="success">获取验证码</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-input v-model="form.password" type="password" placeholder="密码">
|
||||
<template #prefix>
|
||||
<el-icon><Lock /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password_repeat">
|
||||
<el-input v-model="form.password_repeat" type="password" placeholder="重复密码">
|
||||
<template #prefix>
|
||||
<el-icon><Lock /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email">
|
||||
<el-input v-model="form.email" type="email" placeholder="电子邮件地址">
|
||||
<template #prefix>
|
||||
<el-icon><Message /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-row :gutter="10" style="width: 100%">
|
||||
<el-col :span="17">
|
||||
<el-input v-model="form.code" type="text" placeholder="请输入验证码">
|
||||
<template #prefix>
|
||||
<el-icon><EditPen /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-col>
|
||||
<el-col :span="5">
|
||||
<el-button type="success" :disabled="!isEmailValid">获取验证码</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div style="margin-top: 80px">
|
||||
<el-button style="width: 270px" type="warning" plain>立即注册</el-button>
|
||||
@ -53,7 +63,7 @@
|
||||
<script setup>
|
||||
import {EditPen, Lock, Message, User} from "@element-plus/icons-vue";
|
||||
import router from "@/router";
|
||||
import {reactive} from "vue";
|
||||
import {reactive, ref} from "vue";
|
||||
|
||||
const form = reactive({
|
||||
username: '',
|
||||
@ -62,6 +72,51 @@ const form = reactive({
|
||||
email: '',
|
||||
code: ''
|
||||
})
|
||||
|
||||
const validateUsername = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请输入用户名'))
|
||||
} else if(!/^[a-zA-Z0-9\u4e00-\u9fa5]+$/.test(value)){
|
||||
callback(new Error('用户名不能包含特殊字符，只能是中文/英文'))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const validatePassword = (rule, value, callback) => {
|
||||
if (value === '') {
|
||||
callback(new Error('请再次输入密码'))
|
||||
} else if (value !== form.password) {
|
||||
callback(new Error("两次输入的密码不一致"))
|
||||
} else {
|
||||
callback()
|
||||
}
|
||||
}
|
||||
|
||||
const rules = {
|
||||
username: [
|
||||
{ validator: validateUsername, trigger: ['blur', 'change'] },
|
||||
{ min: 2, max: 8, message: '用户名的长度必须在2-8个字符之间', trigger: ['blur', 'change'] },
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', trigger: 'blur' },
|
||||
{ min: 6, max: 16, message: '密码的长度必须在6-16个字符之间', trigger: ['blur', 'change'] }
|
||||
],
|
||||
password_repeat: [
|
||||
{ validator: validatePassword, trigger: ['blur', 'change'] },
|
||||
],
|
||||
email: [
|
||||
{ required: true, message: '请输入邮件地址', trigger: 'blur' },
|
||||
{type: 'email', message: '请输入合法的电子邮件地址', trigger: ['blur', 'change']}
|
||||
]
|
||||
}
|
||||
|
||||
const isEmailValid = ref(false)
|
||||
|
||||
const onValidate = (prop, isValid) => {
|
||||
if(prop === 'email')
|
||||
isEmailValid.value = isValid
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
@ -9,10 +9,12 @@
|
||||
<div style="margin-top: 10px">在这里你可以学习如何使用Java，如何搭建网站，并且与Java之父密切交流。</div>
|
||||
<div style="margin-top: 5px">在这里你可以同性交友，因为都是男的，没有学Java的女生。</div>
|
||||
</div>
|
||||
<div style="width: 400px;background-color: white">
|
||||
<transition name="el-fade-in-linear">
|
||||
<router-view/>
|
||||
</transition>
|
||||
<div style="width: 400px;background-color: white;z-index: 1">
|
||||
<router-view v-slot="{ Component }">
|
||||
<transition name="el-fade-in-linear">
|
||||
<component :is="Component" />
|
||||
</transition>
|
||||
</router-view>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user