javascript - 数字规则不适用于 ANTD 的输入

Question

我正在使用 Antd Forms 并输入:number 不起作用。

rules : {[
{type: number},
{len: 5}, // <<--- THIS ONE IS NOT WORKING
{max: 999} //<<< this one is working
]}

如您所见，我正在使用 InputNumber，我也尝试使用 Input。

当我输入除数字之外的任何内容时，我希望收到错误消息。 Antd 有这个功能，但我无法使用它。

注意:我不想使用 onChange 事件处理程序并将“validateStatus”设置为错误。

注意:我也不想使用 RegExp，因为我们的数据来自 JSON，我们不会硬编码任何值。

任何帮助都会非常有帮助。谢谢。

我正在使用 "antd": "3.26.12"版本并使用类组件。

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import {
  Form,
  Button,
  InputNumber,
  Input,  
  Row,
  Col,
} from 'antd';

class Demo extends React.Component {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  normFile = e => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  };

  render() {
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };
    return (
      <Form {...formItemLayout} onSubmit={this.handleSubmit}>

        <Form.Item label="InputNumber">
          {getFieldDecorator('input-number', { rule:[ {len : 5}]})(<InputNumber />)} //<<<<---
        </Form.Item>



        <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    );
  }
}

const WrappedDemo = Form.create({ name: 'validate_other' })(Demo);

ReactDOM.render(<WrappedDemo />, document.getElementById('container'));

Answer 1

您没有使用正确的API(rules是一个对象数组)，请参阅form docs及其示例，len 用于字符串，在 InputNumber 中无用，您可能只使用 max:

<Form.Item label="InputNumber">
  {getFieldDecorator('input-number', {
    rules: [
      {
        type: 'number',
        max: 999,
        message: 'The input is not a number, max = 999'
      }
    ]
  })(<InputNumber />)}
</Form.Item>