Pour un projet spécifique, j'ai dû utiliser iView, une bibliothèque d'interface utilisateur. Après quelques semianes d'utilisation, je constate qu'elle est aussi pratique qu'ElementUI. Cependant, j'ai rencontré des problèmes avec la validation de formulaires. Comment éviter les exceptions où la validation échoue de manière intermittente ?
« 1 » : Attribuez les propriétés :model = "donneesFormulaire" et :rules = "reglesValidation" ainsi que ref = "referenceFormulaire" à la balise <Form>
« 2 » : Pour chaque <FormItem> nécessitant une validation, définissez la propriété prop et créez les règles de validation correspondantes dans reglesValidation
« 3 » : Définissez chaque valeur à valider dans l'objet donneesFormulaire et liez-les aux champs input avec :model. Cette étape est essentielle car sans elle, la validation échoue même lorsque les valeurs sont modifiées
« 4 » : Lors de la soumissino du formulaire, utilisez la ref "referenceFormulaire" pour valider un champ spécifique. La fonction de validation prend en paramètre un callback qui retourne un Boolean indiquant le succès ou l'échec gererSoumission (nom) { this.$refs[nom].validate((valide) => { if (valide) { this.$Message.success('Succès!'); } else { this.$Message.error('Échec!'); } }) }
Ce sont les étapes de base pour la validation, mais le problème que j'ai rencontré est que iView valide par défaut les données comme des chaînes de caractères (string), ce qui cause des problèmes lorsque d'autres types de données sont utilisés. Les types de validation supportés par iView sont :
type: 'string', //type de validation par défaut dans iView
type: 'array',
type:'number'
type:'integer' //Doit être un nombre entier.
type:'float' //Doit être un nombre à virgule flottante.
type:'boolean'
type:'object' //Doit être un objet et pas un tableau.
type:'array' //Doit être un tableau selon Array.isArray.
type:'regexp' //Expression régulière
type: 'email',
type: 'date',
type:'url' //Doit être une URL valide.
enum: La valeur doit exister dans l'énumération.
hex: Doit être une valeur hexadécimale.
Pour plus de détails sur la validation dans iView, consultez : https://github.com/yiminghe/async-validator
Exemple modifié :
<template>
<Form ref="validationForm" :model="formulaire" :rules="regles" :label-width="80">
<FormItem label="Téléphone" prop="telephone">
<Input v-model="formulaire.telephone" placeholder="Numéro de téléphone"></Input>
</FormItem>
<FormItem label="Courriel" prop="courriel">
<Input v-model="formulaire.courriel" placeholder="Votre adresse email"></Input>
</FormItem>
<FormItem label="Ville" prop="ville">
<Select v-model="formulaire.ville" placeholder="Sélectionnez votre ville">
<Option value="paris">Paris</Option>
<Option value="lyon">Lyon</Option>
<Option value="marseille">Marseille</Option>
</Select>
</FormItem>
<FormItem label="Date">
<Row>
<Col span="11">
<FormItem prop="date">
<DatePicker type="date" placeholder="Choisissez une date" v-model="formulaire.date"></DatePicker>
</FormItem>
</Col>
<Col span="2" style="text-align: center">-</Col>
<Col span="11">
<FormItem prop="heure">
<TimePicker type="time" placeholder="Choisissez une heure" v-model="formulaire.heure"></TimePicker>
</FormItem>
</Col>
</Row>
</FormItem>
<FormItem label="Genre" prop="genre">
<RadioGroup v-model="formulaire.genre">
<Radio label="homme">Homme</Radio>
<Radio label="femme">Femme</Radio>
</RadioGroup>
</FormItem>
<FormItem label="Centres d'intérêt" prop="interets">
<CheckboxGroup v-model="formulaire.interets">
<Checkbox label="Lecture"></Checkbox>
<Checkbox label="Sport"></Checkbox>
<Checkbox label="Musique"></Checkbox>
<Checkbox label="Voyage"></Checkbox>
</CheckboxGroup>
</FormItem>
<FormItem label="Commentaires" prop="commentaires">
<Input v-model="formulaire.commentaires" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Entrez vos commentaires..."></Input>
</FormItem>
<FormItem>
<Button type="primary" @click="soumettreFormulaire('validationForm')">Envoyer</Button>
<Button @click="reinitialiser('validationForm')" style="margin-left: 8px">Réinitialiser</Button>
</FormItem>
</Form>
</template>
<script>
export default {
const validerTelephone = (regle, valeur, callback) => {
var regex = /^1[0-9]{10}/
if (valeur === '' || valeur === null) {
callback(new Error('Veuillez entrer un numéro de téléphone'))
} else if (!regex.test(valeur)) {
callback(new Error('Format de numéro de téléphone invalide'))
} else {
callback()
}
}
data () {
return {
formulaire: {
courriel: '',
ville: '',
genre: 'homme',
interets: [],
date: '',
heure: '',
commentaires: '',
telephone:''
},
regles: {
telephone: [
{
validator: validerTelephone,
required: true,
trigger: 'blur'
}
],
courriel: [
{ required: true, message: 'Le courriel ne peut pas être vide', trigger: 'blur' },
{ type: 'email', message: 'Format de courriel incorrect', trigger: 'blur' }
],
ville: [
{ required: true, message: 'Veuillez sélectionner une ville', trigger: 'change' }
],
genre: [
{ required: true, message: 'Veuillez sélectionner un genre', trigger: 'change' }
],
interets: [
{ required: true, type: 'array', min: 1, message: 'Sélectionnez au moins un centre d\'intérêt', trigger: 'change' },
{ type: 'array', max: 3, message: 'Maximum trois centres d\'intérêt', trigger: 'change' }
],
date: [
{ required: true, type: 'date', message: 'Veuillez sélectionner une date', trigger: 'change' }
],
heure: [
{ required: true, type: 'string', message: 'Veuillez sélectionner une heure', trigger: 'change' }
],
commentaires: [
{ required: true, message: 'Veuillez entrer une présentation personnelle', trigger: 'blur' },
{ type: 'string', min: 20, message: 'Minimum 20 caractères', trigger: 'blur' }
]
}
}
},
methods: {
soumettreFormulaire (nom) {
this.$refs[nom].validate((valide) => {
if (valide) {
this.$Message.success('Formulaire soumis avec succès!');
} else {
this.$Message.error('Le formulaire contient des erreurs!');
}
})
},
reinitialiser (nom) {
this.$refs[nom].resetFields();
}
}
}
</script>