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