数据校验

数据校验

表单中

• 以增加和修改下的弹窗里的 el-form 表单标签为例：

• 表单标签：

  <el-form :model="addGoodsDate" :rules="rule" ref="goodsFormRef">
  

  • :model 是 Element UI 中的一个属性，用于指定表单的数据模型（和 <el-table> 里的 :data 同理，为显示的数据）

    • 注意：是 Vue 提供了冒号作为 v-bind 的缩写，用于属性绑定，而不同于双向绑定的 v-model 指令

  • 这样就可以用类似下述代码的方式获取数据并进行双向绑定

    <el-form-item label="商品名" prop="goodsName">
        <el-input v-model="addGoodsDate.goodsName" placeholder="请输入商品名"></el-input>
    </el-form-item>
    

  • 这里就出现了 prop="goodsName"，这里的 prop 主要用于表单验证的规则和表单项的值绑定，需要与 addGoodsDate 数据对象中的属性名称匹配，然后就可以在 rule 中做校验

    • 注意，此处的 prop 和 <el-table-column> 标签里的含义并不完全相同，在 <el-table-column> 中，prop 属性主要用于指定表格列的数据源属性，即数据对象（通常就是说实体类）中的哪个属性应该在这一列中显示

  • 校验写法：

    // 写法一：直接限制不为空，显示提示语，输入框的话触发方式是：blur
    const rule = ref({ // rule 校验是用 prop 里的 goodsName 绑定到
        goodsName: [{
            required: true,
            message: '商品名不能为空',
            trigger: 'blur'
            },
        ],
    // 此处传来的goodsDicCode不是单一属性，而是嵌套在goodsDic属性对象里的，所以写法与直接非嵌套属性不同
    // 下拉框的话，触发方式是：change
        'goodsDic.goodsDicCode': [{
            required: true,
            message: '商品小的分类不能为空',
            trigger: 'change'
            },
        ],
    // 也可以分开做多个限制条件，其中validator指向的是写在外面的一个自定义校验方法
        goodsPrice: [{
                required: true,
                message: '价格不能为空',
                trigger: 'blur'
            },
            {
                min: 0,
                message: "价格不能小于等于0",
                trigger: "blur"
            },
            {
                validator: validataPrice,
                trigger: 'blur'
            },
        ],
    // 也可以直接把自定义的校验判断写在里面，而不是单拿出来做一个方法
        goodsTel: [{
            validator: (rule, value, callback) => {
                if (value != null && value !== "") {
                var reg = /^1[3456789]\d{9}$/;
                    if (!reg.test(value)) {
                        callback(new Error("请输入有效的手机号码"));
                    }
            	}
            	callback();
            }, 
    		trigger: "blur"
            },
            {
                required: true,
                message: '电话号码不能为空',
                trigger: 'blur'
            },
        ],
    });
    
    
    // 自定义校验方法：
    const validataPrice = (rule, value, callback) => {
        if (value != null && value !== "") {
            var reg = /(^[1-9]\d*(\.\d{1,2})?$)|(^0(\.\d{1,2})?$)/;
            if (!reg.test(value)){
            	callback(new Error("规则：数字(小数点后只允许1~2位数字)"))
       		}
        }
        callback();
    };
    

  • callback：这是一个用于传递验证结果的回调函数。当验证成功时，可以调用 callback() 来通知表单验证成功，如果验证失败，可以调用 callback(new Error("错误信息")) 来通知表单验证失败，并且将错误信息传递给表单项

  • 这样表单的验证准备工作就做好了，前面 ref="goodsFormRef" 已经为 <el-form> 元素创建了一个引用，就可以：

    // 方法中进行校验：
    goodsFormRef.value.validate(valid => {
    	if (valid) {	
        // 通过验证后的操作    
        }
    

easyExcel 数据校验

• 做导入导出操作时需要对导入的信息进行校验

• 第一步，在一开始的实体类中验证：

  @ExcelProperty(value = "商品名")
  @ColumnWidth(value = 20)
  @NotBlank(message = "商品名不能为空")
  @Size(max = 10, message = "长度不合规")
  private String goodsName;
  
  @ExcelProperty(index = 8)
  @ColumnWidth(value = 15)
  @Pattern(regexp = "^[1][3,4,5,7,8][0-9]{9}$$", message = "手机号不合法")
  @NotBlank(message = "手机号不能为空")
  private String goodsTel;
  
  @ExcelIgnore
  private String goodsFeedback;
  
  // @ExcelProperty 是导出时用到的，用于表示导出在 excel 的第几列，两种写法，简单情况下也可以两个一块写，复杂的话可能会错乱
  // @ColumnWidth 也是导出用于指定列宽度所用
  // @ExcelIgnore 也是导出所用，表示不导出此字段，即excel无此字段的位置，此处是用于在后面的存储错误信息到前端所用
  

  • @NotBlank：不能为空的校验
  • @Size：字符串长度的限制，有 max、min
  • @Pattern：正则表达式校验
  • 上述都有 message 可以在后面第二步获取到

• 第二步，后端获取是否是所需的数据：

  • 获取到数据后直接 . 获取属性进行操作即可，如传来了字符串时间，若是不在第一步用正则表达式校验，可以用下述方法：

    SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
    try {
        simpleDateFormat.parse(g.getGoodsDate());
    } catch (ParseException e) {
        g.setGoodsFeedback("上架时间的时间格式不规范");
        fail.add(g);
        continue;
    }
    

    • 可行，但仅供参考，希望能给出更好的方式

  • 若是需要获取错误信息发送给前端，可以用下述方法进行存储：

    for (GoodsExcel g: goodsExcelList) {
    
        Set<ConstraintViolation<GoodsExcel>> violations  =  ValidationUtil.getValidator().validate(g);
        String error = "";
        for (ConstraintViolation<GoodsExcel> c: violations) {
            error = c.getPropertyPath() + "";
            switch (error){
                case "goodsNumStock":
                    g.setGoodsFeedback("想写啥，就写啥"); // 实体类中一个存储用的属性
                    break;
                default:
                    g.setGoodsFeedback(c.getMessageTemplate());
                    // 这是直接获取第一步注解的message信息，上述的几个case是第一步没有加message或者想做其余操作的时候所用
            }
        }
        if(violations.size()>0){
            fail.add(g);
            continue;
        }
        
        // ......
    }
    

• 之后就是前端的获取和显示了