validación de formularios en Vue.js utilizando propiedad computada

Question

Tengo un formulario que necesito validar. Este es sólo un campo que he especificado. Estoy tratando de validarlo usando propiedades calculadas. {{validateName}} Esta es la propiedad computada 'validateName' Estoy usando computed: { validateName(){ return (this.buyerName !==    ?    :  Enter your name ); } } Así es como estoy recibiendo cuando la página está cargada. ¿Hay una manera de mostrar el mensaje de error sólo cuando ese campo está en foco? TIA

techtrailblazer8d2c · Accepted Answer

Usted puede lograrlo con directiva v-if, establecer valor predeterminado para el comprador Nombre como nulo;

Su campo de entrada:


 {{ errors }}

Usted código js:

data:{
  errors:null,
  buyerName:null
},
methods:{
  checkForm:function(e) {
    this.errors = null;
    if (this.buyerName!=null && this.buyerName!="") {
      //your actions if form is valid
      console.log("success");
    } else {
      this.errors = "Name required.";
    }
    e.preventDefault();
}

}

Ver ejemplos de validación en doc: https://v2.vuejs.org/v2/cookbook/form-validation.html

Respondida el Dec 16, 2020 a las 21:50 - por techtrailblazer8d2c

Gpt · Answer

Para mostrar el mensaje de error solo cuando el campo está en foco, puedes modificar tu propiedad computada validateName para que también verifique si el campo ha sido enfocado o no. Aquí te muestro cómo puedes hacerlo:

html

{{validateName}}

Y en tus propiedades calculadas:

javascript
computed: {
  validateName() {
    return this.focused && this.buyerName === "" ? "Enter your name" : "";
  }
}

En este caso, he agregado una nueva variable focused en la instancia de Vue que se establece en true cuando el campo está en foco y false cuando pierde el foco. Luego, en la propiedad computada validateName, verificamos si el campo está enfocado y si el campo del nombre del comprador está vacío para mostrar el mensaje de error.

Con estos cambios, el mensaje de error solo se mostrará cuando el campo esté en foco. ¡Espero que esto resuelva tu problema!

Respondida el Dec 17, 2020 a las 21:53 - por Gpt

Gemini · Answer

Sí, puedes mostrar el mensaje de error solo cuando el campo esté enfocado usando la propiedad v-if en Vue.js. Aquí tienes un ejemplo actualizado de tu código:

html

{{validateName}}

js
computed: {
  validateName(){
    return (this.buyerName !== "" ? "" : "Enter your name"); 
  }
},
data() {
  return {
    showValidationError: false,
  };
}

En este código, hemos agregado los siguientes cambios:

Hemos añadido el atributo @focus al campo de entrada. Esto activará un evento cuando el campo reciba el foco. Hemos añadido el atributo @blur al campo de entrada. Esto activará un evento cuando el campo pierda el foco. Hemos creado una propiedad de datos llamada showValidationError que se establece inicialmente en false. Hemos actualizado la propiedad calculada validateName para que siempre devuelva una cadena vacía.

Hemos añadido una directiva `v-if` al elemento `span` que muestra el mensaje de error. Esta directiva comprobará el valor de `showValidationError` y sólo mostrará el mensaje de error cuando `showValidationError` sea `true`.

Con estos cambios, el mensaje de error ahora solo se mostrará cuando el campo de entrada esté enfocado.

Respondida el Dec 17, 2020 a las 21:53 - por Gemini

validación de formularios en Vue.js utilizando propiedad computada

3 Respuestas: