谷粒商城58-商品服务-API-品牌管理-表单校验&自定义校验器

显示状态的修改与图片显示

显示状态, 由默认的true false 改成 1 和 0 去表示. 新增一个品牌, 看到logo是很长的地址 ,而不是图片 ,需要进行修改. 参考element的图片功能 在brand.vue文件中进行修改如下

修改完成后可以看到正常显示了图片

自定义表单校验

可以参考官方文档的表单校验 https://element.eleme.cn/#/zh-CN/component/form 自定义校验, 给的示例代码如下, 不同的校验规则, 写不同的方法, 并且最终如果符合规范, 调用callback() 方法 作为示例, 对检索首字母字段 和排序字段进行校验. 实际工作中, 根据产品经理给的原型图中每一个字段的规则去进行校验. 对首字母检测校验如下

 firstLetter: [
          //value 为用户输入的值  callback为触发的函数
          {
            validator: (rule, value, callback) => {
              if (value == "") {
                //填写为空的情况 
                callback(new Error("首字母必须填写"));
              } else if (!/^[a-zA-Z]$/.test(value)) {
                //填写不符合规范的情况 
                callback(new Error("首字母必须在a-z或A-Z之间"));
              } else {

                //填写正确的情况, 直接调用callback方法 ,传递空
                callback();
              }
            },
            trigger: "blur",
          },
        ]

对排序字段校验如下 : 在排序字段的视图层中, 使用v-model.number 对其数字的绑定 使用Number.isInteger 判定是否为整数

    sort: [{  validator: (rule, value, callback) => {
              if (value == "") {
                //填写为空的情况 
                callback(new Error("排序必须填写"));
              } else if (!Number.isInteger(value) || value {
              if (value == "") {
                //填写为空的情况 
                callback(new Error("首字母必须填写"));
              } else if (!/^[a-zA-Z]$/.test(value)) {
                //填写不符合规范的情况 
                callback(new Error("首字母必须在a-z或A-Z之间"));
              } else {

                //填写正确的情况, 直接调用callback方法 ,传递空
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        sort: [{  validator: (rule, value, callback) => {
              if (value == "") {
                //填写为空的情况 
                callback(new Error("排序必须填写"));
              } else if (!Number.isInteger(value) || value {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.brandId) {
          this.$http({
            url: this.$http.adornUrl(
              `/product/brand/info/${this.dataForm.brandId}`
            ),
            method: "get",
            params: this.$http.adornParams(),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm.name = data.brand.name;
              this.dataForm.logo = data.brand.logo;
              this.dataForm.descript = data.brand.descript;
              this.dataForm.showStatus = data.brand.showStatus;
              this.dataForm.firstLetter = data.brand.firstLetter;
              this.dataForm.sort = data.brand.sort;
            }
          });
        }
      });
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate((valid) => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/product/brand/${!this.dataForm.brandId ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              brandId: this.dataForm.brandId || undefined,
              name: this.dataForm.name,
              logo: this.dataForm.logo,
              descript: this.dataForm.descript,
              showStatus: this.dataForm.showStatus,
              firstLetter: this.dataForm.firstLetter,
              sort: this.dataForm.sort,
            }),
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                },
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
  },
};

页面测试

在页面上进行测试,效果如图所示