0

Este es mi código.

<input class="form-control" 
       type="number" id="book_number"
       data-vv-as="Book Number"
       name="Book Number"
       v-validate="'required|numeric|min_value:1|max_value:99999999999'"
       v-model="localManual.book_number"/> 

Para este código si pongo valores numéricos tales como: e, e+, ee+. Vee-validate no valida. Sin embargo cuando pruebo con type="text", Vee-validate valida correctamente.

1 respuesta 1

1

Encontré una solución creando un componente en vue donde uso un input de tipo number y le agrego un método capturando el keyDown y haciendo preventDefault() de los codigos de los caracteres que no quiero que se muestren en el input

<template>
    <input type="number"
           @keydown="validateEnter"
           v-model="localValue"
           :min="min"
           :max="max"/>
</template>

<script>
    export default {

        props: {
            value: [Number, String],
            min: {
               type: [Number, String],
              default: 1,
        },
        max: {
            type: [Number, String],
            default: 99999999999999999,
        }
    },

    data() {
        return {
            localValue: this.value,
            localMax: this.max,
            localMin: this.min,
        };
    },

    methods: {
        validateEnter(event) {
            // 107 => (Num Pad +) , 109 => (Num Pad -) , 190 => (.) , 69 => (e), 110 => (Num Pad .)
            var invalidEnter = [107, 109, 69, 190, 110].includes(event.keyCode);
            if (invalidEnter) {
                event.preventDefault();
            }
        }
    },

    watch: {
        localValue(newValue) {
            this.$emit('input', newValue);
        }
    },
};

Con el método validateEnter decido que key dejo teclear o no.

Y aquí un ejemplo de como usar el componente.

<number-up-down  data-vv-as="Book Number"
                 v-validate="'required|numeric|min_value:1|max_value:99999999999'"
                 class="form-control"
                 name="book_number"
                 id="book_number"
                 v-model="localManual.book_number">
</number-up-down>
2
  • No necesitas validar el max ya lo definistes como default en tu componente :) Commented el 15 may. 2019 a las 15:06
  • Exacto, sí, sería mejor usar los props si queremos definir un mix y un max así de esta forma min="40" max="500" por ejemplo, y así se evita las validaciones, de min_value y max_value. Commented el 15 may. 2019 a las 15:23

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