vue3中el-form表单校验，再点击提交按钮的时候通过校验才进行提交

一、前言
- 1、案例

一、前言

在 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>