vue と Element-plus を使用してステップバイステップのフォームとフォーム検証を実装する方法

Vue と Element Plus を使用して段階的なフォームとフォーム検証を実装する方法

Web 開発では、フォームは最も一般的なユーザー インタラクション コンポーネントの 1 つです。複雑なフォームの場合、多くの場合、段階的な入力とフォーム検証機能を実行する必要があります。この記事では、Vue と Element Plus フレームワークを使用して、これら 2 つの機能を実現する方法を紹介します。

1. ステップバイステップフォーム

ステップバイステップフォームとは、大きなフォームをいくつかの小さなステップに分割することを指し、ユーザーはステップに従ってステップを入力する必要があります。 。 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>

上記のコードでは、現在のステップのインデックス currentStep と、各ステップのタイトルと対応するコンポーネントを含む各ステップの構成ステップを含むデータ オブジェクトを定義します。

次に、各ステップのコンポーネントを定義する必要があります。 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')

この時点で、段階的なフォームの構築が完了しました。ユーザーは手順に従ってフォームに入力し、「前へ」ボタンと「次へ」ボタンを使用して手順を切り替えることができます。

2. フォームの検証

実際の開発では、入力データが期待されるルールに準拠していることを確認するために、ユーザーが送信したフォーム データを検証する必要がよくあります。 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 中国語 Web サイトの他の関連記事を参照してください。