renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 错误信息提示调整

Browse Source
This commit is contained in:
rd
2025-09-08 17:19:56 +08:00
parent 0217d92bc0
commit b8a58091ad
2 changed files with 99 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
src/views/login/components/register-form/index.vue
View File

@ -10,24 +10,30 @@
</div>
<Form ref="formRef" :model="formData" :rules="formRules" auto-label-width class="w-320 form-wrap">
<FormItem name="mobile">
<Input v-model:value="formData.mobile" placeholder="请输入手机号" allowClear :maxlength="11" />
<Input
v-model:value="formData.mobile"
placeholder="请输入手机号"
allowClear
:maxlength="11"
@change="clearErrorMsg"
/>
</FormItem>
<FormItem name="password" class="password-form-item">
<Input.Password v-model:value="formData.password" placeholder="新密码">
<Input.Password v-model:value="formData.password" placeholder="新密码" @change="clearErrorMsg">
<template #iconRender="visible">
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
</template>
</Input.Password>
</FormItem>
<FormItem name="confirm_password" class="password-form-item">
<Input.Password v-model:value="formData.confirm_password" placeholder="密码确认">
<Input.Password v-model:value="formData.confirm_password" placeholder="密码确认" @change="clearErrorMsg">
<template #iconRender="visible">
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
</template>
</Input.Password>
</FormItem>
<FormItem name="captcha" class="captcha-form-item">
<Input v-model:value="formData.captcha" placeholder="请输入验证码" :maxlength="6">
<Input v-model:value="formData.captcha" placeholder="请输入验证码" :maxlength="6" @change="clearErrorMsg">
<template #suffix>
<div class="w-79px flex justify-center whitespace-nowrap">
<span
@ -140,9 +146,8 @@ const formRules = {
validator: (_rule, value) => {
if (!value) {
isLegalMobile.value = false;
return Promise.reject('手机号不能为空');
}
if (!/^1[3-9]\d{9}$/.test(value)) {
if (value && !/^1[3-9]\d{9}$/.test(value)) {
isLegalMobile.value = false;
return Promise.reject('手机号格式不正确');
} else {
@ -157,12 +162,12 @@ const formRules = {
{
required: true,
validator: (_rule, value) => {
if (!value) {
return Promise.reject('请输入新密码');
}
if (value.length < 6) {
return Promise.reject('密码长度不能小于6位');
}
// if (!value) {
// return Promise.reject('请输入新密码');
// }
// if (value.length < 6) {
// return Promise.reject('密码长度不能小于6位');
// }
if(formData.value.confirm_password) {
formRef.value.validateFields('confirm_password');
}
@ -175,12 +180,12 @@ const formRules = {
{
required: true,
validator: (_rule, value) => {
if (!value) {
return Promise.reject('请输入密码确认');
}
if (value.length < 6) {
return Promise.reject('密码长度不能小于6位');
}
// if (!value) {
// return Promise.reject('请输入密码确认');
// }
// if (value.length < 6) {
// return Promise.reject('密码长度不能小于6位');
// }
if (value !== formData.value.password) {
return Promise.reject('确认密码与设置的密码不同');
}
@ -190,20 +195,20 @@ const formRules = {
},
],
captcha: [
{
required: true,
validator: (_rule, value) => {
if (!value) {
return Promise.reject('请输入验证码');
}
if (!/^\d{6}$/.test(value)) {
return Promise.reject('验证码必须是6位数字');
} else {
return Promise.resolve();
}
},
trigger: ['blur'],
},
// {
// required: true,
// validator: (_rule, value) => {
// // if (!value) {
// // return Promise.reject('请输入验证码');
// // }
// if (value && !/^\d{6}$/.test(value)) {
// return Promise.reject('验证码必须是6位数字');
// } else {
// return Promise.resolve();
// }
// },
// trigger: ['blur'],
// },
],
};
@ -227,6 +232,10 @@ const disabledSubmitBtn = computed(() => {
return !isPassPassword.value || !hasCheck.value || !isLegalMobile.value || !formData.value.password.trim();
});
const clearErrorMsg = () => {
errMsg.value = '';
};
const validateField = (field) => {
formRef.value.validateFields(field);
};
@ -304,7 +313,7 @@ const handleSubmit = async () => {
submitting.value = true;
const _fn = isResetPassword.value ? postForgetPassword : postRegister;
const { code, data } = await _fn(formData.value);
const { code, data, message: errorInfo } = await _fn(formData.value);
if (code === 200) {
message.success(isResetPassword.value ? '重置成功' : '注册成功');
@ -329,7 +338,9 @@ const handleSubmit = async () => {
getProfileInfo();
}
} catch (error) {
// 错误信息会显示在输入框下方
if (error?.status === 400) {
errMsg.value = error.data?.message;
}
} finally {
submitting.value = false;
}