راکت
حل شده

مشکل در اعتبارسنجی دو فرم در یک صفحه

1 پاسخ

سلام
من تو پروژه ی ویوم دو تا 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 -->
ثبت پرسش جدید

پاسخ‌ها

1
مرتضی صبیحی
مرتضی صبیحی
@mortezasabihi

تخصص: Front-end developer

بهترین پاسخ

حل شد:

 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');
                }
            }
        },

شاید پاسخ شما همین‌جا باشد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام