2023如何利用vue和Element-plus实现分步表单和表单校验

如何利用Vue和Element Plus实现分步表单和表单校验

在Web开发中，表单是非常常见的用户交互组件之一。而对于复杂的表单，我们常常需要进行分步填写以及表单校验的功能。本文将介绍如何利用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的表单组件和校验方法，我们可以很方便地对表单数据进行校验。