React+Antd4.x 表单校验之最大值最小值区间联动,校验通过,错误提示全部消失

111 阅读1分钟

image.png

image.png

image.png

image.png

                {(fields, { add, remove }) => (
                  <>
                    {fields.map((field,index) => (
                        <Row className={styles.innerColRow}>
                          <Col span={13}>
                            <Form.Item
                              {...field}
                              name={[field.name, 'min']}
                              label="最小值"
                              labelCol={10}
                              rules={[
                                { required: true, message: '请输入' },
                                {
                                  validator:(rule:any, value:any, callback:any)=> {
                                    const levels = form?.getFieldValue('list');//下限
                                    const level = levels[index];
                                      if (value && !/^[+-]?\d+$/.test(value)) {
                                        return Promise.reject('请输入-100到100之间的整数');
                                      } else if (value && value > 100) {
                                        return Promise.reject('最大值不能高于100');
                                      } else if (value && value < -100) {
                                        return Promise.reject('最小值不能低于-100');
                                      } else if ( value && level.max && Number(value) > Number(level.max)) {
                                        return Promise.reject('不能大于区间上限');
                                      }
                                    return Promise.resolve();
                                  },
                                },
                              ]}
                            >
                              <Input
                                placeholder="请填写"
                                style={{ width: '80px' }}
                                min={-100}
                                max={100}
                                onChange={()=> form?.validateFields([['list',index, 'max']])}
                              />
                            </Form.Item>
                          </Col>
                          <Col span={3}>
                            <span>&nbsp;%</span>
                            <span style={{ margin: '0 8px' }}>~</span>
                          </Col>
                          <Col span={6}>
                            <Form.Item
                              {...field}
                              name={[field.name, 'max']}
                              className={styles.itemFlex2}
                              wrapperCol={24}
                              rules={[
                                { required: true, message: '请输入' },
                                {
                                  validator:(rule:any, value:any, callback:any)=> {
                                    const levels = form?.getFieldValue('list');//下限
                                    const level = levels[index];
                                      if (value && !/^[+-]?\d+$/.test(value)) {
                                        return Promise.reject('请输入-100到100之间的整数');
                                      } else if (value && value > 100) {
                                        return Promise.reject('最大值不能高于100');
                                      } else if (value && value < -100) {
                                        return Promise.reject('最小值不能低于-100');
                                      } else if ( value && level.min && Number(value) < Number(level.min)) {
                                        return Promise.reject('不能小于区间下限');
                                      }
                                    return Promise.resolve();
                                  }
                                },
                              ]}
                            >
                              <Input
                                placeholder="请填写"
                                style={{ width: '80px' }}
                                min={-100}
                                max={100}
                               ** onChange={()=> form?.validateFields([['list',index, 'min']])} **//表单列表
                                //onChange={()=> form?.validateFields(['floatFloor'])} 普通列表
                              />
                            </Form.Item>
                          </Col>
                          <Col span={2}>
                            <span>&nbsp;%</span>
                          </Col>
                        </Row>
                        ))}