“elementPlus” 共(1)篇
Vue 3 和 Element Plus 实现商品管理系统 - 表单校验部分解析 介绍在本博客中，我们将深入探讨如何使用 Vue 3 和 Element Plus 构建一个简单的商品管理系统，并重点关注表单校验的部分。这个系统允许用户添加、编辑和删除商品，以及对商品进行搜索。技术栈在这个项目中，我们使用了以下技术：Vue 3：一个流行的 JavaScript 框架，用于构建用户界面。Element Plus：一套基于 Vue 3 的组件库，用于创建漂亮的用户界面。Axios：一个用于处理 HTTP 请求的 JavaScript 库。表单校验在这个项目中，我们使用 Element Plus 的表单组件来实现商品信息的输入和校验。以下是与表单校验相关的关键知识点和注意事项：1. 引入 Element Plus在项目中首先要确保已正确引入 Element Plus，以便使用它的表单组件和验证规则。import { ref, reactive } from "vue"; import { ElForm, ElFormItem, ElInput, ElSelect, ElOption } from "element-plus";2. 创建表单数据和校验规则我们使用 ref 来创建表单数据，并使用 ref 来创建校验规则。校验规则通常包括字段的必填性、数据类型和自定义校验方法。const insertForm = ref({ sellerID: "", name: "", description: "", price: "", category: "", condition: "", quantity: "", // status: "", }); const insertFormRules = ref({ name: [ { required: true, message: "商品名称不能为空", trigger: "blur", }, ], description: [ { required: true, message: "商品描述不能为空", trigger: "blur", }, ], price: [ { required: true, validator: validatePrice, trigger: "blur", }, ], category: [ { required: true, message: "请选择商品类别", trigger: "change", }, ], condition: [ { required: true, message: "请选择商品成色", trigger: "change", }, ], quantity: [ { required: true, message: "商品数量不能为空", trigger: "blur", }, { type: "number", message: "商品数量必须为数字值", }, ], });3. 表单校验在提交表单之前，我们使用 el-form 的 validate 方法来进行表单校验。校验成功后才允许提交数据。<el-dialog v-model="dialogInsertFormVisible" title="上架商品"> <el-form ref="insertFormRulesRef" :model="insertForm" :rules="insertFormRules" > <el-form-item label="商品名称" label-width="80px" prop="name"> <el-input v-model="insertForm.name" autocomplete="off" /> </el-form-item> <el-form-item label="描述" label-width="80px" prop="description"> <el-input v-model="insertForm.description" autocomplete="off" /> </el-form-item> <el-form-item label="价格" label-width="80px" prop="price"> <el-input v-model="insertForm.price" autocomplete="off" /> </el-form-item> <el-form-item label="类别" label-width="80px" prop="category"> <el-select v-model="insertForm.category" placeholder="请选择类别"> <el-option label="服饰鞋帽" value="服饰鞋帽" /> <el-option label="家居用品" value="家居用品" /> <el-option label="电子数码" value="电子数码" /> <el-option label="美妆护肤" value="美妆护肤" /> <el-option label="食品生鲜" value="食品生鲜" /> <el-option label="图书音像" value="图书音像" /> <el-option label="儿童玩具" value="儿童玩具" /> <el-option label="运动户外" value="运动户外" /> <el-option label="汽车用品" value="汽车用品" /> <el-option label="医疗保健" value="医疗保健" /> <el-option label="工艺礼品" value="工艺礼品" /> <el-option label="虚拟物品" value="虚拟物品" /> </el-select> </el-form-item> <el-form-item label="成色" label-width="80px" prop="condition"> <el-select v-model="insertForm.condition" placeholder="请选择成色"> <el-option label="全新" value="全新" /> <el-option label="99新" value="99新" /> <el-option label="95新" value="95新" /> <el-option label="9成新" value="9成新" /> <el-option label="8成新" value="8成新" /> <el-option label="6成新" value="6成新" /> </el-select> </el-form-item> <el-form-item label="数量" label-width="80px" prop="quantity"> <el-input v-model.number="insertForm.quantity" autocomplete="off" /> </el-form-item> </el-form> <template #footer> <span class="dialog-footer"> <el-button @click="dialogInsertFormVisible = false">取消</el-button> <el-button type="primary" @click="submitItemInform(insertFormRulesRef)" > 提交 </el-button> <el-button type="primary" @click="test"> 提交 </el-button> </span> </template> </el-dialog>ref[0].validate(async (valid) => { if (valid) { // 表单校验通过，可以提交数据 try { const res = await axios.post( "http://localhost:8080/userInsertItem", insertForm.value ); // 处理提交结果... } catch (err) { // 处理请求错误... } } else { // 表单校验不通过，不执行提交操作 console.log("表单校验不通过！"); } });4. 自定义校验规则在校验规则中，我们可以使用自定义校验方法来实现特定的验证逻辑。例如，我们可以编写一个验证价格是否为数字的自定义校验方法：const validatePrice = (rule, value, callback) => { if (!value) return callback(new Error("请输入金额")); if (!Number(value)) return callback(new Error("请输入数字值")); let reg = /((^[1-9]\d*)|^0)(\.\d{0,2}){0,1}$/; if (!reg.test(value)) return callback(new Error("请输入正确价格")); callback(); };然后，在校验规则中应用该自定义校验方法：price: [ { required: true, validator: validatePrice, trigger: "blur", }, ],5. 提示用户在校验不通过时，使用 Element Plus 的消息提示功能来通知用户错误信息：if (!valid) { // 表单校验不通过，显示错误消息 this.$message.error("表单校验不通过，请检查输入！"); }6. 表单重置在提交成功后，你可以选择重置表单，以便用户继续添加新的商品信息：ref[0].resetFields(); // 重置表单总结在这篇博客中，我们深入探讨了如何使用 Vue 3 和 Element Plus 构建商品管理系统的表单校验部分。我们学习了如何创建表单数据、定义校验规则、进行表单校验以及处理校验结果。此外，我们还介绍了如何使用自定义校验方法和提示用户错误信息的方法。这个项目只是一个简单的示例，你可以根据实际需求扩展和定制更多功能，以满足你的项目要求。希望这篇博客对你有所帮助，如果有任何问题或建议，请随时留言。
