Атрибут pattern

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

License

RobinHerbots/Inputmask

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

Copyright (c) 2010 — 2023 Robin Herbots Licensed under the MIT license (https://opensource.org/licenses/MIT)

The Inputmask has a very permissive license and this will stay that way. But when you use the Inputmask in a commercial setting, be so honest to make a small donation. This will be appreciated very much.

Inputmask is a javascript library that creates an input mask. Inputmask can run against vanilla javascript, jQuery, and jqlite.

An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, .

Thanks to Jetbrains for providing a free license for their excellent Webstorm IDE.

Thanks to Browserstack for providing a free license, so we can automate testing in different browsers and devices.

Documentation and demo page

Источник

Как создать маску для input типа email?

Нужно создать маску для

, чтобы маска была такая ____@____
Решил использовать плагин Inputmask. Нашел пример похожий на то, что мне нужно:

$(function() < $("input#email").inputmask(< mask: "*[.*][.*][.*]@*[.*][.*]", greedy: false, clearMaskOnLostFocus: false >); >);

В результате это стало выглядеть так: по одному нижнему подчеркиванию с каждой стороны. Пробовал изменять строку *[.*][.*][.*]@*[.*][.*] пока не получается нужный результат.
Как добавить подчеркивания, хотя бы по 3 с каждой стороны от символа @? Чтобы стало так: ___@___
Или посоветуете другой плагин?

mask: «*<3,20>@*<3,20>«,
можно вот так добавить домен :
mask: «*<3,20>@*<3,20>.*»,
первое число — минимальное кол-во символов, второе — максимальное

Павло, спасибо! А если понадобится вместо подчеркиваний написать буквы, например: example@example.ru?

rinatoptimus: т.е. вы хотите чтобы в поле ввода было «example@example.ru», и при вводе оно посимвольно заменялось на то что вводят? странно немного. может вам подойдет placeholder? или я неправильно вас понял?

Pavlo Barmak: заказчик говорит, надо симпатичнее сделать. Я уж не знаю, чем его это не устраивает. Надо, чтоб именно маска была.

Источник

Атрибут pattern

Указывает регулярное выражение, согласно которому требуется вводить и проверять данные в поле формы. Если присутствует атрибут pattern , то форма не будет отправляться, пока поле не будет заполнено правильно.

Синтаксис

Значения

Некоторые типовые регулярные выражения перечислены в табл. 1.

Табл. 1. Регулярные выражения

Выражение	Описание
\d 5	Одна цифра от 0 до 9.
\D [^0-9]	Любой символ кроме цифры.
\s	Пробел.
[A-Z]	Только заглавная латинская буква.
[A-Za-z]	Только латинская буква в любом регистре.
[А-Яа-яЁё]	Только русская буква в любом регистре.
[A-Za-zА-Яа-яЁё]	Любая буква русского и латинского алфавита.
2	Три цифры.
[A-Za-z]	Не менее шести латинских букв.
9	Не более трёх цифр.
6	От пяти до десяти цифр.
^[a-zA-Z]+$	Любое слово на латинице.
^[А-Яа-яЁё\s]+$	Любое слово на русском включая пробелы.
^[ 0-9]+$	Любое число.
5	Почтовый индекс.
\d+(,\d)?	Число в формате 1,34 (разделитель запятая).
\d+(\.\d)?	Число в формате 2.10 (разделитель точка).
\d\.\d\.\d\.\d	IP-адрес

       
Введите телефон в формате 2-xxx-xxx, где вместо x должна быть цифра:
 
-4">
  

Статьи по теме

Источник

15 JavaScript Input Mask Libraries

Input validation is always a chore to set up. An input mask is a way to enforce the format of the user’s input in a simple way. So here are 15 JavaScript libraries for adding an input task to input fields.

Cleave.js

Cleave.js has a simple purpose: to help you format input text content automatically. The idea is to provide an easy way to increase input field readability by formatting your typed data. By using this library, you won’t need to write any mind-blowing regular expressions or mask patterns to format input text.

Inputmask

Inputmask is a javascript library which creates an input mask. Inputmask can run against vanilla javascript, jQuery and jqlite. An inputmask helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers.

Text Mask

Text Mask is an input mask library. It can create input masks for phone, date, currency, zip code, percentage, email, and literally anything! There are convenient wrappers for React, Angular 2, Ember, and Vue.

Intl Tel Input

A JavaScript plugin for entering and validating international telephone numbers. It adds a flag dropdown to any input, detects the user’s country, displays a relevant placeholder and provides formatting/validation methods.

Imaskjs

vanilla javascript input mask.

JQuery Mask Plugin

A jQuery Plugin to make masks on form fields and HTML elements.

React Input Mask

Input masking component for React. Made with attention to UX.

Input Masking

Framework agnostic accessible input masking library. input-mask.js enables you to include a mask on any input where a specific data entry format is required. The placeholder text remains in place, displaying which characters still need to be included. The placeholder is CSS styleable. The user can enter letters and numbers. All other characters, like spaces, dashes, and parenthesis are automatically added by the script, making data entery easier when using dynamic keypads.

Vanilla Masker

VanillaMasker is a pure javascript mask input. It’s a pure JavaScript mask input. Now you can use a simple and pure javascript lib to mask your input elements, without need to load jQuery or Zepto to do it. Let’s live a lightweight client-side world using micro libraries as VanillaMasker is! Don’t worry about where this will work, because this is a cross-browser and cross-device library. And if you find any bug, please let us know about it reporting an issue.

Источник