How to use vue and Element-plus to implement step-by-step forms and form verification

How to use Vue and Element Plus to implement step-by-step forms and form verification

In web development, forms are one of the most common user interaction components. For complex forms, we often need to perform step-by-step filling and form verification functions. This article will introduce how to use Vue and Element Plus framework to achieve these two functions.

1. Step-by-step form

The step-by-step form refers to dividing a large form into several small steps, and users need to fill in the steps according to the steps. We can use Vue's componentization and routing capabilities to achieve this functionality.

First, we need to create a parent component FormStep to render the entire step-by-step form. In this component, we need to use Vue Router to manage routing jumps between various steps.

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

In the above code, we define a data object, which contains the index currentStep of the current step and the configuration steps of each step, including the title and corresponding components of each step.

Next, we need to define the components of each step. Take StepOne as an example:

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

In the above code, we use the form components el-form and el-form-item of Element Plus, and use the v-model instruction to compare the value of the input box with the value in the component. Data is two-way bound.

Similarly, we can create StepTwo and StepThree components, which contain their respective form items.

Next, we need to define the corresponding routing rules in the routing configuration. Configure 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')

At this point, we have completed the step-by-step form construction. Users can fill in the form according to the steps and switch between steps through the previous and next buttons.

2. Form verification

In actual development, we often need to verify the form data submitted by the user to ensure that the input data conforms to the expected rules. Element Plus provides a wealth of form verification methods and components, which we can easily perform verification.

First, we need to define validation rules in the form component. Take StepOne as an example:

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

In the above code, we set the field name through the prop attribute in el-form-item and define corresponding verification rules for each field. The entire form is verified through the $refs.form.validate method.

Next, we need to call the validateForm method in the click event of the submit button for form verification:

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

Through the above code, we can verify the form data before submitting the form. , it will be submitted only when the verification passes.

Summary

This article introduces how to use Vue and Element Plus to implement step-by-step form and form verification functions. By using Vue Router and the idea of ​​componentization, we can implement step-by-step form layout and jumps. Using Element Plus' form components and verification methods, we can easily verify form data.

The above is how to use Vue and Element Plus to implement step-by-step forms and form verification. I hope it will be helpful to you.

The above is the detailed content of How to use vue and Element-plus to implement step-by-step forms and form verification. For more information, please follow other related articles on the PHP Chinese website!