#regex #reactjs #antd
#регулярное выражение #reactjs #antd
Вопрос:
Я должен вводить только числа в мое поле ввода 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 amp;amp; 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 resu<
// }
// 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
Ответ №1:
Только для цифр вы всегда можете использовать inputNumber в antd.
в случае, если вы не хотите использовать это, вам все равно не нужно писать функцию onchange, antd позволяет добавлять правила проверки к полям. например:
{getFieldDecorator("testNumber", {
rules: [
{
required: true,
type: "regexp",
pattern: new RegExp(/d /g),
message: "Wrong format!"
}
]
})(<Input />)}
и теперь для регулярных выражений только для цифр используйте это
/d /g;
Комментарии:
1. Просто установите type в «number»
2. Для меня это сработало, только если я удалил тип. т.е.
{ required: true, pattern: new RegExp(/d /g) }
3.
{type: "regexp"}
предназначено для случаев, когда входное значение должно иметь тип RegExp, а не для проверки правила с помощью RegExp . github.com/yiminghe/async-validator#type
Ответ №2:
Попробуйте это как функцию onChange :
onChange = (e) => {
const { value } = e.target;
const reg = /^-?(0|[1-9][0-9]*)(.[0-9]*)?$/;
if ((!Number.isNaN(value) amp;amp; reg.test(value)) || value === '' || value === '-') {
this.props.onChange(value);
}
}
Ответ №3:
Только для чисел вы можете просто установить тип в «число»:https://github.com/yiminghe/async-validator#type
Для вашего случая использования, я думаю, регулярное выражение сложнее.