vue3.2/Vite/Ts44: 品牌管理模块表单校验

└─src
    └─views
        └─product
            └─trademark
                └─index.vue

<template>
  <!-- ... -->
  <!-- 对话框组件 -->
  <el-dialog v-model="dialogFormVisible" title="添加品牌">
    <el-form :model="trademarkParams" :rules="rules" ref="formRef">
      <el-form-item label="品牌名称" label-width="80px" prop="tmName">
        <el-input
          placehodler="请输入品牌名称"
          v-model="trademarkParams.tmName"
        ></el-input>
      </el-form-item>
      <el-form-item label="品牌LOGO" label-width="80px" prop="logoUrl">
        <el-upload
          action="/api/admin/product/fileUpload"
          :show-file-list="false"
          :before-upload="beforeAvatarUpload"
          :on-success="handleAvatarSuccess"
        >
          <img v-if="trademarkParams.logoUrl" :src="trademarkParams.logoUrl" />
          <el-icon v-else>
            <Plus />
          </el-icon>
        </el-upload>
      </el-form-item>
    </el-form>
    <template #footer>
      <el-button type="primary" size="default" @click="cancel">取消</el-button>
      <el-button type="primary" size="default" @click="confirm">确定</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
  import { reactive, nextTick } from "vue";
  import type { TradeMark } from "@/api/product/trademark/type";
  import {
    reqHasTrademark,
    reqAddOrUpdateTrademark,
  } from "@/api/product/trademark";

  let formRef = ref();

  let trademarkParams = reactive<TradeMark>({
    tmName: "",
    logoUrl: "",
  });

  //...
  const confirm = async () => {
    // 发请求之前要对所有的表单项进行校验
    await formRef.value.validate();
    //...
  };
  //...

  // 弹出添加品牌的弹窗
  const addTradeMark = () => {
    //...
    // 第一种方法
    // formRef.value?.clearValidate('tmName');
    // formRef.value?.clearValidate('logoUrl');
    // 第二种方法
    nextTick(() => {
      formRef.value.clearValidate("tmName");
      formRef.value.clearValidate("logoUrl");
    });
  };

  // 弹出修改品牌的弹窗
  const updateTradeMark = () => {
    nextTick(() => {
      formRef.value.clearValidate("tmName");
      formRef.value.clearValidate("logoUrl");
    });
  };

  // 图片上传成功
  let handleAvatarSuccess: UploadProps["onSuccess"] = (
    response,
    uploadFile
  ) => {
    //...
    // 上传成功后就清楚对应 logoUrl 的错误提示
    formRef.value.clearValidate("logoUrl");
  };

  const validatorTmName = (rule: any, value: any, callBack: any) => {
    if (value.trim().length >= 2) {
      callBack();
    } else {
      callBack(new Error("品牌名称位数要大于等于来归两位"));
    }
  };

  const validatorLogoUrl = (rule: any, value: any, callBack: any) => {
    // 此时会触发图片的校验
    /*
      comfirm 的时候，添加 formRef.value.validate() 这句，才会触发图片 upload 的校验
    */
    if (value) {
      // 图片上传
      callBack();
    } else {
      callBack(new Error("LOGO 图片务必上传"));
    }
  };

  // 表单检验规则
  const rules = {
    tmName: [
      {
        required: true,
        trigger: "blur",
        validator: validatorTmName,
      },
    ],
    logoUrl: [
      {
        required: true,
        trigger: "change",
        validator: validatorLogoUrl,
      },
    ],
  };
</script>