Comment utiliser vue et Element-plus pour implémenter des formulaires étape par étape et une vérification de formulaire

Comment utiliser Vue et Element Plus pour implémenter des formulaires étape par étape et une vérification de formulaire

Dans le développement Web, les formulaires sont l'un des composants d'interaction utilisateur les plus courants. Pour les formulaires complexes, nous devons souvent effectuer des fonctions de remplissage et de vérification de formulaire étape par étape. Cet article expliquera comment utiliser les frameworks Vue et Element Plus pour réaliser ces deux fonctions.

1. Formulaire étape par étape

Le formulaire étape par étape fait référence à la division d'un grand formulaire en plusieurs petites étapes, et les utilisateurs doivent remplir les étapes en fonction des étapes. Nous pouvons utiliser les capacités de composantisation et de routage de Vue pour obtenir cette fonctionnalité.

Tout d'abord, nous devons créer un composant parent FormStep pour afficher l'intégralité du formulaire étape par étape. Dans ce composant, nous devons utiliser Vue Router pour gérer les sauts de routage entre les différentes étapes.

<template>
  <div>
    <router-view></router-view>
    <el-steps :active="currentStep" align-center>
      <el-step v-for="(item, index) in steps" :key="index" :title="item.title"></el-step>
    </el-steps>
    <el-button type="primary" @click="prevStep" v-show="currentStep > 0">上一步</el-button>
    <el-button type="primary" @click="nextStep" v-show="currentStep < steps.length - 1">下一步</el-button>
    <el-button type="success" @click="submit" v-show="currentStep === steps.length - 1">提交</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentStep: 0, // 当前所在步骤
      steps: [
        { title: '步骤一', component: StepOne },
        { title: '步骤二', component: StepTwo },
        { title: '步骤三', component: StepThree }
      ]
    }
  },
  
  methods: {
    prevStep() {
      this.currentStep--
    },
    
    nextStep() {
      this.currentStep++
    },
    
    submit() {
      // 提交表单数据
    }
  },
  
  components: {
    StepOne,
    StepTwo,
    StepThree
  }
}
</script>

Dans le code ci-dessus, nous définissons un objet de données, qui contient l'index currentStep de l'étape en cours et les étapes de configuration de chaque étape, qui incluent le titre et les composants correspondants de chaque étape.

Ensuite, nous devons définir les composants de chaque étape. Prenons StepOne comme exemple :

<template>
  <div>
    <el-form>
      <el-form-item label="姓名">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="年龄">
        <el-input v-model="age"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: '',
      age: ''
    }
  }
}
</script>

Dans le code ci-dessus, nous utilisons les composants de formulaire el-form et el-form-item d'Element Plus, et utilisons l'instruction v-model pour lier de manière bidirectionnelle la valeur de la zone de saisie au données dans le composant Certainement.

De même, nous pouvons créer des composants StepTwo et StepThree, qui contiennent leurs éléments de formulaire respectifs.

Ensuite, nous devons définir les règles de routage correspondantes dans la configuration de routage. Configurez le routage dans main.js :

import Vue from 'vue'
import VueRouter from 'vue-router'
import FormStep from './components/FormStep'

Vue.use(VueRouter)

const routes = [
  { path: '/', component: FormStep }
]

const router = new VueRouter({
  mode: 'history',
  routes
})

new Vue({
  router
}).$mount('#app')

À ce stade, nous avons terminé la construction du formulaire étape par étape. Les utilisateurs peuvent remplir le formulaire en fonction des étapes et basculer entre les étapes via les boutons précédent et suivant.

2. Vérification du formulaire

Dans le développement réel, nous devons souvent vérifier les données du formulaire soumises par l'utilisateur pour garantir que les données saisies sont conformes aux règles attendues. Element Plus fournit une multitude de méthodes et de composants de vérification de formulaire, que nous pouvons facilement effectuer.

Tout d'abord, nous devons définir des règles de validation dans le composant formulaire. Prenons StepOne comme exemple :

<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules">
      <el-form-item label="姓名" prop="name" :rules="[{ required: true, message: '请输入姓名' }]">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model.number="form.age"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: '',
        age: null
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        age: [
          { type: 'number', required: true, message: '请输入年龄', trigger: 'blur' },
          { type: 'number', min: 18, max: 60, message: '年龄必须在18到60之间', trigger: 'blur' }
        ]
      }
    }
  },
  
  methods: {
    validateForm() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          if (valid) {
            resolve()
          } else {
            reject()
          }
        })
      })
    }
  }
}
</script>

Dans le code ci-dessus, nous définissons le nom du champ via l'attribut prop dans el-form-item et définissons les règles de vérification correspondantes pour chaque champ. L'intégralité du formulaire est vérifiée via la méthode $refs.form.validate.

Ensuite, nous devons appeler la méthode validateForm en cas de clic sur le bouton de soumission pour la vérification du formulaire :

<el-button type="success" @click="submit" v-show="currentStep === steps.length - 1">提交</el-button>

methods: {
  async submit() {
    try {
      await this.$refs.form.validateForm()
      // 校验通过，提交表单数据
    } catch (error) {
      // 校验未通过，不提交表单数据
    }
  }
}

Grâce au code ci-dessus, nous pouvons vérifier les données du formulaire avant de soumettre le formulaire, et seulement lorsque la vérification réussit. Soumettra .

Résumé

Cet article explique comment utiliser Vue et Element Plus pour implémenter des fonctions de formulaire et de vérification de formulaire étape par étape. En utilisant Vue Router et l'idée de composantisation, nous pouvons implémenter une disposition de formulaire et des sauts étape par étape. Grâce aux composants de formulaire et aux méthodes de vérification d'Element Plus, nous pouvons facilement vérifier les données du formulaire.

Ce qui précède explique comment utiliser Vue et Element Plus pour implémenter des formulaires étape par étape et une vérification de formulaire. J'espère que cela vous sera utile.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!