修复uview2.0下表单无法动态校验的问题

1.uview小程序必须在onReady下加上一行设置规则的方法

onReady() {
  // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
  this.$refs.uForm.setRules(this.rules)
},

2.动态使用，v-for需要放在u-form下的view下面

3.u-form-item中的表单必须改为 :prop="tableData.${index}.requestQty"

4.在data中先配置校验规则rules和循环列表同名的tableData数组，然后增加动态增加的规则orderRules对象且校验触发方式trigger中新增['input', 'blur', 'change']

rules: {
  tableData: []
},
orderRules: {
  requestQty: {type: 'number', required: true, message: '请输入数量', trigger: ['input', 'blur', 'change']},
  faultDescription: {type: 'string', required: true, message: '请填写故障信息', trigger: ['input', 'blur', 'change']}
},

5.表单完整代码

<u--form labelPosition="left" :model="orderForm" :rules="rules" labelWidth="100%" ref="uForm">
  <view class="confirmBox" v-for="(item, index) in orderForm.tableData" :key="index">
    <u-table stripe width='340' fontSize="10" padding="10px 3px">
      <u-tr>
        <u-th width="80">订单号</u-th>
        <u-th width="130">产品描述</u-th>
        <u-th width="80">发货日期</u-th>
        <u-th width="50">数量</u-th>
      </u-tr>
      <u-tr>
        <u-td>{{ item.saOrderNo }}</u-td>
        <u-td>{{ item.prodDescription }}</u-td>
        <u-td>{{ item.deliveryDate }}</u-td>
        <u-td>{{ item.dlvQty }}</u-td>
      </u-tr>
    </u-table>
    <view class="confirm_desc">
      <view class="desc_num">
        <u-form-item label="数量" :prop="`tableData.${index}.requestQty`">
          <label slot="label">数量</label>
          <u-number-box v-model="item.requestQty" :min="0" :max="9999" color="#666" buttonSize="12"
                        bgColor="transparent" iconStyle="color:#D6D6D6;font-size:12px;width:15px;"
                        @change="requestQtyChange($event,item)"></u-number-box>
        </u-form-item>
      </view>
      <view class="desc_fault">
        <u-form-item label="故障信息" :prop="`tableData.${index}.faultDescription`">
          <label slot="label">故障信息</label>
          <u--input v-model="item.faultDescription" placeholder="请输入内容" fontSize='12' suffixIcon="arrow-right"
                    suffixIconStyle="color: #00BAAD" clearable @change="faultDesChange"></u--input>
        </u-form-item>
      </view>
    </view>
  </view>
</u--form>

6.重点，需要修改uview下的u-form组件,路径(node_modules/uview-ui/components/u-form)，因为再将校验改为数组后，const rule = this.formRules[child.prop];无法找到rule，如 child.prop=‘tableData.0.requestQty’，rule返回的是undefined，uniapp提供一个uni.$u.getProperty可以找到 validateField方法
6-1.把const rule = this.formRules[child.prop] 改成 let rule = this.formRules[child.prop];
6-2.在6-1下面增加如下方法

if (!rule) {
  rule=uni.$u.getProperty(
      this.formRules,
      child.prop
  );
}

6-3. 完整代码

// 对部分表单字段进行校验
async validateField(value, callback, event = null) {
  // $nextTick是必须的，否则model的变更，可能会延后于此方法的执行
  this.$nextTick(() => {
    // 校验错误信息，返回给回调方法，用于存放所有form-item的错误信息
    const errorsRes = [];
    // 如果为字符串，转为数组
    value = [].concat(value);
    // 历遍children所有子form-item
    this.children.map((child) => {
      // 用于存放form-item的错误信息
      const childErrors = [];
      if (value.includes(child.prop)) {
        // 获取对应的属性，通过类似'a.b.c'的形式
        const propertyVal = uni.$u.getProperty(
          this.model,
          child.prop
        );
        // 属性链数组
        const propertyChain = child.prop.split(".");
        const propertyName =
          propertyChain[propertyChain.length - 1];
        //todo：将const改为let
        let rule = this.formRules[child.prop];
        //todo：链式是无法通过上面的方式获取的，改为下面的方式
        if (!rule) {
          rule=uni.$u.getProperty(
              this.formRules,
              child.prop
          );
        }
        // 如果不存在对应的规则，直接返回，否则校验器会报错
        if (!rule) return;

        // rule规则可为数组形式，也可为对象形式，此处拼接成为数组
        const rules = [].concat(rule);

        // 对rules数组进行校验
        for (let i = 0; i < rules.length; i++) {
          const ruleItem = rules[i];
          // 将u-form-item的触发器转为数组形式
          const trigger = [].concat(ruleItem?.trigger);
          // 如果是有传入触发事件，但是此form-item却没有配置此触发器的话，不执行校验操作
          if (event && !trigger.includes(event)) continue;
          // 实例化校验对象，传入构造规则
          const validator = new Schema({
            [propertyName]: ruleItem,
          });
          validator.validate({
              [propertyName]: propertyVal,
            },
            (errors, fields) => {
              if (uni.$u.test.array(errors)) {
                errorsRes.push(...errors);
                childErrors.push(...errors);
              }
              child.message =
                childErrors[0]?.message ?? null;
            }
          );
        }
      }
    });
    // 执行回调函数
    typeof callback === "function" && callback(errorsRes);
  });
},

7.动态设置规则

onReady() {
  this.orderForm.tableData = uni.getStorageSync('warrantyForm').warrantyDtList;
  this.orderForm.tableData.forEach(item => {
    this.rules.tableData.push(this.orderRules)
  })
  console.log(this.rules, 'this.rules')
  // 如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
  this.$refs.uForm.setRules(this.rules)
},