---

一、前言

在 Vue 3 中，可以使用 Element UI 的 <el-form> 組件配合 <el-form-item> 來實現表單的必填項校驗，并在提交時根據校驗結果來決定是否調用相關接口。

1、案例

下面是一個示例代碼，演示了如何在提交表單時進行校驗，并根據校驗結果來決定是否調用相關接口：

<template><el-form :model="form" :rules="rules" ref="formRef"><el-form-item label="用戶名" prop="username"><el-input v-model="form.username"></el-input></el-form-item><el-form-item label="密碼" prop="password"><el-input type="password" v-model="form.password"></el-input></el-form-item><el-form-item><el-button @click="submitForm">提交</el-button></el-form-item></el-form>
</template><script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';const form = ref({username: '',password: ''
});const rules = {username: [{ required: true, message: '請輸入用戶名', trigger: 'blur' }],password: [{ required: true, message: '請輸入密碼', trigger: 'blur' },{ min: 6, max: 12, message: '密碼長度在 6 到 12 個字符', trigger: 'blur' }]
};const formRef = ref(null);const submitForm = () => {formRef.value.validate((valid) => {if (valid) {ElMessage.success('驗證通過，提交表單');// 這里執行你的提交操作} else {ElMessage.error('表單驗證失敗');return false;}});
};
</script>

在這個示例中，我們使用 <el-form> 組件來包裹表單項，并通過 :rules 屬性傳遞校驗規則。在 submitForm 方法中