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

素颜马尾好姑娘i 2022-12-11 13:58 222阅读 0赞

### 文章目录 ###

*   *   *  显示状态的修改与图片显示
         *  自定义表单校验
         *  页面测试

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

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

修改完成后可以看到正常显示了图片  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 3]

### 自定义表单校验 ###

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

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` 对其数字的绑定  
![在这里插入图片描述][20201002210219362.png_pic_center]  
使用`Number.isInteger` 判定是否为整数

sort: [{   validator: (rule, value, callback) => { 
                  if (value == "") { 
                    //填写为空的情况 
                    callback(new Error("排序必须填写"));
                  } else if (!Number.isInteger(value) || value<0) { 
                    //填写不符合规范的情况 
                    callback(new Error("排序必须是一个大于等于0的整数"));
                  } else { 
    
                    //填写正确的情况, 直接调用callback方法 ,传递空
                    callback();
                  }
                },trigger: "blur" }]

完整的brand-add-or-update.vue代码如下

<template>
      <el-dialog
        :title="!dataForm.id ? '新增' : '修改'"
        :close-on-click-modal="false"
        :visible.sync="visible"
      >
        <el-form
          :model="dataForm"
          :rules="dataRule"
          ref="dataForm"
          @keyup.enter.native="dataFormSubmit()"
          label-width="130px"
        >
          <el-form-item label="品牌名" prop="name">
            <el-input v-model="dataForm.name" placeholder="品牌名"></el-input>
          </el-form-item>
          <el-form-item label="品牌logo地址" prop="logo">
            
            <single-upload v-model="dataForm.logo"></single-upload>
          </el-form-item>
          <el-form-item label="介绍" prop="descript">
            <el-input v-model="dataForm.descript" placeholder="介绍"></el-input>
          </el-form-item>
    
          <el-form-item label="显示状态" prop="showStatus">
            <el-switch
              v-model="dataForm.showStatus"
              active-color="#13ce66"
              inactive-color="#ff4949"
              :active-value="1"
              :inactive-value="0"
            ></el-switch>
          </el-form-item>
    
          <el-form-item label="检索首字母" prop="firstLetter">
            <el-input
              v-model="dataForm.firstLetter"
              placeholder="检索首字母"
            ></el-input>
          </el-form-item>
          <el-form-item label="排序" prop="sort">
            <el-input v-model.number="dataForm.sort" placeholder="排序"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
      </el-dialog>
    </template>
    
    <script>
    import SingleUpload from "@/components/upload/singleUpload";
    
    export default { 
      //引入文件上传的组件
      components: {  SingleUpload },
      data() { 
        return { 
          visible: false,
          dataForm: { 
            brandId: 0,
            name: "",
            logo: "",
            descript: "",
            showStatus: 1,
            firstLetter: "",
            sort: "",
          },
          dataRule: { 
            name: [{  required: true, message: "品牌名不能为空", trigger: "blur" }],
            logo: [
              {  required: true, message: "品牌logo地址不能为空", trigger: "blur" },
            ],
            descript: [
              {  required: true, message: "介绍不能为空", trigger: "blur" },
            ],
            showStatus: [
              { 
                required: true,
                message: "显示状态[0-不显示；1-显示]不能为空",
                trigger: "blur",
              },
            ],
            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",
              },
            ],
            sort: [{   validator: (rule, value, callback) => { 
                  if (value == "") { 
                    //填写为空的情况 
                    callback(new Error("排序必须填写"));
                  } else if (!Number.isInteger(value) || value<0) { 
                    //填写不符合规范的情况 
                    callback(new Error("排序必须是一个大于等于0的整数"));
                  } else { 
    
                    //填写正确的情况, 直接调用callback方法 ,传递空
                    callback();
                  }
                },trigger: "blur" }],
          },
        };
      },
      methods: { 
        init(id) { 
          this.dataForm.brandId = id || 0;
          this.visible = true;
          this.$nextTick(() => { 
            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);
                }
              });
            }
          });
        },
      },
    };
    </script>

### 页面测试 ###

在页面上进行测试,效果如图所示  
![在这里插入图片描述][20201002225921415.png_pic_center]

[20201002201819736.png_pic_center]: /images/20221123/c137460817614c18960f3f609f9d994b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/6857bfcea78444419ca542a58db314fe.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221123/0ab68152c6d94a01bfb5148884f57a26.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 2]: /images/20221123/3f9f868edf66484da02fb91e649f1719.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 3]: /images/20221123/1c61c1e8d85944128ac575515503aa36.png
[https_element.eleme.cn_zh-CN_component_form]: https://element.eleme.cn/#/zh-CN/component/form
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 4]: /images/20221123/63071242c01f4c4aae02614627e06a98.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 5]: /images/20221123/37f4b5c816cf4847aa9b00e3a2025b8e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 6]: /images/20221123/4f7a2dca35384923a13d8059626ea043.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMzMjI5NjY5_size_16_color_FFFFFF_t_70_pic_center 7]: /images/20221123/b2fbb6eb7062400b91b33cf5c2437ba3.png
[20201002210219362.png_pic_center]: /images/20221123/b85a1857c0784c2a94556c1819de94fd.png
[20201002225921415.png_pic_center]: /images/20221123/449d0edd63174538b07988639df938f8.png