@DimaSBB

Валидация input (возвращает в строку false). Как исправить?

На инпуте висит событие onChange по которому выполняется фунция handleChangeField когда мы что-то пишем в инпут.
Функция handleChangeField:

const handleChangeField = (event) => {
        let value = event.target.value;
        
        setTitle(InputValidator(value, maxSize));
    }


внутри этой функции я вызываю валидатор (проверка на максимальное кол-во введенных элементов и на спец символы) который я вынес в отдельную функцию InputValidator:

const InputValidator = (value, maxSize) => {
    let regExp = /[^а-яА-Яa-zA-Z0-9\s]/.test(value);
    
    if (regExp) return false;
    if (value.length > maxSize) return false;
    
    return value;
}

export default InputValidator;


Проблема в том что когда введенное количество символов превысило допустимое или введенный символ не прошел проверку на регулярку то в инпут вписывается строчное значение "false". Как это пофиксить?
  • Вопрос задан
  • 42 просмотра
Решения вопроса 1
0xD34F
@0xD34F
Пусть валидатор возвращает true/false вместо корректное_значение/false:

const validator = (value, maxSize) =>
  !(/[^а-яА-Яa-zA-Z0-9\s]/.test(value) || value.length > maxSize);

Соответственно, setTitle вызывайте только в случае true:

if (validator(value, maxSize)) {
  setTitle(value);
}

Если же вам всё-таки необходимо, чтобы валидатор возвращал значение инпута, то он должен получать не только то, которое проверяет, но и какое-то дефолтное корректное, чтобы было что вернуть в случае отрицательного результата проверки:

const validator = (defaultValue, value, maxSize) =>
  (/[^а-яА-Яa-zA-Z0-9\s]/.test(value) || value.length > maxSize)
    ? defaultValue
    : value;

setTitle(prevValue => validator(prevValue, value, maxSize));
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы