fix(input): 优化输入框交互和验证逻辑

- 修改密码输入框增加 @change 事件处理,用于清除确认密码的验证信息- 验证码输入框增加 @focus 事件处理,用于清除错误状态和信息
- 登录和注册页面的错误信息显示进行样式统一和优化
-调整注册表单中同意条款的样式
This commit is contained in:
rd
2025-09-16 17:14:52 +08:00
parent b951114936
commit 1630481437
4 changed files with 23 additions and 5 deletions

View File

@ -14,7 +14,13 @@
<p class="cts mt-36px !color-#211F24 mb-24px">验证成功请更改密码</p>
<Form ref="formRef" :model="formData" :rules="formRules" auto-label-width class="w-348 form-wrap">
<FormItem name="password" class="password-form-item">
<Input.Password v-model:value="formData.password" placeholder="新密码" size="large" class="!h-48px">
<Input.Password
v-model:value="formData.password"
class="!h-48px"
placeholder="新密码"
size="large"
@change="onPasswordChange"
>
<template #iconRender="visible">
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
</template>
@ -26,6 +32,7 @@
placeholder="密码确认"
size="large"
class="!h-48px"
@change="onPasswordChange"
>
<template #iconRender="visible">
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
@ -146,6 +153,12 @@ const onCheckPass = (captcha) => {
formData.value.captcha = captcha;
};
const onPasswordChange = () => {
nextTick(() => {
formRef.value.clearValidate('confirm_password');
});
};
const getCaptcha = async () => {
try {
const { code, message: msg } = await postUpdatePasswordCaptcha();

View File

@ -9,6 +9,7 @@
:value="item.value"
:class="{ error: isError, fill: item.value }"
@input="handleInput(index, $event.target.value)"
@focus="handleFocus"
:maxlength="1"
placeholder=""
/>
@ -35,6 +36,10 @@ const errorMessage = ref('');
const isError = ref(false);
const inputRef = ref(null);
const handleFocus = (index) => {
isError.value = false;
errorMessage.value = '';
};
// 处理输入事件
const handleInput = (index, value) => {
if (!value) {

View File

@ -33,7 +33,7 @@
</div>
</template>
</Input>
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-show="errMsg">
<p class="color-#F64B31 text-12px font-400 h-20px lh-20px font-family-regular">
{{ errMsg }}
</p>
</FormItem>
@ -43,7 +43,7 @@
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
</template>
</Input.Password>
<p v-show="errMsg" class="color-#F64B31 h-20px text-12px font-400 lh-20px font-family-regular">
<p class="color-#F64B31 h-20px text-12px font-400 lh-20px font-family-regular">
{{ errMsg }}
</p>
</FormItem>

View File

@ -50,12 +50,12 @@
</div>
</template>
</Input>
<p class="color-#F64B31 text-12px font-400 lh-20px font-family-regular" v-show="errMsg">
<p class="color-#F64B31 text-12px font-400 lh-20px h-20px font-family-regular">
{{ errMsg }}
</p>
</FormItem>
<FormItem class="mt-52px">
<FormItem class="mt-32px">
<div class="text-12px flex justify-center items-center mb-16px">
<Checkbox v-model:checked="hasCheck" class="mr-8px"></Checkbox>
<span class="text-12px color-#737478 font-400 lh-20px font-family-regular"