Как добавить способ проверки данных электронной почты и поля пароля в Vuejs?

#javascript #vue.js

Вопрос:

 < script >
  export default {
    data: () => ({
      email: "",
      password: "",
    }),
    methods: {
      validate() {
        if (this.email = "test" amp;amp; this.password = "test") {
          this.$router.push('/Instructions');
        } else {
          this.$router.push('/');
        }



      },
    },
  }; <
/script>

 <template>
  <v-container>
    <div style="text-align: center;margin-bottom: 15px;">
      <img src="../assets/images/LogoGirmiti.png" />
    </div>
    <v-form>
      <v-row>
        <v-col offset-md="4">
          <v-text-field
            v-model="email"
            type="email"
            placeholder="E-mail"
            rounded
            filled
            required
            style="width:400px;"
          ></v-text-field>
        </v-col>
      </v-row>
      <v-row>
        <v-col offset-md="4">
          <v-text-field
            v-model="password"
            type="password"
            placeholder="Password"
            required
            rounded
            filled
            style="width:400px;"
          ></v-text-field>
        </v-col>
       
      </v-row>
      <v-row>
        <v-col style="text-align: center">
          <v-btn color="success" class="mr-4" @click="validate"> Login </v-btn>
        </v-col>
      </v-row>
    </v-form>

  </v-container>
</template>

Как проверить поля электронной почты и пароля с некоторыми данными. например, в поле электронной почты после ввода «тест» и пароля «тест» только пользователь должен перейти на следующую страницу. иначе выдаст какое-нибудь сообщение об ошибке.

Я не знаю, что не так с приведенным ниже кодом, где без ввода каких-либо данных в поля, и нажмите кнопку, которую я могу перенаправить на следующий экран.

1. ты делаешь = то, что должен делать if (this.email === "test" amp;amp; this.password === "test") {

2. Спасибо. Это правильно, что я это пропустил ===

3. Привет, Рияз. Не рекомендуется проверять учетные данные в коде javascript. В этом случае вы можете использовать библиотеки, которые предоставляют вам возможность отправлять учетные данные пользователей на сервер. и сервер проверяет учетные данные. если они пройдут, сервер отправит токен клиенту. с помощью этого токена клиент делает следующий запрос к вашему api. Например, JWT-хорошее решение.

Ответ №1:

Я думаю , ты используешь Vuetify , не так ли? Вы можете использовать атрибут «правила» для v-text-field тегов.

Правила могут быть определены как массив возвращаемых условий booleans . См.: документация по правилам здесь.