Home / Questions / 17308
Accepted
Wuilmer Medrano
Asked: 2020-07-21 13:54:57 +0800 CST 2020-07-21 13:54:57 +0800 CST

Маска ввода текста javascript

  • 772

Я хочу замаскировать вводимый текст в следующем формате: Aa-1234, где 2 буквы — это инициалы штатов США, разделенные дефисом, а 4 цифры — это 4-значный почтовый индекс: как я мог это сделать с JavaScript?

javascript

3 Answers

  1. Best Answer

    Вы пробовали эту библиотеку JQuery?

    http://digitalbush.com/projects/masked-input-plugin/

    Он делает именно то, что вы хотите. Он не проверяет пользовательский ввод, он форматирует input textдля ввода данных с маской, которую вы ему передаете.

    В вашем случае он будет создан следующим образом:

    $("#id_input").mask("aa-9999");
    • 4

  2. Я не совсем понимаю, что вы подразумеваете под маской слова, но я думаю, что ваша цель состоит в том, чтобы проверить, что текст, предоставленный пользователем через ввод, имеет нужный вам формат, в этом случае это что-то вроде «нас-1234» или "нас-2375" и т.д. Чтобы убедиться, что данная строка соответствует требуемому формату, вы можете использовать регулярные выражения.

    Регулярное выражение, моделирующее приведенный выше формат, выглядит следующим образом:

    ^us-(\d{4})$

    Это означает, что в начале строки должна быть буква u, за которой следует s и дефис, а затем 4 цифры от 0 до 9, конец строки — это знак $.

    Чтобы использовать это в своем приложении, вам нужно использовать его следующим образом:

     exprZip = /^us-(\d{4})$/;   //tu expresión regular
 exprZip.test(textoInput);   //pruebas la expresión regular con la cadena que leiste del input y la función regresará true o false.
    • 1

  3. В inputвы можете использовать атрибут patternвместе с регулярным выражением, чтобы гарантировать, что ввод имеет нужный формат. Недостатком является то, что он пока не поддерживается всеми браузерами: он будет работать для Chrome, Firefox, Opera или IE10+, но не будет работать с Safari.

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

    • 2 буквы (которые могут быть любыми или какими угодно, но это усложнит регулярное выражение)
    • 1 дефис
    • 5 цифр (хотя в вопросе вы говорите 4, почтовые индексы США имеют 5 цифр)

    Таким образом, у вас может быть такое регулярное выражение: ^[a-zA-Z]{2}-[0-9]{5}$которое в сочетании с атрибутом patternбудет выглядеть так:

    <form>
  <input type="text" pattern="^[a-zA-Z]{2}-[0-9]{5}$" placeholder="ll-ddddd" />
  <button>Enviar</button>
</form>

    Другой вариант (на случай, если он patternне сработает) — сделать это с помощью JavaScript с тем же регулярным выражением. При отправке формы JavaScript проверяет, соответствует ли поле нужному формату, и если нет, отображается сообщение об ошибке, и оно не отправляется.

    В JavaScript это будет выглядеть так:

    document.getElementById("miform").addEventListener("submit", function(e) {
  var estado = document.getElementById("estado-cp").value;
  if (estado.match("^[a-zA-Z]{2}-[0-9]{5}$")) {
    alert("Cumple el patron");
  } else {
    alert("No cumple el patron");
    e.preventDefault(); // no se envia el formulario
  }
});
    <form id="miform">
  <input type="text" id="estado-cp" />
  <button>Enviar</button>
</form>

    Теперь, зная, что количество штатов ограничено (50) и что есть некоторые особые случаи (территории, иностранный код), вы можете дополнительно ограничить две разрешенные буквы только допустимыми (например: AL, AK , TX...), а регулярное выражение может быть таким:

    ^[AL|AK|AS|AZ|AR|CA|CO|CT|DE|DC|FL|GA|GU|HI|ID|IL|IN|IA|KS|KY|LA|ME|MD|MH|MA|MI|FM|MN|MS|MO|MT|NE|NV|NH|NJ|NM|NY|NC|ND|MP|OH|OK|OR|PW|PA|PR|RI|SC|SD|TN|TX|UT|VT|VA|VI|WA|WV|WI|WY]{2}-[0-9]{5}$
    • 1