0
215
Vistas¿Cómo se pueden validar las entradas dentro de v-for?
Tengo this.userGroups
[ { "id": 46, "group_id": 38, "url": "1", "url_num": 1, "max_iteration": 2 }, { "id": 45, "group_id": 38, "url ": "2", "url_num": 1, "max_iteration": 2 }, { "id": 44, "group_id": 38, "url": "3", "url_num": 1, "max_iteration": 2 }, { "id": 43, "group_id": 38, "url": "4", "url_num": 1, "max_iteration": 2 } ]
<v-row v-for="(urlGroup, index) in urlGroups" :key="index"> <v-col cols="12" sm="6" md="3"> <v-text-field required v-model="urlGroup.url" label="URL" clear-icon="mdi-close-circle" clearable type="text" @click:clear="removeUrl(index)"></v-text-field> </v-col> </v-row>
requiredno parece funcionar porque todavía puedo enviar el formulario sin proporcionar ningún valor. Solía hacer esto en un solo campo de texto, pero ahora es dinámico, no tengo idea de cómo hacerlo.
url: [(v) => !!v || 'URL is required']¿Cómo puedo agregar una regla de validación a todos ellos para que se escriba la URL y se requiera?
1 Respuestas
Responde la pregunta0
La propiedad de rules de v-text-field acepta una serie de reglas, por lo que puede pasar una regla para hacer cumplir "requerido" y otra para validar la entrada de URL:
<v-text-field :rules="[rules.required, rules.url]"> const isValidUrl = value => { // https://stackoverflow.com/a/17773849/6277151 const urlRegex = /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi return urlRegex.test(value) } export default { data() { return { rules: { required: value => !!value || 'Required', url: value => isValidUrl(value) || 'Invalid URL', }, ⋮ } } } Para evitar que se v-form , puede deshabilitar el botón ENVIAR cuando el formulario no es válido, lo que se refleja en el value del formulario :
<v-form @submit="submit" v-model="formValid"> ⋮ <v-btn :disabled="!formValid" type="submit">Submit</v-btn> </v-form> export default { data() { return { formValid: false, ⋮ } }, methods: { submit() { if (!this.formValid) return // submit form here }, ⋮ } }