regex - 我如何编写正则表达式以仅接受 antd 输入的数字

Question

我只需要在我的 antd 输入字段中输入数字。但它接受数字和字母。因为我的需求逻辑工作正常，除了字母表。那么我怎么能写一个只接受数字的正则表达式呢？

import React from 'react'
import * as AntD from "antd";
import { Input, Tooltip } from 'antd';
const { Row, Col } = AntD;

function creditCardFormatter(value) {
  var v = value.replace(/\s+/g, '').replace(/[^0-9]/gi, '')
  var matches = v.match(/\d{4,16}/g);
  var match = matches && matches[0] || '';
  var parts = [];
  for (let i = 0, len = match.length; i < len; i += 4) {
    parts.push(match.substring(i, i + 4));
    console.log(parts)
    console.log(match)}
  if (parts.length){
    console.log(parts.length)
    return parts.join(' ');
  } else {
    return value;
  }
}
//     value += '';
//     const list = value.split('.');
//     const prefix = list[0].charAt(0) === '-' ? '-' : '';
//     let num = prefix ? list[0].slice(2) : list[0];
//     let result = '';
//     while (num.length > 4) {
//       result = ` ${num.slice(-4)}${result}`;
//       num = num.slice(0, num.length - 4);
//     }
//     if (num) {
//       result = num + result;
//     }  
//     return `${prefix}${result}${list[1] ? `.${list[1]}` : ''}`;
// }
class NumericInput extends React.Component {


  onChange = (e) => {
    const { value } = e.target;
    this.props.onChange(creditCardFormatter(value));
  }

  render() {
    const { value } = this.props;

    return (

      <div align="center">
        <Col push={5}>
          <label>Enter Number Here :</label>
          <br />
          <Input
            {...this.props}
            onChange={this.onChange}
            placeholder="Input a number"
          />
        </Col>
      </div>
    );
  }
}

class InputElement extends React.Component {
  constructor(props) {
    super(props);
    this.state = { value: '' };
  }
  onChange = (value) => {
    this.setState({ value });
  }
  render() {
    return <NumericInput style={{ width: 120 }} value={this.state.value} onChange={this.onChange} />;
  }
}    

export default InputElement

Answer 1

对于数字，您始终可以使用 InputNumber在 Ant 金服。

如果您不想使用它，那么您仍然不必编写 onchange 函数，antd 允许您添加 validation rules在田野上。
例如:

{getFieldDecorator("testNumber", {
        rules: [
          {
            required: true,
            type: "regexp",
            pattern: new RegExp(/\d+/g),
            message: "Wrong format!"
          }
        ]
      })(<Input />)}

现在对于数字只有正则表达式使用这个

/\d+/g;