How to verify each input with regex in Vue 3?

[YuniStudy]

Hello,
I created regex for the input (email, password_key), but no condition is taken into account. When I do a test and write a password with 1 letter, the form is still submitted.
But I would like to add regex for each input.
The logic should be that if the first input isn’t correct either “firstname” automatically I should get a color flag or message before the user moves on to another input. But I’m having trouble with vuejs.
how can I do ?

<template>
  <div class="Suscribe">
    <form
      
    >
      <div >
        <input type="text" placeholder="Prénom" v-model="firstname" />
      </div>
      <div class="form-group col-lg-5 pt-5">
        <input type="text" placeholder="Nom de famille" v-model="lastname" />
      </div>
      <div class="form-group col-lg-5 pt-5">
        <input
          type="text"
          placeholder="Email"
          v-model="email"
          v-on:keydown="regex = false"
        />
      </div>
      <div class="form-group col-lg-5 pt-5">
        <input
          type="password"
          placeholder="Mot de passe"
          v-model="password_key"
          v-on:keydown="regex = false"
        />
      </div>

      <div >
        <button type="submit" value="Submit" @click.prevent="submitForm">
          Suscribe
        </button>
      </div>
    </form>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "FormSignup",
  data() {
    return {
      firstname: "",
      lastname: "",
      email: "",
      password_key: "",
      isAdmin: "",
      msg: [],
    };
  },
  methods: {
    submitForm() {
      if (!this.email || !this.password_key) {
        return (this.regex = true);
      }
      const regexEmail =
        /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
      const regexpassword = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$/;
      if (
        regexEmail.test(this.email) ||
        regexpassword.test(this.password_key)
      ) {
        const dataUser = {
          firstname: this.firstname,
          lastname: this.lastname,
          email: this.email,
          password_key: this.password_key,
          isAdmin: this.isAdmin,
        };
        console.log(dataUser);
        axios
          .post("http://localhost:3000/api/auth/signup", dataUser)
          .then((response) => {
            console.log(response.data);
            this.$router.push("/login");
          })
          .catch((error) => {
            alert("Email exist");
            console.log(error);
          });
      } else {
        alert("Your information not working");
        this.regex = true;
      }
    },
  },
};
</script>

[lasjorg]

It should be && and not || for the email and password. Otherwise, if the email is valid it won’t check the password.

true || false
// true

true && false
// false