我正在使用 React 进行手机号码验证。文本字段应仅允许输入数字,并且其格式将设置为美国手机号码格式。我限制只允许数字,但格式没有发生。我正在使用 Material-ui 进行验证。下面是我的代码。
import React from 'react';
import TextField from '@material-ui/core/TextField';
export default class myClass extends React.Component {
constructor(props) {
super(props);
this.state = {
value: '',
};
this.handleChange = this.handleChange.bind(this);
}
handleChange(e) {
const re = /[0-9]+/g;
if (e.target.value === '' || re.test(e.target.value)) {
this.setState({ value: e.target.value });
}
}
render() {
return (
<div>
<TextField
floatingLabelText="mobileNumber"
onChange={this.handleChange}
value={this.state.value}
/>
</div>
);
}
}
最佳答案
我已将文本框限制为仅允许数字,并将手机号码格式设置为美国手机号码格式。请按照以下代码操作。
handleChange(e) {
const onlyNums = e.target.value.replace(/[^0-9]/g, '');
if (onlyNums.length < 10) {
this.setState({ value: onlyNums });
} else if (onlyNums.length === 10) {
const number = onlyNums.replace(
/(\d{3})(\d{3})(\d{4})/,
'($1) $2-$3'
);
this.setState({ value: number });
}
}
关于reactjs - 如何在 react js中仅允许文本框中的数字和格式为美国手机号码格式?前 : (224) - 5623 -2365,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43134195/