RyanGoodwill/frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

添加了验证码图片支持也验证码前端校验

Browse Source
This commit is contained in:
高子兴 2024-07-02 22:28:34 +08:00
parent 3427046847
commit 88349683e7
1 changed files with 17 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
src/views/authentication/Register.vue
View File

@ -9,7 +9,9 @@ const username = ref('');
const phoneNumber = ref('');
const password = ref('');
const verificationCode = ref('');
const correctCode = ref('');
const router = useRouter();
const verificationCodeImage = ref('');
const handleRegister = async () => {
console.log('Registering with', {
@ -18,6 +20,10 @@ const handleRegister = async () => {
password: password.value,
verificationCode: verificationCode.value
});
if (verificationCode.value!==correctCode.value){
await ElMessageBox.alert("验证码错误");
return
}
try {
const response = await axios.post('/api/register', {
@ -38,20 +44,19 @@ const handleRegister = async () => {
}
};
const sendVerificationCode = async () => {
const getVerificationCode = async () => {
try {
const response = await axios.post('/api/sendVerificationCode', {
phoneNumber: phoneNumber.value,
});
const response = await axios.get('/api/getVerificationCode');
if (response.status === 200) {
verificationCode.value = response.data.code;
ElMessage.success('验证码已发送');
verificationCodeImage.value = '/api/'+response.data.path; // 更新验证码图片路径
correctCode.value = response.data.code;
ElMessage.success('验证码已获取');
} else {
ElMessage.error('发送验证码失败，请稍后再试');
ElMessage.error('获取验证码失败，请稍后再试');
}
} catch (error) {
ElMessage.error('发送验证码失败，请稍后再试');
ElMessage.error('获取验证码失败，请稍后再试');
}
};
</script>
@ -77,10 +82,13 @@ const sendVerificationCode = async () => {
<label for="verificationCode">验证码</label>
<ElInput v-model="verificationCode" type="text" id="verificationCode" placeholder="请输入验证码" required>
<template #append>
<ElButton type="primary" @click="sendVerificationCode" class="verification-button">获取验证码</ElButton>
<ElButton type="primary" @click="getVerificationCode" class="verification-button">获取验证码</ElButton>
</template>
</ElInput>
</ElFormItem>
<ElFormItem v-if="verificationCodeImage">
<img :src="verificationCodeImage" alt="验证码" />
</ElFormItem>
<ElFormItem>
<ElButton type="primary" native-type="submit" class="register-button">注册</ElButton>
</ElFormItem>