Предотвращение неверных форматов на основе заданного регулярного выражения

Question

У меня есть регулярное выражение для набора вариантов использования

На основании этого регулярного выражения я пытаюсь запретить пользователю вводить недопустимые форматы.

Регулярное выражение работает и предотвращает добавление недопустимых форматов пользователем.

Часть, с которой я сейчас борюсь, состоит в том, что если значение по умолчанию недопустимо, пользователь не сможет добавить дополнительные допустимые символы.

Вот что у меня есть: http://jsfiddle.net/jgqco7by/2/.

<input id="myInput" type="text" value="co vi1d-" />

var previousValue = document.getElementById('myInput').value;
var pattern = /^[a-zA-Z]+(?:[ -][a-zA-Z]+)*([ ]|[-])?$/g;

function validateInput(event) {
    event = event || window.event;
    var newValue = event.target.value || '';

    if (newValue.match(pattern)) {
        // Valid input; update previousValue:
        previousValue = newValue;
    } else {
        // Invalid input; reset field value:
        event.target.value = previousValue;
    }
}

document.getElementById('myInput').oninput = validateInput;

В этом примере, поскольку у меня есть значение по умолчанию, которое содержит число, которое не допускается, все, что я печатаю, заменяется предыдущим значением, потому что регулярное выражение продолжает возвращаться как недопустимое.

Как я могу построить это так, чтобы, если значение по умолчанию было недействительным, пользователь все еще мог добавить дополнительные значения VALID без необходимости удалять сначала недопустимые значения по умолчанию?

Answer 1

Если вы хотите, чтобы в одном и том же входе были неверные и действительные данные, я не вижу, как это будет происходить с вашим подходом.

Если вы хотите иметь начальное значение (которое может быть либо действительным, либо недействительным), а затем добавить что-то (что является действительным), тогда почему вы проверяете начальное состояние.

Третий вариант состоит в том, чтобы иметь как

• Пустое поле, так и указывать только действительные символы
• Начальное значение (действительное или недействительное) и добавление чего-либо (действительное)

И результат будет иметь действительный материал.

Пожалуйста, разместите ваш вопрос / требование более структурированным образом.

Что касается кода, я бы предложил изменить ваше регулярное выражение. Я могу дать предложения по модификации. :)

Для кода:

<input id="myInput" type="text" value="co vi1d-" />
<p id="messageField"></p>


(function() {
    const pattern = new RegExp(/^[a-zA-Z]+(?:[ -][a-zA-Z]+)*([ ]|[-])?$/g);
    const messageField  = document.getElementById('messageField');

    function validateInput(event) {
        var newValue = event.target.value; // no sense to have a check and to overwrite with window.event , its a different context
        messageField.innerText = pattern.test(newValue)  ?  '' : 'incorrect input'; // its better to use test() method rather than match()

    }

    document.getElementById('myInput').oninput = validateInput;
}());