Vue+ElementUI实现表单动态渲染、校验（二）

在Vue+ElementUI实现表单动态渲染、校验（一）中，主要分析了动态表单如何递归渲染。由于我们所给json文件限制，给出的检验规则并不能直接应用于element组件。所以需要进行进一步处理

2.动态渲染的表单添加校验

由于我们拿到的数据不能直接应用了于element组件，所以需要把每个字段的校验规则在一开始就初始化。

同样，先对数据进行递归，拿到最内层数据props，进行初始化

formattingData(nodeProps, nodeName){
     for (let i = 0; i < nodeProps.length; i++) {
          if (typeof nodeProps[i].validator === 'object') {
            // 设置每一个表单的检验数组
            nodeProps[i].validator.validatorArr = []
            //处理必填
            if (nodeProps[i].validator.required) {
              nodeProps[i].validator.validatorArr.push({
                required: nodeProps[i].validator.required,
                message: '该字段必填',
                trigger: 'blur'
              })
            }
            if (nodeProps[i].validator.min || nodeProps[i].validator.max) {
              //int类型，调用数字校验函数，进行数字校验
              if (nodeProps[i].dataType == 'int') {
                nodeProps[i].validator.validatorArr.push({
                  validator: (rule, value, callback) => {
                    self.numberValidator( //数字校验函数
                      rule,
                      value,
                      callback,
                      nodeProps[i].validator.min,
                      nodeProps[i].validator.max
                    )
                  },
                  trigger: 'blur'
                })
                //处理string类型
              } else if (nodeProps[i].dataType == 'string') {
                nodeProps[i].validator.validatorArr.push({
                  min: nodeProps[i].validator.min,
                  max: nodeProps[i].validator.max,
                  message: '最少min个字符，最大max个字符'
                  trigger: 'blur'
                })
              }
            }
          }
        }
}

动态表单基础校验的规则大概就是这样，我们项目的需求比较复杂，还包括下拉框选项切换，控制别的字段的显隐情况，这通过在json文件中给该字段对应的props项添加valueChange选项去手动调用函数。如下图。
由于此需求不通用，因此此处只对通用功能进行描述即可。