快捷導(dǎo)航

Vue如何實(shí)現(xiàn)u-form多個form表單同時校驗(yàn)

更新時間：2025年01月07日 16:24:06 作者：瘋狂的沙粒

在 Vue 項(xiàng)目中使用 UView UI 的 u-form 組件時,多個表單同時校驗(yàn)的需求非常常見,本文主要介紹了如何使用 u-form 組件實(shí)現(xiàn)多個表單同時校驗(yàn),需要的可以參考一下

在 Vue 項(xiàng)目中使用 UView UI 的 u-form 組件時，多個表單同時校驗(yàn)的需求非常常見。例如，當(dāng)我們有多個表單需要在同一個頁面中進(jìn)行校驗(yàn)并提交時，我們需要確保每個表單都能進(jìn)行單獨(dú)驗(yàn)證，同時可以在同一時刻進(jìn)行批量驗(yàn)證。

接下來，我們結(jié)合實(shí)際項(xiàng)目的代碼，講解如何使用 u-form 組件實(shí)現(xiàn)多個表單同時校驗(yàn)。

1. 項(xiàng)目背景

假設(shè)你有一個頁面，需要用戶同時填寫用戶信息和公司信息兩個表單。用戶信息包括姓名和年齡，公司的信息包括公司名和職位。你希望在用戶點(diǎn)擊提交按鈕時，能夠同時校驗(yàn)這兩個表單，確保每個表單的數(shù)據(jù)都符合要求。

2. 代碼示例

2.1 頁面模板

<template>
  <view>
    <!-- 用戶信息表單 -->
    <u-form :model="userForm" ref="userForm" @submit="submitForms">
      <u-form-item label="姓名" prop="name" :rules="nameRules">
        <u-input v-model="userForm.name" placeholder="請輸入姓名" />
      </u-form-item>
      <u-form-item label="年齡" prop="age" :rules="ageRules">
        <u-input type="number" v-model="userForm.age" placeholder="請輸入年齡" />
      </u-form-item>
      <u-form-item>
        <u-button type="primary" block formType="submit">提交用戶信息</u-button>
      </u-form-item>
    </u-form>

    <!-- 公司信息表單 -->
    <u-form :model="companyForm" ref="companyForm" @submit="submitForms">
      <u-form-item label="公司名稱" prop="companyName" :rules="companyNameRules">
        <u-input v-model="companyForm.companyName" placeholder="請輸入公司名稱" />
      </u-form-item>
      <u-form-item label="職位" prop="position" :rules="positionRules">
        <u-input v-model="companyForm.position" placeholder="請輸入職位" />
      </u-form-item>
      <u-form-item>
        <u-button type="primary" block formType="submit">提交公司信息</u-button>
      </u-form-item>
    </u-form>

    <!-- 提交按鈕 -->
    <u-button type="success" block @click="submitForms">提交所有信息</u-button>
  </view>
</template>

2.2 頁面腳本

export default {
  data() {
    return {
      // 用戶信息表單的數(shù)據(jù)
      userForm: {
        name: '',
        age: ''
      },
      // 用戶信息表單的校驗(yàn)規(guī)則
      nameRules: [
        { required: true, message: '姓名是必填的', trigger: 'blur' }
      ],
      ageRules: [
        { required: true, message: '年齡是必填的', trigger: 'blur' },
        { type: 'number', message: '請輸入有效的年齡', trigger: 'blur' }
      ],

      // 公司信息表單的數(shù)據(jù)
      companyForm: {
        companyName: '',
        position: ''
      },
      // 公司信息表單的校驗(yàn)規(guī)則
      companyNameRules: [
        { required: true, message: '公司名稱是必填的', trigger: 'blur' }
      ],
      positionRules: [
        { required: true, message: '職位是必填的', trigger: 'blur' }
      ]
    };
  },
  methods: {
    // 提交表單
    submitForms() {
      // 同時校驗(yàn)所有表單
      const userFormValidation = this.$refs.userForm.validate();
      const companyFormValidation = this.$refs.companyForm.validate();

      // 使用 Promise.all 來并行驗(yàn)證多個表單
      Promise.all([userFormValidation, companyFormValidation])
        .then(() => {
          // 如果所有表單驗(yàn)證通過
          this.$u.toast('所有表單驗(yàn)證通過，提交成功');
          // 可以在這里進(jìn)行數(shù)據(jù)提交
        })
        .catch(() => {
          // 如果有任何表單驗(yàn)證失敗
          this.$u.toast('表單驗(yàn)證失敗，請檢查輸入');
        });
    }
  }
};

3. 詳細(xì)說明

3.1 表單組件使用

u-form：這是 UView UI 中的表單組件。每個表單組件通過 :model 綁定對應(yīng)的數(shù)據(jù)對象，通過 ref 設(shè)置引用名，以便在 JavaScript 中獲取并調(diào)用表單的驗(yàn)證方法。

u-form-item：每個表單項(xiàng)。它用來包裝一個表單字段，并且通過 prop 來指定字段名稱，用來與表單數(shù)據(jù)進(jìn)行綁定。

u-input：用于輸入數(shù)據(jù)的組件。它通過 v-model 來雙向綁定數(shù)據(jù)。

3.2 校驗(yàn)邏輯

表單校驗(yàn)規(guī)則：每個表單項(xiàng)都有相應(yīng)的校驗(yàn)規(guī)則（rules）。這些規(guī)則確保字段的輸入符合預(yù)期。在此示例中，我們使用了必填和類型檢查（如 number 類型）的規(guī)則。

validate 方法：每個 u-form 組件都有一個 validate 方法，它會觸發(fā)表單的校驗(yàn)并返回一個 Promise。如果表單驗(yàn)證成功，Promise 會成功解析；如果驗(yàn)證失敗，Promise 會被拒絕。

3.3 提交和批量校驗(yàn)

submitForms 方法：這是頁面的提交處理方法。在該方法中，我們使用了 this.$refs.userForm.validate() 和 this.$refs.companyForm.validate() 來分別觸發(fā)兩個表單的校驗(yàn)，并通過 Promise.all 來并行校驗(yàn)這兩個表單。

Promise.all：我們將兩個表單的校驗(yàn) Promise 包裝到 Promise.all 中。這樣，兩個表單的校驗(yàn)會同時進(jìn)行。當(dāng)所有表單驗(yàn)證都成功時，then 方法被觸發(fā)；如果有任何一個表單驗(yàn)證失敗，catch 方法會被觸發(fā)。

this.$u.toast：用來顯示提示消息，通知用戶是否提交成功或失敗。