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