:rules username, name and email

src/pages/RegisterPage.vue

@@ -18,8 +18,9 @@
                 type="text"
                 label="username"
                 :rules="[
-                  (val) => val.length >= 3 || 'Mínimo 3 caracteres',
-                  (val) => comprobarUsername?.length == 0 || 'Ya existe',
+                  (val) =>
+                    (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
+                  (val) => comprobarUsername || 'Ya existe en la BD',
                 ]"
               />
               <q-input
@@ -29,6 +30,10 @@
                 v-model="nombre"
                 type="text"
                 label="nombre completo"
+                :rules="[
+                  (val) =>
+                    (val != null && val.length >= 3) || 'Mínimo 3 caracteres',
+                ]"
               />
               <q-input
                 square
@@ -37,6 +42,13 @@
                 v-model="email"
                 type="email"
                 label="email"
+                :rules="[
+                  (val) =>
+                    (val != null && val.length >= 7) || 'Mínimo 7 caracteres',
+                  (val) =>
+                    comprobarEmail ||
+                    'No es un email válido o ya existe en la BD',
+                ]"
               />
               <q-input
                 square
@@ -58,6 +70,7 @@
           </q-card-section>
           <q-card-actions class="q-px-md">
             <q-btn
+              :disable="btnRegisterDisable()"
               unelevated
               color="light-green-7"
               size="lg"
@@ -94,8 +107,42 @@ const recibeDatos = () => {
   });
 };
 const comprobarUsername = computed(() => {
-  return usuarios.value?.filter((user) => user.username == username.value);
+  let filtro = usuarios.value?.filter(
+    (user) => user.username.toLowerCase() == username.value.trim().toLowerCase()
+  );
+  if (filtro.length == 0) {
+    return true;
+  }
+  return false;
 });
+
+const comprobarEmail = computed(() => {
+  const emailPattern =
+    /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/;
+  let filtro = usuarios.value?.filter(
+    (user) => user.email == email.value.trim()
+  );
+  if (emailPattern.test(email.value) && filtro.length == 0) {
+    return true;
+  }
+  return false;
+});
+
+const btnRegisterDisable = () => {
+  if (
+    username.value == null ||
+    username.value.length < 3 ||
+    !comprobarUsername.value ||
+    nombre.value == null ||
+    nombre.value.length < 3 ||
+    email.value == null ||
+    email.value.length < 7 ||
+    !comprobarEmail.value
+  ) {
+    return true;
+  }
+  return false;
+};
 </script>
 
 <style>