fix(input): 优化输入框交互和验证逻辑
- 修改密码输入框增加 @change 事件处理,用于清除确认密码的验证信息- 验证码输入框增加 @focus 事件处理,用于清除错误状态和信息 - 登录和注册页面的错误信息显示进行样式统一和优化 -调整注册表单中同意条款的样式
This commit is contained in:
@ -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();
|
||||
|
||||
@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user