Uso básico de VeeValidate 3.x

VeeValidate es un complemento de validación de formularios liviano con reglas de validación integradas enriquecidas y avisos de error, y es muy fácil de ampliar. La siguiente es una breve introducción a su uso.

Plantilla

Script

ValidationProvider encontrará automáticamente el cuadro de entrada con v-model, :value en sus nodos descendientes y lo marcará. La etiqueta especifica el elemento html que se representa en . nombre especifica el nombre del campo. El nombre también se puede utilizar para configurar la versión multilingüe del nombre del campo. Si no se proporciona ningún nombre para ValidationProvider, el nombre del campo toma de forma predeterminada el atributo de identificación o nombre del cuadro de entrada. reglas especifica reglas de validación y aplica múltiples reglas separadas por |. vee-validate tiene muchas reglas de validación integradas y también puede personalizar las reglas según el alcance.

Puede haber muchos cuadros de entrada idénticos en un proyecto, por lo que para que las reglas de validación sean válidas en todos los cuadros de entrada, puede definir todas las reglas de validación en un archivo separado y luego en main.js introducirlas en

utils/veevalidate.js

El primer parámetro es el nombre de la regla y el segundo parámetro es el patrón de la regla. Si desea definir el cuerpo del mensaje de error mientras define la regla, puede escribirlo así

Las reglas personalizadas admiten el paso de parámetros, por ejemplo, reglas="required|contraseña: 6, 18" significa aplicar el la regla requiere y contraseña. La segunda regla pasa dos parámetros a la regla. La segunda regla pasa dos parámetros, que deben declararse en params

vee-validate proporciona un método de localización para configurar la versión del idioma

También puede configurar la versión del idioma y cargar el mensaje en este contexto al mismo tiempo

El nombre del campo predeterminado es el atributo de nombre de ValidationProvider, puede configurar versiones en otros idiomas a través del nombre

El mensaje predeterminado es inglés, Puede configurar el mensaje para que cuando cambie de idioma, se muestre un mensaje de error en el idioma apropiado. .zh.messages se utiliza para cargar mensajes de error integrados de vee-validate. {_field_} es un marcador de posición que será reemplazado por el valor del atributo de nombre de ValidationProvider

vee-validate proporciona opciones de campo que le permiten definir diferentes mensajes de error para cada regla en el campo

p>

Si está creando diferentes versiones de su aplicación para diferentes idiomas, no es una buena idea importar toda la información a la vez. Importar todos los mensajes a la vez obviamente no es una buena opción, puedes usar la importación dinámica en su lugar

Al enviar un formulario, debes validar todo el formulario, debes usar el componente ValidationObserver

Plantilla

Script

vee-validate proporciona cuatro opciones para activar la validación.