uniapp + uView动态表单校验方案

概要

最近项目上有个功能,需要给动态的form表单添加异步校验,经多方资料查找与汇总,现把解决方案记录分享一下

技术栈

本项目使用的技术栈是 uniapp,前端UI框架使用的是 uView

调整uView框架的Form

找到文件:uni_modules\uview-ui\components\u-form\u-form.vue 然后修改源码,

// 原始代码
// 对部分表单字段进行校验
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];
        const rule = 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);
  });
},

// 新代码
// 对部分表单字段进行校验
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];
        // 此处为新增代码
        let rule = this.formRules[child.prop];
        // 因为改为数组后,链式无法找到rule,使用uniapp的getProperty可以找到
        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);
  });
},

页面代码

		<u--form
            labelPosition="top"
            :model="evaluate"
            :rules="rules"
            ref="uForm"
            labelWidth="auto"
            :labelStyle="{ color: '#333', 'font-size': '32rpx' }"
          >
            <view v-for="(item, index) in evaluate.list" :key="index">
              <u-form-item :label="item.title" :prop="`list.${index}.value`">
                <template>
                  <u--textarea
                    v-model.trim="item.value"
                    placeholder="请输入"
                  ></u--textarea>
                </template>
              </u-form-item>
            </view>
          </u--form>

mounted() {
    this.setRules()
},
methods: {
    // 循环设置rules
    setRules() {
      this.evaluate.list.forEach((ele, index) => {
        this.$set(this.rules, `list.${index}.value`, [
          {
            required: true,
            message: '此项为必填项',
            trigger: ['blur', 'change']
          }
        ])
      })
      this.$nextTick(() => {
        this.$refs.uForm.setRules(this.rules)
      })
    },
}

注意事项

需要注意的点

• 页面prop的写法 (:prop=“list.${index}.value”)
• 需要手动setRules