antdv循环formItem表单校验_antd 遍历表单验证

a-form绑定:model=“formobj”
a-form-item外面的template循环v-for=“(item, index) in formobj.formlist”
a-form-item的:name=“[‘formlist’, index, ‘settingMin’]”
a-input-number绑定对应值v-model:value=“item.settingMin”
每个字段校验自身的方法跟平时写法一样，在当前规则中触发其他字段的校验方法：
settingForm.value.validateFields([name])
其中name为a-form-item绑定的name：[‘formlist’, index, ‘settingMin’]
官方文档中的说明：

代码如下：
在当前字段可绑定@change去触发，也可以在当前validator的方法中触发另一个(注释中)

<template>
  <div class="hello">
    左边要小于右边， 改变左边，左边校验，同时触发右边的校验
    <a-form size="small" ref="settingForm" :model="formobj">
      <template v-for="(item, index) in formobj.formlist" :key="index">
        <a-form-item
          class="lowDivide"
          label="低-中分界线"
          :name="['formlist', index, 'settingMin']"
          :rules="rules1"
          :wrapperCol="{ span: 24 }"
        >
          <a-input-number
            size="small"
            :min="0"
            :max="100"
            :step="1"
            :precision="0"
            style="width: 40px"
            @change="changeValidate(['formlist', index, 'settingMax'])"
            v-model:value="item.settingMin"
          />
          %
        </a-form-item>
        <a-form-item
          class="highDivide"
          label="中-高分界线"
          :name="['formlist', index, 'settingMax']"
          :rules="rules2"
        >
          <a-input-number
            size="small"
            :min="0"
            :max="100"
            :step="1"
            :precision="0"
            @change="changeValidate(['formlist', index, 'settingMin'])"
            style="width: 40px"
            v-model:value="item.settingMax"
          />
          %
        </a-form-item>
        <a-divider></a-divider>
      </template>
    </a-form>
  </div>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import axios from "axios";
const settingForm = ref();
const formobj = reactive({
  formlist: [],
});
let validateMin = async (_rule, value) => {
  if (!value && value !== 0) {
    return Promise.reject("请填写");
  } else {
    if (
      formobj.formlist[_rule.field.split(".")[1]].settingMax ||
      formobj.formlist[_rule.field.split(".")[1]].settingMax === 0
    ) {
       自定义校验同一行另一个formItem
      //settingForm.value.validateFields(
      即用[]包裹住命名的name
      //  [["formlist",Number(_rule.field.split(".")[1]),"settingMax"]]
      //);
      if (value >= formobj.formlist[_rule.field.split(".")[1]].settingMax) {
        return Promise.reject(
          "需<" + formobj.formlist[_rule.field.split(".")[1]].settingMax
        );
      }
    } else return Promise.resolve();
    return Promise.resolve();
  }
};
let validateMax = async (_rule, value) => {
  if (!value && value !== 0) {
    return Promise.reject("请填写");
  } else {
    if (
      formobj.formlist[_rule.field.split(".")[1]].settingMin ||
      formobj.formlist[_rule.field.split(".")[1]].settingMin === 0
    ) {
       自定义校验同一行另一个formItem
      //settingForm.value.validateFields(
      即用[]包裹住命名的name
      //  [["formlist",Number(_rule.field.split(".")[1]),"settingMin"]]
      //);
      if (value <= formobj.formlist[_rule.field.split(".")[1]].settingMin) {
        return Promise.reject(
          "需>" + formobj.formlist[_rule.field.split(".")[1]].settingMin
        );
      } else {
        return Promise.resolve();
      }
    } else return Promise.resolve();
  }
};
const rules1 = [
  { required: true, type: "number", validator: validateMin, trigger: "change" },
];
const rules2 = [
  { required: true, type: "number", validator: validateMax, trigger: "change" },
];
const getList = async () => {
  let res = await axios.get("/formdata.json");
  if (res) {
    console.log("res", res);
    formobj.formlist = res.data.data;
  }
};
const changeValidate = (rule) => {
  console.log(rule);
  settingForm.value.validateFields([rule]);
};
onMounted(() => {
  getList();
});
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
:deep(.lowDivide) {
  display: inline-block;
  position: relative;
  top: 0;
  left: -90px;
}
:deep(.highDivide) {
  display: inline-block;
  position: relative;
  top: 0;
  right: -90px;
}
.ant-divider {
  margin-top: 0px;
}
.form-title::before {
  display: inline-block;
  margin-inline-end: 4px;
  color: #ff4d4f;
  font-size: 14px;
  font-family: SimSun, sans-serif;
  line-height: 1;
  content: "*";
}
:deep(.ant-form-item .ant-input-number-handler-wrap) {
  display: none;
}
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153

界面效果如下图：