动态表单设置rules

Question

动态表单设置rules

   <template>
  <app-container :padding-y="0">
    <uv-gap :height="16" />
    <uv-form
      labelPosition="left"
      :model="props.modelValue"
      labelAlign="right"
      labelWidth="auto"
      ref="form"
    >
      <uv-form-item
        v-for="(item,index) in hasTank"
        :key="index"
        :label="item.tankNumber + '#' + item.tankUse + '实收数量' "
        :prop="item.tankNumber + '#' + item.tankUse  + '实收数量'"
        borderBottom
        required
      >
        <uv-input
          v-model="props.modelValue[item.tankNumber+'#'+item.tankUse + '实收数量']"
          :placeholder="'请输入' + item.tankNumber + '#' + item.tankUse + '实收数量' "
        ></uv-input>

      </uv-form-item>

      <uv-gap :height="16" />
    </uv-form>
    <view style="text-align: right;">———— 发包装酒数量(KG): {{ props.number }}</view>
  </app-container>
</template>
        
        <script setup>
import { onPullDownRefresh, onLoad } from '@dcloudio/uni-app';
import { isEmpty, isNil } from 'lodash-es';
import { computed, reactive, ref } from 'vue';

const props = defineProps({
  hasTank: Array,
  number: Number,
  modelValue: {
    // 表单字段
    type: Object,
    default: () => {}
  }
});
const form = ref(null);
const emit = defineEmits(['update:modelValue']);

defineExpose({
  handleSubmits: () => {
    form.value
      .validate()
      .then(res => {
        console.log(112131);
      })
      .catch(err => {
        console.log(243222);
      });
  }
});

// 下拉刷新
onPullDownRefresh(async () => {
  uni.stopPullDownRefresh();
});
</script>
        
  <style scoped lang="scss">

.rules{
  display: inline-block;
  color:red;
  position: relative;
  top: 28px;
}



.bottom-button {
  display: flex;
  justify-content: space-around;
}

.btns {
  position: fixed;
  z-index: 10;
  bottom: 35px;
  left: 16px;
  padding: 0 8px;
  width: 90%;
  display: flex;
  justify-content: flex-end;
}

.container {
  position: relative;
  background: #fff;
  border-radius: 8px;
  padding: 0 8px;
  overflow: hidden;

  .popup {
    padding: 0 16px;
  }

  .bottomBtn {
    display: flex;
    justify-content: space-around;
  }
}
</style>
        

Answer 1

以下内容由AIGC及阿里嘎多学长共同生成、有用望采纳：

---

你已经很好地概述了你需要解决的问题和基本的解决方案。以下是一些更详细的步骤和代码示例，帮助你实现动态表单的验证规则设置。

步骤 1: 定义数据模型和验证规则

首先，在你的 Vue 组件的 data 函数中定义数据模型和验证规则对象。

data() {
  return {
    model: {}, // 动态表单的数据模型
    rules: {} // 验证规则对象
  };
},

步骤 2: 动态生成规则

在组件的 methods 中定义一个方法来动态生成验证规则。这个方法会在组件挂载时调用。

methods: {
  generateRules() {
    this.hasTank.forEach((item, index) => {
      const key = `${item.tankNumber}#${item.tankUse}实收数量`;
      this.rules[key] = [
        { required: true, message: `请输入${item.tankNumber}#${item.tankUse}实收数量`, trigger: 'blur' },
        { type: 'number', message: '必须为数字' },
        { min: 1, max: 100, message: '数量必须在1到100之间' } // 假设数量范围是1到100
      ];
    });
  }
},

步骤 3: 组件挂载时生成规则

在 mounted 钩子中调用 generateRules 方法，确保在组件挂载时生成规则。

mounted() {
  this.generateRules();
}

步骤 4: 更新表单模板

在你的表单模板中，使用 v-for 循环动态生成表单项，并应用验证规则。

<uv-form
  labelPosition="left"
  :model="model"
  :rules="rules"
  ref="form"
>
  <uv-form-item
    v-for="(item, index) in hasTank"
    :key="index"
    :label="item.tankNumber + '#' + item.tankUse + '实收数量' "
    :prop="`${item.tankNumber}#${item.tankUse}实收数量`"
    borderBottom
    required
  >
    <uv-input
      v-model="model[`${item.tankNumber}#${item.tankUse}实收数量`]"
      :placeholder="'请输入' + item.tankNumber + '#' + item.tankUse + '实收数量' "
    ></uv-input>
  </uv-form-item>

  <uv-gap :height="16" />
</uv-form>

步骤 5: 确保模型属性正确关联

在 data 函数中初始化 model 对象，确保每个表单项的 v-model 绑定到正确的属性。

data() {
  return {
    model: this.hasTank.reduce((acc, item) => {
      acc[`${item.tankNumber}#${item.tankUse}实收数量`] = null;
      return acc;
    }, {}),
    rules: {},
    hasTank: [] // 假设这是从外部获取的数组
  };
},

完整示例

将上述代码片段组合在一起，你的 Vue 组件可能看起来像这样：

<template>
  <uv-form
    labelPosition="left"
    :model="model"
    :rules="rules"
    ref="form"
  >
    <uv-form-item
      v-for="(item, index) in hasTank"
      :key="index"
      :label="item.tankNumber + '#' + item.tankUse + '实收数量' "
      :prop="`${item.tankNumber}#${item.tankUse}实收数量`"
      borderBottom
      required
    >
      <uv-input
        v-model="model[`${item.tankNumber}#${item.tankUse}实收数量`]"
        :placeholder="'请输入' + item.tankNumber + '#' + item.tankUse + '实收数量' "
      ></uv-input>
    </uv-form-item>

    <uv-gap :height="16" />
  </uv-form>
</template>

<script>
export default {
  data() {
    return {
      model: this.hasTank.reduce((acc, item) => {
        acc[`${item.tankNumber}#${item.tankUse}实收数量`] = null;
        return acc;
      }, {}),
      rules: {},
      hasTank: [] // 假设这是从外部获取的数组
    };
  },
  methods: {
    generateRules() {
      this.hasTank.forEach((item, index) => {
        const key = `${item.tankNumber}#${item.tankUse}实收数量`;
        this.rules[key] = [
          { required: true, message: `请输入${item.tankNumber}#${item.tankUse}实收数量`, trigger: 'blur' },
          { type: 'number', message: '必须为数字' },
          { min: 1, max: 100, message: '数量必须在1到100之间' }
        ];
      });
    }
  },
  mounted() {
    this.generateRules();
  }
};
</script>

确保你的 UI 库（例如 uv-form 和 uv-input）支持这些特性，并根据实际的库文档进行调整。