En este artículo, tomamos el componente v-text-field en Vuetify como ejemplo para resumir el soporte de reglas de validación de formularios integrado de Vuetify.
Punto
Para agregar validación al campo, debemos hacer dos cosas:
- Hacer que el campo sea obligatorio
- Crea reglas de validación para campos
Considere el siguiente ejemplo:
required es un atributo introducido recientemente en HTML5. El atributo required especifica que los campos de entrada deben completarse antes de enviar el formulario.
Si se utiliza este atributo, el campo es obligatorio (o obligatorio).
[Nota] El atributo requerido es aplicable a los siguientes tipos de <input>: texto, búsqueda, url, teléfono, correo electrónico, contraseña, selectores de fecha, número, casilla de verificación, radio y archivo.
Analizando
El Vuetify oficial solo brinda brevemente una introducción básica a las reglas de propiedad (Prop) en el componente v-text-field, como se muestra en la figura a continuación, y no brinda un ejemplo de uso detallado:
Combinado con la experiencia existente en Internet, se puede concluir que la verificación de reglas de una pequeña cantidad de componentes de formulario básicos puede ser respaldada por el atributo requerido arriba y el atributo de reglas de propiedad en el componente Vuetify aquí. De hecho, el formato de uso ya se muestra en la primera figura.
Las reglas de verificación utilizadas anteriormente son las siguientes:
Ejemplo básico
Una versión más compleja y práctica del ejemplo anterior es la siguiente:
Luego, defina las siguientes reglas en los datos:
Operación de verificación y envío de formulario v
El componente v-form proporciona tres funciones relacionadas con la operación de verificación, y podemos acceder a ellas configurando ref en el componente. Por ejemplo, <v-form ref = "form">.
- this. $ refs.form.validate (): Verificará todas las entradas y devolverá si todas son válidas.
- this. $ refs.form.reset (): borrará todas las entradas y restablecerá el error de verificación.
- this. $ refs.form.resetValidation (): Simplemente restablezca la validación de entrada sin cambiar su estado.
Por ejemplo
<template>
<v-form
ref="form"
v-model="valid"
lazy-validation
>
<v-text-field
v-model="name"
:counter="10"
:rules="nameRules"
label="Name"
required
></v-text-field>
<v-text-field
v-model="email"
:rules="emailRules"
label="E-mail"
required
></v-text-field>
<v-select
v-model="select"
:items="items"
:rules="[v => !!v || 'Item is required']"
label="Item"
required
></v-select>
<v-checkbox
v-model="checkbox"
:rules="[v => !!v || 'You must agree to continue!']"
label="Do you agree?"
required
></v-checkbox>
<v-btn
:disabled="!valid"
color="success"
class="mr-4"
@click="validate"
>
Validate
</v-btn>
<v-btn
color="error"
class="mr-4"
@click="reset"
>
Reset Form
</v-btn>
<v-btn
color="warning"
@click="resetValidation"
>
Reset Validation
</v-btn>
</v-form>
</template>
<script>
export default {
data: () => ({
valid: true,
name: '',
nameRules: [
v => !!v || 'Name is required',
v => (v && v.length <= 10) || 'Name must be less than 10 characters',
],
email: '',
emailRules: [
v => !!v || 'E-mail is required',
v => /.+@.+\..+/.test(v) || 'E-mail must be valid',
],
select: null,
items: [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
],
checkbox: false,
}),
methods: {
validate () {
this.$refs.form.validate()
},
reset () {
this.$refs.form.reset()
},
resetValidation () {
this.$refs.form.resetValidation()
},
},
}
</script>Esquema de verificación de Vue recomendado: vee-validate
De acuerdo con mi búsqueda y análisis, después de una gran ola de búsqueda, la solución de verificación de la extensión de la biblioteca Vue que se ha movido a la parte superior de la lista es vee-validada. Además, esta biblioteca es un marco de verificación de Vue completo basado en plantillas que proporciona soporte completo para páginas web, y sigue de cerca la próxima versión de Vue. Es muy necesario para la investigación detallada y el uso en el desarrollo empresarial.
También hay una biblioteca de verificación ligera a nivel de formulario https://vuelidate.netlify.com/ Vuelidate, los lectores interesados pueden estudiar.
referencia
https://vuetifyjs.com/en/api/v-text-field/#props
https://www.jenniferbland.com/form-validation-with-vuetify-in-a-vue-app/
https://blog.csdn.net/weixin_43970743/article/details/99976701