Тема регулярных выражений достаточно объемная и в одном уроке ее не охватить, но цель наших уроков дать Вам основные представления о языке javascript и его возможностях, поэтому и обойти стороной регулярные выражения никак нельзя.
Для начала разберемся, что же это такое. Регулярное выражение — это инструкция, описывающая на специально разработанном языке (RegExp) закон «сходства» искомой строки с образцом.
Для чего это нужно? Например:
- Для организации поиска в тексте чего-либо.
- Для замены одной части подстрок другими.
- Для проверки корректности пользовательского ввода (наверно, вы не раз сталкивались с ситуацией, когда вводили адрес своей электронной почты в какую-либо форму и получали ошибку типа «Некорректный e-mail»).
Не будем вдаваться в подробности, а посмотрим как задавать регулярные выражения. Существует два способа, в данной уроке мы рассмотрим один (создание в литеральной нотации):
var p=/pattern/flags; |
где:
pattern — шаблон, является основой регулярного выражения, определяющей критерии сопоставления строк. Состоит из литералов и метасимволов.
flags — флаги (модификаторы), задают дополнительные параметры сопоставления шаблона.
Пример:
var par=/[0-9a-z]+/i; |
Здесь [0-9a-z]+ — шаблон, буквально означающий следующее «любое количество цифр и букв 1 и более раз» (как задавать шаблон посмотрим чуть ниже).
i— флаг, означающий, что регистр символов не имеет значение.
Чтобы было понятнее о чем речь, рассмотрим пример. Предположим, что у нас есть форма, куда пользователь вводит свой e-mail и пароль. Мы хотим, чтобы при нажатии на кнопку «Отправить» осуществлялась проверка корректности ввода.
Код html-страницы будет следующим:
<html>
<head>
<title>Заголовок документа</title>
<link rel="stylesheet" type="text/css" href="cascade.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h2>Форма регистрации</h2>
<form name="forma12">
<label>E-mail:</label><br>
<input type="text" name="mail"><br>
<label>Password:</label><br>
<input type="password" name="pas"><br>
<input type="button" value="Отправить"
onclick="prov_adress(forma12);">
</form>
</body>
</html>
|
Итак, что же должна сделать функция prov_adress()? Для начала нам нужны две переменные, в которые мы поместим значения, введенные пользователем:
function prov_adress(obj) {
var adr=obj.mail.value;
var par=obj.pas.value;
} |
Теперь нам нужно задать образцы (регулярные выражения), с которыми мы и будем сравнивать то, что ввел пользователь. Здесь, я их просто приведу, о том, как их составлять поговорим позже:
function prov_adress(obj) {
var adr=obj.mail.value;
var par=obj.pas.value;
var adr_pattern=/[0-9a-z_]+@[0-9a-z_]+\.[a-z]{2,5}/i;
var par_pattern=/[0-9a-z]+/i;
} |
Теперь осуществляем проверку на сопоставление образцу. Для этого воспользуемся методом test объекта RegExp:
function prov_adress(obj) {
var adr=obj.mail.value;
var par=obj.pas.value;
var adr_pattern=/[0-9a-z_]+@[0-9a-z_]+\.[a-z]{2,5}/i;
var par_pattern=/[0-9a-z]+/i;
var prov=adr_pattern.test(adr);
var prov1=par_pattern.test(par);
} |
Строка adr_pattern.test(adr) означает следующее: проверить существование в строке adr последовательности, сопоставляющейся с регулярным выражением adr_pattern. Метод test возвращает логическое значение (true или false).
Нам осталось только указать в нашей функции, что делать в случае успешной (или неуспешной) проверки:
function prov_adress(obj) {
var adr=obj.mail.value;
var par=obj.pas.value;
var adr_pattern=/[0-9a-z_]+@[0-9a-z_]+\.[a-z]{2,5}/i;
var par_pattern=/[0-9a-z]+/i;
var prov=adr_pattern.test(adr);
var prov1=par_pattern.test(par);
if (prov==true && prov1==true) {
alert("Вы зарегистрированы!");
}
else {
alert("Введенные данные некорректны!");
}
} |
Готово, надеюсь, суть того, что мы делаем вы поняли. Но прежде, чем проверить работу нашего сценария, посмотрим, из чего же состоят наши регулярные выражения.
