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

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

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

1. 項目背景

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

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ù)據
      userForm: {
        name: '',
        age: ''
      },
      // 用戶信息表單的校驗規(guī)則
      nameRules: [
        { required: true, message: '姓名是必填的', trigger: 'blur' }
      ],
      ageRules: [
        { required: true, message: '年齡是必填的', trigger: 'blur' },
        { type: 'number', message: '請輸入有效的年齡', trigger: 'blur' }
      ],

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

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

3. 詳細說明

3.1 表單組件使用

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

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

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

3.2 校驗邏輯

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

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

3.3 提交和批量校驗

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

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

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