validateForm 的範例 - daniel-qa/Vue GitHub Wiki

validateForm 的範例

展示如何使用 validateForm 來進行表單驗證並處理驗證結果。

handleSubmit() 的結果成功，再接續要進行的操作(一般用函式外掛)

ps. handleSubmit() 的內容，直接 COPY 使用

<template>
  <el-form ref="formEl" :model="formData" :rules="rules">
    <el-form-item label="主旨" prop="sub">
      <el-input v-model="formData.sub"></el-input>
    </el-form-item>
    <el-form-item label="標題" prop="title">
      <el-input v-model="formData.title"></el-input>
    </el-form-item>
    <el-form-item label="內容" prop="body">
      <el-input v-model="formData.body"></el-input>
    </el-form-item>
    <el-button @click="handleSubmit">提交</el-button>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';

// 定義表單模型
const formData = ref({
  sub: '',
  title: '',
  body: ''
});

// 定義驗證規則
const rules = {
  sub: [{ required: true, message: '請填寫主旨', trigger: 'blur' }],
  title: [{ required: true, message: '請填寫標題', trigger: 'blur' }],
  body: [{ required: true, message: '請填寫內容', trigger: 'blur' }]
};

// 定義表單元素引用
const formEl = ref(null);

// 表單驗證函式
function validateForm(formEl) {
  return new Promise((resolve, reject) => {
    if (!formEl) return reject("表單元素不存在");

    formEl.validate((valid) => {
      if (valid) {
        resolve(true);  // 驗證成功
      } else {
        reject("表單驗證失敗，請檢查錯誤");
      }
    });
  });
}

// 提交表單
async function handleSubmit() {
  try {
    // 等待表單驗證
    await validateForm(formEl.value);

    // 驗證成功後，進行其他操作（例如 API 請求）
    ElMessage.success("表單提交成功！");
    // 在這裡可以處理實際的提交操作
  } catch (error) {
    // 如果驗證失敗，顯示錯誤訊息
    ElMessage.error(error);
  }
}
</script>

流程

當用戶點擊「提交」按鈕時，handleSubmit 函式被觸發。

handleSubmit 會等待 validateForm 完成驗證，根據結果顯示成功或錯誤的消息。

最後效果：

如果表單中有未填寫的欄位，會提示用戶填寫，並且表單不會提交。 如果所有欄位都符合要求，則顯示「表單提交成功！」的提示。 這是最簡單的範例，展示了如何將表單驗證與 Promise 及 async/await 結合，處理表單的提交邏輯。

⚠️ **GitHub.com Fallback** ⚠️