vue表单校验json数组格式和普通数组格式数据

1、效果图

说明：3种动作，对应3种验证规则，动作1：数字对象或数组均可（空也可）；动作2：只有数组对象可通过验证；动作3：数字类型可通过验证

2、代码实现

（1）template（注意这里的循环数据的key值必须有，否则虽然验证有效，但是提交时不会进行验证）

                <Select v-model="nodeForm.actions" placeholder="请选择动作">
                  <Option
                    v-for="item in loopTypeList"
                    :label="item.name"
                    :value="item.value"
                  >{{ item.name }}
                  </Option>
                </Select>
              </FormItem>
              <FormItem label="循环数据" prop="text" key="text" v-if="nodeForm.actions" :rules="{ required: true,validator:validateType, trigger: 'change'}">
        
//<!--                <InputNumber :min="0" v-model="nodeForm.text" v-if="nodeForm.actions=='3'"/>-->
                <Input v-model="nodeForm.text" placeholder="请输入大于0的数据" type="number" v-if="nodeForm.actions=='3'"></Input>
                <Input v-model="nodeForm.text" :autosize="{minRows: 3,maxRows: 5}" placeholder="请输入JSON数组格式数据" type="textarea" v-else></Input>
              </FormItem>

(2)methods

 methods: {
    //验证for表单规则
    validateType(rule, value, callback) {
      if(this.nodeForm.actions=='3'){
        let numReg = /^[0-9]*$/
        let numRe = new RegExp(numReg)
        if (numRe.test(value) && value>0 ) {
          callback();
        }else{
          callback(new Error('请输入大于0的数字'));
        }
      }else if(this.nodeForm.actions=='1'){
        try {
          if(JSON.parse(value) && typeof JSON.parse(value)=='object'){
            callback()
          }else{
            callback(new Error('请输入数组格式或JSON数组格式数据'))
          }
        } catch (error) {
          callback(new Error('请输入数组格式或JSON数组格式数据'))
        }
      }else if(this.nodeForm.actions=='2'){
        try {
          if(JSON.parse(value) && typeof JSON.parse(value)=='object'){
            if(JSON.parse(value).length>0){
              let arr=JSON.parse(value)
              arr.forEach(item=>{
                if(typeof item=='object'){
                  callback()
                }else{
                  callback(new Error('请输入JSON数组格式数据'))
                }
              })
            }
            callback()
          }else{
            callback(new Error('请输入JSON数组格式数据'))
          }
        } catch (error) {
          callback(new Error('请输入JSON数组格式数据'))
        }
      }
    },
 }

(3)watch

 watch: {
    'nodeForm.actions'(){
      if(this.editTitle== 'FOR 控制器'){
        this.$refs['nodeForm'].resetFields() //清空验证规则，不然在切换时会提示错误
          if(this.nodeForm.text&&this.nodeForm.data.text){
            this.nodeForm.text=this.nodeForm.data.text//在上一步清空验证规则后，这里重新赋值，不然数据会有改变（有的需要，有的不需要这一步）
        }
        
      }
    }
  },