سلام
من تو پروژه ی ویوم دو تا modal برای ورود و ثبت نام گزاشتم
و با vuelidate اعتبار سنجی کردم
ولی مشکل زمانی پیدا میشه که دو تا فرم رو دارم اعتبار سنجی میکنم
مثلا وقتی فرم ثبت نام رو اعتبارسنجی میکنم، فرم ورود هم اعتبارسنجی میشه
برای هر کدوم از اینپوت ها هم یه دیتا جدا ایجاد کردم:
data(){
return {
r_email: '',
r_password: '',
l_email: '',
l_password: '',
remember: false,
options: [
{text: 'Remember me!', value: 'remember'},
]
}
},
اینم validation:
validations: {
r_email: {
required,
email
},
r_password: {
required,
strongPassword
},
l_email: {
required,
email
},
l_password: {
required,
strongPassword
}
}
این register modal:
<!-- register-modal -->
<b-modal id="registerModal" hide-footer title="Sign up and put your snippets!">
<b-form @submit.prevent="register">
<div class="d-block">
<h3 class="text-center">Register</h3>
<b-form-group label="Email address:"
label-for="r-email"
description="We'll never share your email with anyone else.">
<b-form-input id="r-email"
type="email"
@blur.native="$v.r_email.$touch()"
v-model="r_email"
placeholder="Enter email"
:class="{'is-invalid': $v.r_email.$error, 'is-valid': !$v.r_email.$error && $v.r_email.$dirty}">
</b-form-input>
<div class="invalid-feedback" v-if="!$v.r_email.required && $v.r_email.$dirty">Email is require</div>
<div class="invalid-feedback" v-if="!$v.r_email.email && $v.r_email.$dirty">Enter correct email address</div>
</b-form-group>
<b-form-group label="Password:"
label-for="r-password">
<b-form-input id="r-password"
type="password"
@blur.native="$v.r_password.$touch()"
v-model="r_password"
placeholder="Enter Password"
:class="{'is-invalid': $v.r_password.$error, 'is-valid': !$v.r_password.$error && $v.r_password.$dirty}">
</b-form-input>
<div class="invalid-feedback" v-if="!$v.r_password.required && $v.r_password.$dirty">Password is require</div>
<div class="invalid-feedback" v-if="!$v.r_password.strongPassword && $v.r_password.$dirty">
Password must contains:
At least one upper case English letter,
At least one lower case English letter,
At least one digit character,
At least one special character
And minimum eight in character
</div>
</b-form-group>
</div>
<b-btn class="mt-3" type="submit" variant="outline-success" block>Register</b-btn>
</b-form>
</b-modal>-->
<!-- /register-modal -->
این login modal:
<!-- login-modal -->
<b-modal id="loginModal" hide-footer title="Sign in to your account">
<b-form @submit.prevent="login">
<div class="d-block">
<h3 class="text-center">Login</h3>
<b-form-group label="Email address:"
label-for="l-email">
<b-form-input id="l-email"
type="email"
@blur.native="$v.l_email.$touch()"
v-model="l_email"
placeholder="Enter email"
:class="{'is-invalid': $v.l_email.$error, 'is-valid': !$v.l_email.$error && $v.l_email.$dirty}">
</b-form-input>
<div class="invalid-feedback" v-if="!$v.l_email.required && $v.l_email.$dirty">Email is require</div>
<div class="invalid-feedback" v-if="!$v.l_email.email && $v.l_email.$dirty">Enter correct email address</div>
</b-form-group>
<b-form-group label="Password:"
label-for="l-password">
<b-form-input id="l-password"
type="password"
@blur.native="$v.l_password.$touch()"
v-model="l_password"
placeholder="Enter Password"
:class="{'is-invalid': $v.l_password.$error, 'is-valid': !$v.l_password.$error && $v.l_password.$dirty}">
</b-form-input>
<div class="invalid-feedback" v-if="!$v.l_password.required && $v.l_password.$dirty">Password is require</div>
<div class="invalid-feedback" v-if="!$v.l_password.strongPassword && $v.l_password.$dirty">
Password must contains:
At least one upper case English letter,
At least one lower case English letter,
At least one digit character,
At least one special character
And minimum eight in character
</div>
</b-form-group>
<b-form-group>
<b-form-checkbox-group v-model="remember" name="remember" :options="options">
</b-form-checkbox-group>
</b-form-group>
</div>
<b-btn class="mt-3" type="submit" variant="outline-primary" block>Login</b-btn>
</b-form>
</b-modal>
<!-- /login-modal -->
حل شد:
methods: {
register(){
this.$v.r_email.$touch();
this.$v.r_password.$touch();
if (!this.$v.r_email.$invalid || !this.$v.r_password.$invalid) {
alert('You are successfully registered');
}
},
login(){
this.$v.l_email.$touch();
this.$v.l_password.$touch();
if (!this.$v.l_email.$invalid || !this.$v.l_password.$invalid) {
alert('You are successfully logged in');
}
}
},
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟