表单嵌套表格校验写法

 <el-form
    ref="businessInfo"
    :model="formData"
    :rules="formRules"
  >
     
     
     <!--formData是对象，里面包含多个对象 -->
     <!--注意prop的写法，prop一般跟formData拼在一起之后，可以准确的拿到表单内的值 -->
      <el-form-item
        :id="`protocolPath_${item}`"
        label="协议路径"
        class="protocol-path"
        :rules="formRules.interfacePath"
        :prop="`[${index}].protocolInterfaceInfo.interfacePath`"
      >
        <el-input
          v-model.trim="
            formData[index].protocolInterfaceInfo.interfacePath
          "
          style="width: 280px"
        />
      </el-form-item>
     
     
     <!--table的值绑定formData内的一个数组 -->
      <el-form-item :id="`objectAttr_${item}`" label="请求对象属性">
        <el-table
          :data="formData[index][`protocolReqPropertyInfoList`]"
          style="width: 100%"
          max-height="442"
          show-overflow-tooltip
          fit
        >
          <el-table-column
            prop="propertyName"
            :ishtml="true"
            label="<span>数据对象名称<i style='margin-left: 4px;color: #fa3239'>*</i></span>"
          >
            <template slot-scope="scope">
			 <!--注意prop的写法，prop一般跟formData拼在一起之后，可以准确的拿到表单内的值 -->
			 <!--后面跟上rules，写在formRules内是校验不到的 -->
			 <!--如果formData后直接是对象protocolReqPropertyInfoList，则直接写prop="`protocolReqPropertyInfoList[${scope.$index}].propertyName`" -->
              <el-form-item
                :prop="
                  `[${index}].protocolReqPropertyInfoList[${scope.$index}].propertyName`
                "
                :rules="formRules.propertyName"
              >
                <el-input v-model.trim="scope.row.propertyName" />
              </el-form-item>
            </template>
              
              
          </el-table-column>
       </el-table>
   </el-form-item> 
 </el-form>
     

单独校验某一项

setPropertyPath(index, arrIndex, value, flag) {
	this.$refs.businessInfo.validateField(
          `[${index}].protocolReqPropertyInfoList[${arrIndex}].propertyName`,
          valid => {
            if (valid === '') {
              this.requestSelect(index);
            }
          }
        );
}

需要注意的是，校验的第一项参数，需要和标签内的prop高度保持一致

校验规则

输入框校验

const RULE_REQUIRED = {
  required: true,
  message: '此项为必填项',
  trigger: 'blur'
};

手写input校验

interfacePath: [
          {
            required: true,
            validator: (rule, value, callback) => {
              if (value === '') {
                callback(new Error('此项为必填项'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],

数字校验

const RULE_REQUIREDNUM = {
  type: 'number',
  required: true,
  message: '请填入数字',
  trigger: 'blur'
};

正整数校验

            
codeValue: [
          {
            required: true,
            validator: (rule, value, callback) => {
              var reg = /^[0-9]*$/;
              if (!reg.test(value) || value === '') {
                callback(new Error('请填入整数'));
              } else {
                callback();
              }
            },
            trigger: 'blur'
          }
        ],

多选下拉框校验

const RULE_MULTIPLE = {
  type: 'array',
  required: true,
  message: '请至少选择一项',
  trigger: 'change'
};

value为数字的下拉框校验

const RULE_REQUIREDNUMSELECT = {
  type: 'number',
  required: true,
  message: '请选择一项',
  trigger: 'change'
};

下拉框校验

const RULE_SELECT = {
  required: true,
  message: '请选择一项',
  trigger: 'change'
};