Utilisation basique du formulaire
conteneur el-form, lier les données via le conteneur
el-form-item de modèle , lier l'étiquette via l'étiquette Les
composants de formulaire lient les données dans le modèle via le v-model
<template>
<div id="app">
<el-form inline :model="data">
<el-form-item label="审批人">
<el-input v-model="data.user" placeholder="审批人"></el-input>
</el-form-item>
<el-form-item label="活动区域">
<el-select v-model="data.region" placeholder="活动区域">
<el-option label="区域一" value="shanghai"></el-option>
<el-option label="区域二" value="beijing"></el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">查询</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
data: {
user: 'sam',
region: '区域二'
}
}
},
methods: {
onSubmit() {
console.log(this.data)
}
}
}
</script>
Utilisation de base de la validation de formulaire
Le composant Form fournit la fonction de validation de formulaire, tant que vous transmettez les règles de validation convenues via la propriété rules et que vous définissez la propriété prop de l'élément Form-item sur le nom du champ qui doit être vérifié.
1. Définissez les règles de vérification, qui peuvent être liées à el-form ou el-form-item
data() {
const userValidator = (rule, value, callback) => {
if (value.length > 3) {
callback()
} else {
callback(new Error('用户名长度必须大于3'))
}
}
return {
data: {
user: 'sam',
region: '区域二'
},
rules: {
user: [
{
required: true, trigger: 'change', message: '用户名必须录入' },
{
validator: userValidator, trigger: 'change' }
]
}
}
}
2. Spécifiez l'attribut prop de el-form-item
<el-form-item label="审批人" prop="user">
<el-input v-model="data.user" placeholder="审批人" clearable></el-input>
</el-form-item>
Attributs liés à la validation de formulaire
hide-required-asterisk masque le
message-en-ligne du logo requis pour vérifier si le message est affiché sur une seule ligne
Utilisation avancée de la validation de formulaire
Utilisation 1: modifier dynamiquement les règles de vérification
1. Les règles ne contiennent qu'une seule règle de vérification
{
rules: {
user: [
{
required: true, trigger: 'change', message: '用户名必须录入' },
]
}
}
2. Ajouter des règles de manière dynamique
addRule() {
const userValidator = (rule, value, callback) => {
if (value.length > 3) {
this.inputError = ''
this.inputValidateStatus = ''
callback()
} else {
callback(new Error('用户名长度必须大于3'))
}
}
const newRule = [
...this.rules.user,
{
validator: userValidator, trigger: 'change' }
]
this.rules = Object.assign({
}, this.rules, {
user: newRule })
}
Utilisation 2: contrôler manuellement l'état de vérification
TIP
validate-status: état de validation, valeur d'énumération, quatre types:
—— succès: validation réussie ——
erreur: échec de la
validation—— validation: validation
—— (vide):
erreur non validée : message d'erreur personnalisé
1. Définissez l'attribut el-form-item
<el-form-item
label="用户名"
prop="user"
:error="error"
:validate-status="status"
>
<!-- ... -->
</el-form-item>
2. Statut personnalisé et erreur
showError() {
this.status = 'error'
this.error = '用户名输入有误'
},
showSuccess() {
this.status = 'success'
this.error = ''
},
showValidating() {
this.status = 'validating'
this.error = ''
}
Résolution d'attribut de formulaire
label-position: position de l'étiquette, valeur d'énumération, gauche et haut
de la largeur de l'étiquette: largeur de l'
étiquette suffixe d'étiquette: suffixe d'étiquette en
ligne: formulaire en ligne
désactivé: définissez tous les composants du formulaire dans le formulaire entier à désactiver, la priorité est inférieure à celle de le composant de formulaire lui-même a désactivé la
taille: définissez la taille du composant de formulaire