fix(input): 优化输入框交互和验证逻辑
- 修改密码输入框增加 @change 事件处理,用于清除确认密码的验证信息- 验证码输入框增加 @focus 事件处理,用于清除错误状态和信息 - 登录和注册页面的错误信息显示进行样式统一和优化 -调整注册表单中同意条款的样式
This commit is contained in:
@ -14,7 +14,13 @@
|
|||||||
<p class="cts mt-36px !color-#211F24 mb-24px">验证成功,请更改密码</p>
|
<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">
|
<Form ref="formRef" :model="formData" :rules="formRules" auto-label-width class="w-348 form-wrap">
|
||||||
<FormItem name="password" class="password-form-item">
|
<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">
|
<template #iconRender="visible">
|
||||||
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
|
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
|
||||||
</template>
|
</template>
|
||||||
@ -26,6 +32,7 @@
|
|||||||
placeholder="密码确认"
|
placeholder="密码确认"
|
||||||
size="large"
|
size="large"
|
||||||
class="!h-48px"
|
class="!h-48px"
|
||||||
|
@change="onPasswordChange"
|
||||||
>
|
>
|
||||||
<template #iconRender="visible">
|
<template #iconRender="visible">
|
||||||
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
|
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
|
||||||
@ -146,6 +153,12 @@ const onCheckPass = (captcha) => {
|
|||||||
formData.value.captcha = captcha;
|
formData.value.captcha = captcha;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onPasswordChange = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
formRef.value.clearValidate('confirm_password');
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
const getCaptcha = async () => {
|
const getCaptcha = async () => {
|
||||||
try {
|
try {
|
||||||
const { code, message: msg } = await postUpdatePasswordCaptcha();
|
const { code, message: msg } = await postUpdatePasswordCaptcha();
|
||||||
|
|||||||
@ -9,6 +9,7 @@
|
|||||||
:value="item.value"
|
:value="item.value"
|
||||||
:class="{ error: isError, fill: item.value }"
|
:class="{ error: isError, fill: item.value }"
|
||||||
@input="handleInput(index, $event.target.value)"
|
@input="handleInput(index, $event.target.value)"
|
||||||
|
@focus="handleFocus"
|
||||||
:maxlength="1"
|
:maxlength="1"
|
||||||
placeholder=""
|
placeholder=""
|
||||||
/>
|
/>
|
||||||
@ -35,6 +36,10 @@ const errorMessage = ref('');
|
|||||||
const isError = ref(false);
|
const isError = ref(false);
|
||||||
const inputRef = ref(null);
|
const inputRef = ref(null);
|
||||||
|
|
||||||
|
const handleFocus = (index) => {
|
||||||
|
isError.value = false;
|
||||||
|
errorMessage.value = '';
|
||||||
|
};
|
||||||
// 处理输入事件
|
// 处理输入事件
|
||||||
const handleInput = (index, value) => {
|
const handleInput = (index, value) => {
|
||||||
if (!value) {
|
if (!value) {
|
||||||
|
|||||||
@ -33,7 +33,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Input>
|
</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 }}
|
{{ errMsg }}
|
||||||
</p>
|
</p>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
@ -43,7 +43,7 @@
|
|||||||
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
|
<img :src="visible ? icon2 : icon1" width="20" height="20" class="cursor-pointer" />
|
||||||
</template>
|
</template>
|
||||||
</Input.Password>
|
</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 }}
|
{{ errMsg }}
|
||||||
</p>
|
</p>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|||||||
@ -50,12 +50,12 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
</Input>
|
</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 }}
|
{{ errMsg }}
|
||||||
</p>
|
</p>
|
||||||
</FormItem>
|
</FormItem>
|
||||||
|
|
||||||
<FormItem class="mt-52px">
|
<FormItem class="mt-32px">
|
||||||
<div class="text-12px flex justify-center items-center mb-16px">
|
<div class="text-12px flex justify-center items-center mb-16px">
|
||||||
<Checkbox v-model:checked="hasCheck" class="mr-8px"></Checkbox>
|
<Checkbox v-model:checked="hasCheck" class="mr-8px"></Checkbox>
|
||||||
<span class="text-12px color-#737478 font-400 lh-20px font-family-regular"
|
<span class="text-12px color-#737478 font-400 lh-20px font-family-regular"
|
||||||
|
|||||||
Reference in New Issue
Block a user