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 构建商品管理系统的表单校验部分。我们学习了如何创建表单数据、定义校验规则、进行表单校验以及处理校验结果。此外，我们还介绍了如何使用自定义校验方法和提示用户错误信息的方法。

这个项目只是一个简单的示例，你可以根据实际需求扩展和定制更多功能，以满足你的项目要求。希望这篇博客对你有所帮助，如果有任何问题或建议，请随时留言。