Как проверить формат 00-00-00-0000 для текста на входе () в Javascript

Question

Здесь код работает правильно .. но в зависимости от проблемы он не работает должным образом, на самом деле я хочу проверить формат 00-00-00-0000 текст в цифре / альфа .., но этот код работает только первый раз, заполните значениетогда его работа корректна, но после простого текста заполнение проверки значения работает некорректно.

var v = "0";
var v1 = "0";
var v2 = "0";

function myFunction() {
  var x = document.getElementById("vname");
  x.value = x.value.toUpperCase();
  var add = "-";
  var string = x.value;
  var str = "";
  var len = string.length;
  if (len > 13) {
    x.value = string.substring(0, 13);
  }
  if (len > 2 && v == "0") {
    var str = x.value;
    x.value = setCharAt(str, 2, '-');
    v = "1";
  }
  if (len > 5 && v1 == "0") {
    var str = x.value;
    x.value = setCharAt(str, 5, '-');
    v1 = "1";
  }
  if (len > 8 && v2 == "0") {
    var str = x.value;
    x.value = setCharAt(str, 8, '-');
    v2 = "1";
  }
}

function setCharAt(str, index, chr) {
  if (index > str.length - 1) return str;
  return str.substr(0, index) + chr + str.substr(index + 1);
}

<input type="text" oninput="myFunction()" id="vname" />

Answer 1

Я написал более общий ответ здесь об использовании видимой маски для форматированного ввода фиксированного размера.Это должно работать для вас, если вы принимаете, что маска ввода всегда видна.Чтобы это работало, добавьте следующие атрибуты к вашему input:

<input placeholder="__-__-__-____" data-slots="_" data-accept="\w" size="13">

Обратите внимание, что он не превращает строчные буквы в прописные (что-то, против чего я бы посоветовал: вы не хотите, чтобы люди думали, что ихCAPS-замок не работает).Если вы не хотите, чтобы это работало (с маской или отсутствием верхнего регистра), вот код, специально адаптированный к вашим требованиям:

const el = document.getElementById("vname"),
    pattern = "__-__-__-____",
    prev = [1, 2, 2, 4, 5, 5, 7, 8, 8, 10, 11, 12, 13],
    accept = /\w/g,
    clean = input => {
        input = input.match(accept) || [];
        return Array.from(pattern, c =>
            input[0] === c || c == "_" ? input.shift() || c : c
        );
    },
    format = () => {
        const [i, j] = [el.selectionStart, el.selectionEnd].map(i => {
            i = clean(el.value.slice(0, i)).indexOf("_");
            return i<0? prev[prev.length-1]: back? prev[i-1] || 0: i;
        });
        let s = clean(el.value).join``.toUpperCase();
        el.value = s.slice(0, (s+"_").indexOf("_"));
        el.setSelectionRange(i, j);
        back = false;
    };
    
let back = false;
el.addEventListener("keydown", (e) => back = e.key === "Backspace");
el.addEventListener("input", format);

<input type="text" id="vname" />

Как и в ответе, о котором я говорил, это также относится к копированию / вставке (даже если в копируемых значениях нет дефисов), с выделением, помещаякурсор на полпути, удаление символов там ... и т. д.

Answer 2

Проблема, с которой вы сталкиваетесь в настоящее время, связана с тем, что вы устанавливаете некоторое состояние, изменяя переменные v, v1 и v2.Ваш форматтер должен быть без сохранения состояния, поэтому он возвращает один и тот же результат каждый раз, когда вы вызываете его с одним и тем же вводом.

Вы можете использовать шаблонную строку.Затем выполните цикл по индексу входного значения, для каждой проверки индекса в строке шаблонов, что разрешено.

function myFunction(input) {
  const format = "xx-xx-xx-xxxx";

  var value = ""; // new value
  for (let i = 0; i < input.value.length; ++i) {
    switch (format[i]) {
      case "-":
        value += "-";
        break;
      case "x":
        value += input.value[i];
        break;
    }
  }
  
  input.value = value.toUpperCase();
}

document
  .getElementById("vname")
  .addEventListener("input", event => myFunction(event.target));

<input type="text" id="vname" />

Answer 3

Попробуйте это регулярное выражение, надеюсь, оно вам поможет:

 ^([0-9]|[a-z])|([0-9]|[a-z])(\-)([0-9]|[a-z])|([0-9]|[a-z])(\-)([0-9]|[a-z])|([0-9]|[a-z])(\-)([0-9]|[a-z])|([0-9]|[a-z])([0-9]|[a-z])|([0-9]|[a-z])$