So verwenden Sie vue und Element-plus zur schrittweisen Implementierung von Formularen und zur Formularüberprüfung

So verwenden Sie Vue und Element Plus, um Schritt-für-Schritt-Formulare und Formularüberprüfungen zu implementieren

In der Webentwicklung sind Formulare eine der häufigsten Benutzerinteraktionskomponenten. Bei komplexen Formularen müssen wir häufig schrittweise Ausfüll- und Formularüberprüfungsfunktionen durchführen. In diesem Artikel wird erläutert, wie Sie mit dem Vue- und Element Plus-Framework diese beiden Funktionen erreichen.

1. Schritt-für-Schritt-Formular

Beim Schritt-für-Schritt-Formular wird ein großes Formular in mehrere kleine Schritte unterteilt, und Benutzer müssen die Schritte entsprechend den Schritten ausfüllen. Wir können die Komponentisierungs- und Routingfunktionen von Vue nutzen, um diese Funktion zu erreichen.

Zuerst müssen wir eine übergeordnete Komponente FormStep erstellen, um das gesamte Schritt-für-Schritt-Formular darzustellen. In dieser Komponente müssen wir Vue Router verwenden, um Routing-Sprünge zwischen verschiedenen Schritten zu verwalten.

<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>

Im obigen Code definieren wir ein Datenobjekt, das den Index currentStep des aktuellen Schritts und die Konfigurationsschritte jedes Schritts enthält, einschließlich des Titels und der entsprechenden Komponenten jedes Schritts.

Als nächstes müssen wir die Komponenten jedes Schritts definieren. Nehmen Sie StepOne als Beispiel:

<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>

Im obigen Code verwenden wir die Formularkomponenten el-form und el-form-item von Element Plus und verwenden die V-Model-Anweisung, um den Wert des Eingabefelds bidirektional an das zu binden Daten in der Komponente.

Ähnlich können wir StepTwo- und StepThree-Komponenten erstellen, die ihre jeweiligen Formularelemente enthalten.

Als nächstes müssen wir die entsprechenden Routing-Regeln in der Routing-Konfiguration definieren. Konfigurieren Sie das Routing in 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')

An diesem Punkt haben wir die schrittweise Formularerstellung abgeschlossen. Benutzer können das Formular entsprechend den Schritten ausfüllen und über die Schaltflächen „Zurück“ und „Weiter“ zwischen den Schritten wechseln.

2. Formularüberprüfung

In der tatsächlichen Entwicklung müssen wir häufig die vom Benutzer übermittelten Formulardaten überprüfen, um sicherzustellen, dass die Eingabedaten den erwarteten Regeln entsprechen. Element Plus bietet eine Fülle von Methoden und Komponenten zur Formularüberprüfung, mit denen wir die Überprüfung problemlos durchführen können.

Zuerst müssen wir Validierungsregeln in der Formularkomponente definieren. Nehmen Sie StepOne als Beispiel:

<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>

Im obigen Code legen wir den Feldnamen über das Prop-Attribut in el-form-item fest und definieren entsprechende Überprüfungsregeln für jedes Feld. Das gesamte Formular wird durch die Methode $refs.form.validate überprüft.

Als nächstes müssen wir die Methode „validateForm“ im Click-Ereignis der Schaltfläche „Senden“ aufrufen, um eine Formularüberprüfung durchzuführen:

<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) {
      // 校验未通过，不提交表单数据
    }
  }
}

Mit dem obigen Code können wir die Formulardaten überprüfen, bevor wir das Formular absenden, und zwar nur, wenn die Überprüfung erfolgreich ist einreichen.

Zusammenfassung

In diesem Artikel wird erläutert, wie Sie mit Vue und Element Plus schrittweise Formular- und Formularüberprüfungsfunktionen implementieren. Durch die Verwendung von Vue Router und der Idee der Komponentisierung können wir schrittweise Formularlayouts und Sprünge implementieren. Mithilfe der Formularkomponenten und Überprüfungsmethoden von Element Plus können wir Formulardaten problemlos überprüfen.

Im Folgenden erfahren Sie, wie Sie mit Vue und Element Plus Schritt-für-Schritt-Formulare und Formularüberprüfungen implementieren. Ich hoffe, es wird Ihnen hilfreich sein.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie vue und Element-plus zur schrittweisen Implementierung von Formularen und zur Formularüberprüfung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!