Каждому веб-разработчику знакомо это чувство: вы создали форму и издаете стон, когда понимаете, что теперь вам нужно проверить каждое поле.
К счастью, проверка формы не должна быть болезненной. Вы можете использовать регулярные выражения для обработки многих распространенных потребностей проверки.
Что такое регулярные выражения?
Регулярные выражения описывают шаблоны, соответствующие комбинациям символов в строках. Вы можете использовать их для представления таких понятий, как «только цифры» или «ровно пять заглавных букв».
Регулярные выражения (также называемые регулярными выражениями) — это мощные инструменты. У них много применений, включая расширенный поиск, поиск и замену и операции проверки строк. Одним из известных приложений регулярных выражений является команда grep в линукс.
Зачем использовать регулярные выражения для проверки?
Есть много способы проверки ввода формы, но регулярные выражения просты, быстры и удобны в использовании, если вы понимаете, как это сделать.
JavaScript имеет встроенную поддержку регулярных выражений. Это означает, что использование их для проверки, а не внешней библиотеки, помогает максимально уменьшить размер вашего веб-приложения.
Регулярные выражения также способны проверять многие типы ввода формы.
Основы регулярных выражений
Регулярные выражения состоят из символов, описывающих шаблоны, образованные символами в строке. В JavaScript вы можете создать литерал регулярного выражения, написав его между двумя косыми чертами. Простейшая форма регулярного выражения выглядит так:
/abc/Приведенное выше регулярное выражение будет соответствовать любой строке, которая последовательно включает символы «a», «b» и «c» в указанном порядке. Строка «abc» будет соответствовать этому регулярному выражению, а также строке типа «abcdef».
Вы можете описать более сложные шаблоны, используя специальные символы в регулярных выражениях. Специальные символы не представляют буквальный символ, но они делают ваше регулярное выражение более выразительным.
Вы можете использовать их, чтобы указать, что часть шаблона должна повторяться определенное количество раз, или указать, что некоторые из шаблонов являются необязательными.
Примером специального символа является «*». Символ «*» изменяет либо один символ, либо группу символов, стоящих перед ним. Он объявляет, что эти символы могут отсутствовать или повторяться любое количество раз подряд. Например:
/abc*/
Соответствует «ab», за которым следует любое количество символов «c». Строка «ab» является допустимым примером этого шаблона, поскольку символ «c» является необязательным. Строки «abc» и «abccccc» одинаково допустимы, потому что «*» означает, что «c» может повторяться любое количество раз.
Полный синтаксис регулярного выражения использует еще несколько символов шаблона для описания возможных совпадений. Вы можете узнать больше из Regex 101 от regexlearn.com интерактивный курс. Руководство MDN по JavaScript тоже очень полезно.
Проверка формы с помощью регулярных выражений
Вы можете использовать регулярное выражение для проверки ввода формы несколькими способами. Первый способ — использовать JavaScript. Он включает в себя несколько шагов:
- Получить значение ввода формы.
- Проверьте, соответствует ли значение ввода регулярному выражению.
- Если это не так, покажите пользователю веб-сайта, что значение поля ввода недействительно.
Вот краткий пример. Учитывая поле ввода, подобное этому:
<ввод-заполнитель ="Поле ввода">Вы можете написать функцию для ее проверки следующим образом:
функцияподтверждать() {
позволять значение = документ.querySelector("вход").значение;
константа регулярное выражение = /^.{3,7}$/;
возвращаться regEx.test (значение);
}Другой способ — воспользоваться возможностями браузера по проверке HTML-форм. Как? Указав регулярное выражение в качестве значения атрибута шаблона тега ввода HTML.
Атрибут шаблона действителен только для следующих типов ввода: текст, телефон, электронная почта, URL-адрес, пароль и поиск.
Вот пример использования атрибута шаблона:
<форма>
<ввод-заполнитель ="Поле ввода" требуемый шаблон ="/^.{3,7}$/">
<кнопка>Представлять на рассмотрение</button>
</form>Если вы отправляете форму, а значение ввода не соответствует всему регулярному выражению, форма отобразит ошибку по умолчанию, которая выглядит следующим образом:
Если регулярное выражение, указанное в атрибуте шаблона, неверно, браузер проигнорирует этот атрибут.
Общие шаблоны регулярных выражений для проверки формы
Создание и отладка регулярного выражения с нуля может занять некоторое время. Вот несколько операторов регулярных выражений, которые можно использовать для проверки некоторых из наиболее распространенных типов данных формы.
Регулярное выражение для проверки длины строки
Одним из наиболее распространенных требований проверки является ограничение на длину строки. Регулярное выражение, которое будет соответствовать строке из семи символов:
/^.{7}$/"." — это заполнитель, который соответствует любому символу, а цифра «7» в фигурных скобках указывает ограничение длины строки. Если длина строки должна быть в пределах определенного диапазона, например, от трех до семи, вместо этого регулярное выражение будет выглядеть так:
/^.{3,7}$/И если строка должна быть длиной не менее трех символов без верхнего предела, она будет выглядеть так:
/^.{3,}$/Маловероятно, что длина будет единственным требованием проверки для ввода формы. Но вы часто будете использовать его как часть более сложного регулярного выражения, включающего другие условия.
Регулярное выражение для проверки полей, состоящих только из букв
Некоторые входные данные формы не должны содержать ничего, кроме букв, чтобы быть действительными. Следующее регулярное выражение будет соответствовать только таким строкам:
/^[a-zA-Z]+$/Это регулярное выражение задает набор символов, состоящий из всего алфавита. Специальный символ «+» означает, что предшествующий символ должен встречаться хотя бы один раз без верхнего предела.
Регулярное выражение для проверки числовых полей
Следующее регулярное выражение будет соответствовать только строкам, полностью состоящим из цифр:
/^\d+$/Приведенное выше регулярное выражение по существу такое же, как и предыдущее. Единственное отличие состоит в том, что он использует специальный символ "\d" для представления диапазона цифр, а не для их записи.
Регулярное выражение для проверки буквенно-цифровых полей
Регулярные выражения также упрощают проверку буквенно-цифровых полей. Вот регулярное выражение, которое будет соответствовать только строкам, состоящим из букв и цифр:
/^[a-zA-Z\d]+$/Некоторые поля являются буквенно-цифровыми, но позволяют использовать несколько других символов, таких как дефисы и символы подчеркивания. Одним из примеров таких полей является имя пользователя. Ниже приведено регулярное выражение, которое соответствует строке, состоящей из букв, цифр, знаков подчеркивания и дефисов:
/^(\w|-)+$/Специальный символ "\w" соответствует целому классу символов, например "\d". Он представляет собой диапазон букв, цифр и символа подчеркивания ("_").
Регулярное выражение для проверки телефонных номеров
Номер телефона может быть сложным полем для проверки, поскольку в разных странах используются разные форматы. Очень общий подход состоит в том, чтобы убедиться, что строка содержит только цифры и что ее длина находится в определенном диапазоне:
/^\d{9,15}$/Более сложный подход может выглядеть так, как этот, взятый из МДН, который проверяет номера телефонов в формате ###-###-####:
/^(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}$/Регулярное выражение для проверки дат
Как и номера телефонов, даты также могут иметь несколько форматов. Даты обычно легче проверить, чем номера телефонов. Почему? Даты не содержат никаких символов, кроме цифр и дефисов.
Вот пример проверки дат в формате «ДД-ММ-ГГГГ».
/^\d{2}-\d{2}-\d{4}$/Проверка с помощью регулярных выражений проста
Регулярные выражения описывают шаблоны, соответствующие комбинациям символов в строках. У них есть множество приложений, таких как проверка пользовательского ввода из HTML-форм.
Вы можете использовать регулярное выражение для проверки с помощью JavaScript или с помощью атрибута шаблона HTML. Легко создавать регулярные выражения для проверки общих типов входных данных формы, таких как даты и имена пользователей.
