inputMode数值中MUI表单验证器min/max的问题

Question

我有一个表单，带有一些文本输入，并带有最小和最大长度的验证器。

在create中，我没有问题，但是当我调用我的API并在版本中填充表单时，输入的文本类型，但里面只有数字，则标记为错误，为min或max validation。

对于带有字母或字母和数字的输入，情况不是这样，required验证也不是这样。

我将展示一个简短的版本，但为了隔离错误，我尝试了不同的方法，而且只是针对那些验证器的数字，即使只使用一个(所以至少不适用于isNumber或required)。

当我删除和重写最后一个数字时，错误助手就消失了，验证器开始正常工作。谢谢!

import { ValidatorForm, TextValidator } from 'react-material-ui-form-validator';
import { styled } from '@mui/system';

const TextField = styled(TextValidator)(() => ({
    width: '100%',
    marginBottom: '16px',
}));

    <ValidatorForm
        onSubmit={handleSubmit}
        onError={() => null}
    >
        <Grid container spacing={6}>
            <Grid
                item
                lg={6} md={6} sm={12} xs={12}
                sx={{ mt: 2 }}
            >
                <TextField
                    type='text'
                    name='name'
                    id='name'
                    onChange={handleChange}
                    value={name || ''}
                    validators={['required']}
                    label='Nombre'
                    errorMessages={['Campo obligatorio']}
                />
                <TextField
                    type='text'
                    name='cuit'
                    id='cuit'
                    onChange={handleChange}
                    value={cuit || ''}
                    validators={[
                        'required',
                        'minStringLength:11',
                        'maxStringLength: 11',
                        'isNumber',
                        ]}
                    label='CUIT'
                    errorMessages={[
                        'Campo obligatorio',
                        'CUIT inválido',
                        'CUIT inválido',
                        'CUIT inválido',
                        ]}
                    />
            </Grid>
        </Grid>
  </ValidatorForm>

Answer 1

我解决了它添加'matchRegexp:^([0-9]{11})$'到验证器而不是min和max！