регулярное выражение для ввода только разрешенного шаблона (ввод текста)

Question

У меня есть поле ввода текста, где я хочу разрешить пример ввода шаблона:

hd546648 -ok

Vg315248 - нормально> 2 символа, которые могут быть буквой (строчные и прописные), и только 6-значные цифры

on("input", "test", function(event) {
const invalidChars = /^[^A-Za-z]{1,2}\D{1,6}$/g;
ob = event.target;
if (invalidChars.test(ob.value)) {
  ob.value = ob.value.replace(invalidChars, "");
}
});

Если я использую только этот /^[^A-Za-z]{1,2}/g; его работающий, я могу печатать только буквы в текстовое поле, но если я добавлю числовую часть, что-то не так.

Что я хочу сделать, если я наберу в поле ввода, заменит любые символы, которые не являются A-Z или a-z, для первых 2, и заменим любой другой символ, который не является числом 0-9 для 3-8. Таким образом, для первых 2 включаются только буквы, а от 3 до 8 - только цифры.

Answer 1

Использование регулярного выражения в целом не будет работать, так как каждая проверка может сделать недействительной другую часть ввода. Это решение проверяет каждый символ по очереди и усекает до длины последнего действительного символа. Скрипка здесь: https://jsfiddle.net/spwe4k21/

$(function() {
  $("#submit").attr("disabled", true);

  $("#userinput").keyup(function() {
    let input = $(this).val();
    let cleanedInput = cleanInput(input);
    $(this).val(cleanedInput);

  });
});

function cleanInput(input) {
  let tests = [/[a-z]/i, /[a-z]/i, /\d/, /\d/, /\d/, /\d/, /\d/, /\d/];
  for (let i = 0; i < tests.length; i++) {
    if (input[i] == undefined || !tests[i].test(input[i])) {
      return input.substring(0, i);
    }
  }

  return input.substring(0, tests.length);
}

Answer 2

Вы можете разбить строку, чтобы иметь эти две отдельные части, чтобы выполнить замену на обеих частях:

Обновление

document.getElementById("re").onkeypress = function (e) {
  var keys = [8, 46, 37, 38]
  if (!keys.includes(e.keyCode))
    if (!/^[a-z]([a-z]\d{0,6})?$/i.test(e.target.value + e.key))
      e.preventDefault();
};

<input id="re" placeholder="Type something">