|
|
|
|
@ -1,97 +1,88 @@
|
|
|
|
|
<template>
|
|
|
|
|
<el-form
|
|
|
|
|
ref="ruleFormRef"
|
|
|
|
|
:model="ruleForm"
|
|
|
|
|
status-icon
|
|
|
|
|
:rules="rules"
|
|
|
|
|
label-width="120px"
|
|
|
|
|
class="demo-ruleForm"
|
|
|
|
|
>
|
|
|
|
|
<el-form-item label="密码" prop="pass">
|
|
|
|
|
<el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="确认密码" prop="checkPass">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="ruleForm.checkPass"
|
|
|
|
|
type="password"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
/>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<el-form-item label="账号" prop="account">
|
|
|
|
|
<el-input v-model="ruleForm.account" type="text" autocomplete="off" />
|
|
|
|
|
</el-form-item>
|
|
|
|
|
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button type="primary" @click="submitForm(ruleFormRef)">提交</el-button>
|
|
|
|
|
<el-button @click="resetForm(ruleFormRef)">重置</el-button>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div class="register-container">
|
|
|
|
|
<h2>注册</h2>
|
|
|
|
|
<form @submit.prevent="handleRegister">
|
|
|
|
|
<div>
|
|
|
|
|
<label for="username">用户名：</label>
|
|
|
|
|
<input type="text" id="username" v-model="username" required />
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<label for="password">密码：</label>
|
|
|
|
|
<input type="password" id="password" v-model="password" required />
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<label for="confirmPassword">确认密码：</label>
|
|
|
|
|
<input type="password" id="confirmPassword" v-model="confirmPassword" required />
|
|
|
|
|
</div>
|
|
|
|
|
<button type="submit">注册</button>
|
|
|
|
|
</form>
|
|
|
|
|
<p>
|
|
|
|
|
已有账号？<router-link to="/">点击登录</router-link>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
|
|
import { reactive, ref } from 'vue'
|
|
|
|
|
import type { FormInstance } from 'element-plus'
|
|
|
|
|
<script>
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
username: '',
|
|
|
|
|
password: '',
|
|
|
|
|
confirmPassword: ''
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
handleRegister() {
|
|
|
|
|
if (this.password !== this.confirmPassword) {
|
|
|
|
|
alert('密码不一致，请重新输入');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const ruleFormRef = ref<FormInstance>()
|
|
|
|
|
if (localStorage.getItem(this.username)) {
|
|
|
|
|
alert('用户名已存在，请选择其他用户名');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const newUser = {
|
|
|
|
|
username: this.username,
|
|
|
|
|
password: this.password
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
const validatePass = (rule: any, value: any, callback: any) => {
|
|
|
|
|
if (value === '') {
|
|
|
|
|
callback(new Error('请输入密码'))
|
|
|
|
|
} else {
|
|
|
|
|
if (ruleForm.checkPass !== '') {
|
|
|
|
|
if (!ruleFormRef.value) return
|
|
|
|
|
ruleFormRef.value.validateField('checkPass')
|
|
|
|
|
localStorage.setItem(this.username, JSON.stringify(newUser));
|
|
|
|
|
alert('注册成功！');
|
|
|
|
|
this.$router.push('/');
|
|
|
|
|
}
|
|
|
|
|
callback()
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
const validatePass2 = (rule: any, value: any, callback: any) => {
|
|
|
|
|
if (value === '') {
|
|
|
|
|
callback(new Error('请再次输入密码'))
|
|
|
|
|
} else if (value !== ruleForm.pass) {
|
|
|
|
|
callback(new Error("两次输入不一致!"))
|
|
|
|
|
} else {
|
|
|
|
|
callback()
|
|
|
|
|
}
|
|
|
|
|
<style scoped>
|
|
|
|
|
.register-container {
|
|
|
|
|
width: 300px;
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
padding: 20px;
|
|
|
|
|
border: 1px solid #ddd;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const validateAccount = (rule: any, value: any, callback: any) => {
|
|
|
|
|
const alphanumericRegex = /^[a-zA-Z0-9]+$/;
|
|
|
|
|
if (value.length < 8 || !alphanumericRegex.test(value)) {
|
|
|
|
|
callback(new Error('账号需满足长度＞8且仅由字母和数字组成'));
|
|
|
|
|
} else {
|
|
|
|
|
callback();
|
|
|
|
|
}
|
|
|
|
|
h2 {
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const ruleForm = reactive({
|
|
|
|
|
pass: '',
|
|
|
|
|
checkPass: '',
|
|
|
|
|
account: '',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const rules = reactive({
|
|
|
|
|
pass: [{ validator: validatePass, trigger: 'blur' }],
|
|
|
|
|
checkPass: [{ validator: validatePass2, trigger: 'blur' }],
|
|
|
|
|
account: [{ validator: validateAccount, trigger: 'blur' }],
|
|
|
|
|
})
|
|
|
|
|
form div {
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const submitForm = (formEl: FormInstance | undefined) => {
|
|
|
|
|
if (!formEl) return
|
|
|
|
|
formEl.validate((valid) => {
|
|
|
|
|
if (valid) {
|
|
|
|
|
console.log('提交成功!')
|
|
|
|
|
} else {
|
|
|
|
|
console.log('提交失败!')
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
button {
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding: 10px;
|
|
|
|
|
background-color: #4CAF50;
|
|
|
|
|
color: white;
|
|
|
|
|
border: none;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const resetForm = (formEl: FormInstance | undefined) => {
|
|
|
|
|
if (!formEl) return
|
|
|
|
|
formEl.resetFields()
|
|
|
|
|
button:hover {
|
|
|
|
|
background-color: #45a049;
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
</style>
|
|
|
|
|
|
guixu0320