如何在反应 js 中只允许文本框中的数字和格式作为美国手机号码格式？例如：(224) - 5623 -2365

Question

我正在使用 React 进行手机号码验证。 TextField 应仅允许数字，并将格式化为美国手机号码格式。我限制只允许数字，但格式没有发生。我正在使用 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>
        );
    }
}

Answer 1

我已将文本框限制为仅允许输入数字，并将手机号码的格式设置为美国手机号码格式。按照下面的代码。

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})/,
            '() -'
        );
        this.setState({ value: number });
    }
}

Answer 2

在您的文本字段上设置 class：

<TextField type="number"
    inputProps={{className:'digitsOnly'}}
    floatingLabelText="mobileNumber"
    value={this.state.value}
    onChange={this.handleChange}
    id={"mobileNumber"} name={"mobileNumber"}
/>

您可以在仅启用数字的文本字段上应用 class，如下所示：

$(".digitsOnly").on('keypress',function (event) {
    var keynum
    if(window.event) {// IE8 and earlier
       keynum = event.keyCode;
    } else if(event.which) { // IE9/Firefox/Chrome/Opera/Safari
       keynum = event.which;
    } else {
       keynum = 0;
    }

    if(keynum === 8 || keynum === 0 || keynum === 9) {
       return;
    }
    if(keynum < 46 || keynum > 57 || keynum === 47) {
       event.preventDefault();
    } // prevent all special characters except decimal point
}

限制在您的文本字段上粘贴和拖放：

$(".digitsOnly").on('paste drop',function (event) {
    let temp=''
    if(event.type==='drop') {
        temp =$("#mobileNumber").val()+event.originalEvent.dataTransfer.getData('text');
        var regex = new RegExp(/(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)/g); //Allows only digits to be drag and dropped
        if (!regex.test(temp)) {
           event.preventDefault();
           return false;
        }
    } else if(event.type==='paste') {
        temp=$("#mobileNumber").val()+event.originalEvent.clipboardData.getData('Text')
        var regex = new RegExp(/(^100(\.0{1,2})?$)|(^([1-9]([0-9])?|0)(\.[0-9]{1,2})?$)/g); //Allows only digits to be pasted
        if (!regex.test(temp)) {
           event.preventDefault();
           return false;
        }
    }
}

在 componentDidMount() 中调用这些事件以在页面加载后立即应用 class。

Answer 3

import Input from '@material-ui/core/Input';

改用<Input type="number" />。

Answer 4

如果您正在使用像 react-hook-form 这样的表单验证库，您可以验证你的文本框是这样的，

<TextField
     type="number"
     {...register("phonenum",{
         required: {
             value: true,
             message: 'Please fill this field',
         },
         pattern: {
             value: /^[1-9]\d*(\d+)?$/i,
             message: 'Please enter an integer',
         },
         min: {
             value: 1,
             message: 'Value should be atleast 1',
         },
   })}
   error={errors?.index ? true : false}
   helperText={errors?.index?.message}
/>

如果您只想输入 phone 个数字，我强烈建议您考虑使用 react-phone-input-2。

Answer 5

在 MUI 中非常简单只需添加行


<TextField
type='number' //ad this line
onChange={(e) => setCode(e.target.value)} label="Enter otp" />

如何在反应 js 中只允许文本框中的数字和格式作为美国手机号码格式？例如：(224) - 5623 -2365

How to allow only numbers in textbox and format as US mobile number format in react js? ex : (224) - 5623 -2365

validation

reactjs

material-ui