如何利用vue和Element-plus實作逐步表單和表單校驗

如何利用Vue和Element Plus實作逐步表單和表單校驗

在網路開發中，表單是非常常見的使用者互動元件之一。而對於複雜的表單，我們常常需要進行逐步填寫以及表單校驗的功能。本文將介紹如何利用Vue和Element Plus框架來實現這兩個功能。

一、逐步表單

逐步表單指的是將一個大表單分割為幾個小步驟，使用者需要依照步驟填寫。我們可以利用Vue的組件化和路由功能來實現這項功能。

首先，我們需要建立一個父元件FormStep，用於渲染整個逐步表單。在這個元件中，我們需要使用Vue Router來管理各個步驟之間的路由跳轉。

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

在上述程式碼中，我們定義了一個data對象，包含了目前步驟的索引currentStep和各個步驟的配置steps，其中包括了每個步驟的標題和對應的元件。

接下來，我們需要定義各個步驟的元件。以StepOne為例：

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

在上述程式碼中，我們使用了Element Plus的表單元件el-form和el-form-item，並透過v-model指令將輸入框的值與元件內的資料進行雙向綁定。

類似地，我們可以建立StepTwo和StepThree元件，其中包含了各自的表單項目。

接下來，我們需要在路由配置中定義對應的路由規則。在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')

至此，我們已經完成了逐步表單的建置。使用者可以按照步驟填寫表單，並透過上一個步驟和下一步按鈕進行步驟的切換。

二、表單校驗

在實際開發中，我們常常需要對使用者提交的表單資料進行校驗，確保輸入的資料符合預期的規則。 Element Plus提供了豐富的表單校驗方法和元件，我們可以輕鬆進行校驗。

首先，我們需要在表單元件中定義校驗規則。以StepOne為例：

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

在上述程式碼中，我們透過在el-form-item中的prop屬性設定欄位名，為每個欄位定義了對應的校驗規則。透過$refs.form.validate方法實現整個表單的校驗。

接下來，我們需要在提交按鈕的點擊事件中呼叫validateForm方法進行表單校驗：

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

透過上述程式碼，我們可以實作在提交表單之前對表單資料進行校驗，只有當校驗通過時才會提交。

總結

本文介紹如何利用Vue和Element Plus來實現逐步表單和表單校驗的功能。透過使用Vue Router和元件化的思想，我們可以實現逐步表單的佈局和跳躍。而利用Element Plus的表單元件和校驗方法，我們可以很方便地對表單資料進行校驗。

以上就是如何利用Vue和Element Plus實現逐步表單和表單校驗的內容，希望對你有幫助。

以上是如何利用vue和Element-plus實作逐步表單和表單校驗的詳細內容。更多資訊請關注PHP中文網其他相關文章！