每当我尝试执行表单验证时,应用程序都会挂起。当尝试使用 vuelidate 应用程序工作但我们注销时,默认重定向到登录后,验证消息显示并且应用程序挂起。下面是没有第三方的自定义验证的示例代码。如何解决这个问题
<form novalidate class="form-con">
<ion-item
lines="none"
class="phone pdl-0 animate__animated animate__fadeInRight"
>
<ion-icon
:ios="mailOutline"
:md="mailOutline"
class="ft-14 icon-color"
></ion-icon>
<ion-input
class="auth-input-el"
type="email"
name="email"
placeholder="Email"
v-model="email"
:ionInput="emailOnChange()"
></ion-input>
</ion-item>
<div v-if="errors.email" class="validation-msg">
{{ errors.email }}
</div>
<ion-item
lines="none"
class="
password
pdl-0
fd-mt
animate__animated animate__fadeInRight
"
>
<ion-icon
:ios="lockClosedOutline"
:md="lockClosedOutline"
class="ft-14 icon-color"
></ion-icon>
<ion-input
class="auth-input-el"
type="text"
name="password"
placeholder="Password"
style="-webkit-text-security: disc"
v-model="password"
:ionInput="passwordOnChange()"
></ion-input>
</ion-item>
<div v-if="errors.password" class="validation-msg">
{{ errors.password }}
</div>
<div
class="
ion-padding ion-text-center
pb-0
fm-btn
animate__animated animate__fadeInRight
"
>
<ion-button
class="text-transform-none"
expand="block"
@click="login"
>
Login
</ion-button>
</div>
</form>
validateForm() {
this.errorCount = 0;
this.emailOnChange();
this.passwordOnChange();
return this.errorCount > 0 ? false : true;
},
emailOnChange() {
if (
this.formSubmitted &&
(!this.email || !this.constants.emailReg.test(this.email))
) {
this.errors.email = this.constants.email;
this.errorCount++;
} else this.errors.email = "";
},
passwordOnChange() {
if (this.formSubmitted) {
if (!this.password) {
this.errors.password = this.constants.password;
this.errorCount++;
} else this.errors.password = "";
}
},
login() {
this.formSubmitted = true;
if (!this.validateForm()) return;}