<q-input v-model="userForm.mobile" type="text" label="Mobile" counter maxlength="10" color="info" lazy-rules :rules="[ (val) => (val && val.length > 0) || 'Mobile number is required', (val) => (typeof val !== number) || 'Mobile number should be valid', ]" />Estoy tratando de hacer 2 validaciones, pero esto no funciona, tratando de devolver un error si está vacío o no es un número. Realmente lo agradecería si alguien pudiera ayudar, gracias.
Parece que su flujo de validación es justo, pero escribió mal la palabra clave Number . Es muy recomendable definir sus métodos de validación en la sección de métodos.
Te escribí una muestra simple:
<template> <q-form @submit="submit"> <q-input counter lazy-rules type="text" label="Mobile" maxlength="10" color="info" mask="##########" :rules="[requiredRule, mobileRule]" v-model="userForm.mobile" /> <q-btn type="submit" label="Submit" /> </q-form> </template> <script> export default { name: 'BaseInputValidation', data() { return { userForm: { mobile: null, }, }; }, methods: { requiredRule(val) { if (!val) { return 'Mobile number is required'; } return true; }, mobileRule(val) { if (!/^\d{10}$/.test(val)) { return 'Mobile number should be valid'; } return true; }, submit() { // Do submit }, }, }; </script>Separo las reglas en métodos para aumentar la velocidad de renderizado. También puede fusionar funciones de reglas o definirlas en un archivo global para reutilizarlas en otro lugar.
Llené el accesorio de máscara para limitar el valor de entrada a una entrada de solo diez números.
Usé una expresión regular simple para verificar los números, es mejor reemplazarla por una mejor :-)