0

Estoy trabajando sobre un proyecto con vue.js en quasar y necesito en un input solo permitir el ingreso de / además de números.

¿Cómo lo podría hacer?

Este es mi código:

<div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 col-xl-3 row q-pl-lg q-pr-lg">
    <div class = "caption">Código Temporada</div>
    <q-input 
        outlined
        dense 
        counter
        class="col-xs-11"                             
        float-label="Cod Temporada" 
        v-model.trim="cod_temporada" 
        maxlength="5" 
        ref="cod_temporada"
        :error="$v.cod_temporada.$error"
        :error-messages="codTemporadaErrors"
        @input="$v.cod_temporada.$touch()"
        @blur="$v.cod_temporada.$touch()"
        disable
        required>
    </q-input>
</div>
2
  • por si acaso, no se vio tu codigo! pero espero que lo comentado te ayude. 😎 Commented el 7 jun. 2021 a las 16:13
  • Hola por favor podrías editar tu pregunta y añadir un mejor contexto y el ejemplo? Así podrían ayudarte mejor, un saludo. Commented el 7 jun. 2021 a las 16:41

2 respuestas 2

3

Puedes usar internal-validation en donde mediante un el prop :rules del componente input puedes gestionar la validación de tu input

https://quasar.dev/vue-components/input#internal-validation

Un ejemplo:

const app = new Vue({
  el: '#app',
  data: {
    cod_temporada: '',
    inputRules: [
      (value) => /^[0-9|\/]*$/g.test(value) || 'Campo invalido',
    ]
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" type="text/css">



<div id="app">
   <q-input 
        outlined
        dense 
        counter
        class="col-xs-11"                             
        float-label="Cod Temporada" 
        v-model.trim="cod_temporada"
        :rules="inputRules"
        required>
    </q-input>
</div>

Acá simplemente se envía un arreglo de funciones donde cada función envía un valor booleano, si resulta falso se tiene como fallback un string que representa el mensaje de error, en el ejemplo añadí el regex correcto que verifica que solo se ingresen números y el caracter /

1
  • Muchas gracias me sirvio!
    – user224276
    Commented el 11 jun. 2021 a las 19:25
-1

Podrias utilizar algo asi:


input.oninput = (e) => {  
  const cursorPosition = input.selectionStart - 1;
  const hasInvalidCharacters = input.value.match(/[^0-9/]/);

  if (!hasInvalidCharacters) return;
  
  // Replace all non-digits:
  input.value = input.value.replace(/[^0-9/]/g, '');
  
  // Keep cursor position:
  input.setSelectionRange(cursorPosition, cursorPosition);
};

<input id="input" type="text" placeholder="Digits and forward slash only" />

el ejemplo viene de este link con una pregunta similar:

https://stackoverflow.com/questions/44875650/i-want-to-allow-only-numbers-and-forward-slash-in-a-html-input-field

Espero te ayude, saludos!

1
  • Parece que la persona pidió que fuese en vue, a de mas creo que no cabe una respuesta si no hay nada ilustrativo para trabajar, y aunque probablemente la respuesta sea aplicable, no se debe fomentar el mal uso de una pregunta y siempre alentar a editar o dar el mejor contexto posible, un saludo. Commented el 7 jun. 2021 a las 16:40

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.