Cara menggunakan vue dan Element-plus untuk melaksanakan borang langkah demi langkah dan pengesahan borang

Cara menggunakan Vue dan Element Plus untuk melaksanakan borang langkah demi langkah dan pengesahan borang

Dalam pembangunan web, borang ialah salah satu komponen interaksi pengguna yang paling biasa. Untuk borang yang kompleks, kita selalunya perlu melaksanakan pengisian langkah demi langkah dan fungsi pengesahan borang. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue dan Element Plus untuk mencapai kedua-dua fungsi ini.

1. Borang langkah demi langkah

Borang langkah demi langkah merujuk kepada membahagikan borang besar kepada beberapa langkah kecil, dan pengguna perlu mengisi langkah mengikut langkah. Kita boleh menggunakan keupayaan komponenisasi dan penghalaan Vue untuk mencapai fungsi ini.

Pertama, kita perlu mencipta komponen induk FormStep untuk menghasilkan keseluruhan borang langkah demi langkah. Dalam komponen ini, kita perlu menggunakan Penghala Vue untuk mengurus lompatan penghalaan antara pelbagai langkah.

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

Dalam kod di atas, kami mentakrifkan objek data, yang mengandungi indeks semasaLangkah langkah semasa dan langkah konfigurasi setiap langkah, yang merangkumi tajuk dan komponen yang sepadan bagi setiap langkah.

Seterusnya, kita perlu menentukan komponen setiap langkah. Ambil StepOne sebagai contoh:

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

Dalam kod di atas, kami menggunakan komponen bentuk el-form dan el-form-item Element Plus, dan menggunakan arahan model-v untuk mengikat nilai kotak input secara dwiarah ke data dalam komponen sudah tentu.

Begitu juga, kita boleh membuat komponen StepTwo dan StepThree, yang mengandungi item borang masing-masing.

Seterusnya, kita perlu menentukan peraturan penghalaan yang sepadan dalam konfigurasi penghalaan. Konfigurasikan penghalaan dalam 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')

Pada ketika ini, kami telah menyelesaikan pembinaan borang langkah demi langkah. Pengguna boleh mengisi borang mengikut langkah dan bertukar antara langkah melalui butang sebelumnya dan seterusnya.

2. Pengesahan borang

Dalam pembangunan sebenar, kami selalunya perlu mengesahkan data borang yang diserahkan oleh pengguna untuk memastikan data input mematuhi peraturan yang diharapkan. Element Plus menyediakan pelbagai kaedah dan komponen pengesahan borang, yang boleh kami lakukan pengesahan dengan mudah.

Pertama, kita perlu mentakrifkan peraturan pengesahan dalam komponen borang. Ambil StepOne sebagai contoh:

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

Dalam kod di atas, kami menetapkan nama medan melalui atribut prop dalam el-form-item dan menentukan peraturan pengesahan yang sepadan untuk setiap medan. Keseluruhan borang disahkan melalui kaedah $refs.form.validate.

Seterusnya, kami perlu memanggil kaedah validateForm sekiranya klik butang hantar untuk melaksanakan pengesahan borang:

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

Melalui kod di atas, kami boleh mengesahkan data borang sebelum menyerahkan borang, dan hanya apabila pengesahan lulus Akan menyerahkan.

Ringkasan

Artikel ini memperkenalkan cara menggunakan Vue dan Element Plus untuk melaksanakan fungsi pengesahan borang dan borang langkah demi langkah. Dengan menggunakan Penghala Vue dan idea pengkomponenan, kami boleh melaksanakan susun atur dan lompatan bentuk langkah demi langkah. Menggunakan komponen borang Element Plus dan kaedah pengesahan, kami boleh mengesahkan data borang dengan mudah.

Di atas ialah cara menggunakan Vue dan Element Plus untuk melaksanakan borang langkah demi langkah dan pengesahan borang saya harap ia akan membantu anda.

Atas ialah kandungan terperinci Cara menggunakan vue dan Element-plus untuk melaksanakan borang langkah demi langkah dan pengesahan borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!