- •1. Цель работы
- •2. Методические указания по организации самостоятельной работы
- •2.1 Классы проверки данных (валидаторы)
- •2.2 Регулярные выражения
- •2.3 Использование регулярных выражений в JavaScript
- •2.4 Проверка формы отправки почты
- •3. Порядок выполнения работы и индивидуальные задания
- •3.1 Содержание отчета
- •3.2 Индивидуальные задания
2.3 Использование регулярных выражений в JavaScript
При поиске по тексту можно использовать шаблон, описывающий подстроку. В JavaScript такой шаблон может быть описан с помощью объекта RegExp. В простейшем случае такой шаблон описывает отдельный символ, однако имеет смысл его использовать для регулярных выражений.
Следующий ниже код описывает RegExp объект с именем pttn, содержащий регулярное выражение, описывающее целое десятичное число:
var pattn = new RegExp("/[0-9]+/");
Объект RegExp имеет 3 встроенных метода: test(), exec() и compile().
Метод test() выполняет поиск по шаблону:
var pattn = new RegExp("[0-9]+");
document.write(pattn.test("38 попугаев"));
Результат:
true
Метод exec() выполняет поиск подстроки по шаблону и возвращает найденные соответствия; если соответствий нет, возвращается значение null:
var pattn=new RegExp("[0-9]+");
document.write(pattn.exec("38 попугаев"));
Результат:
38
Если необходимо найти все соответствия, то при вызове конструктора RegExp следует указать дополнительный параметр "g", указывающий на необходимость глобального поиска:
var pattn = new RegExp("[0-9]+", "g");
do
{
result = pattn.exec("1 попугай, 2 попугая,…, 38 попугаев");
document.write(" " + result);
}
while (result != null)
Пример 2.1.
Результат:
1 2 38 null
Метод compile() применяется для изменения ранее созданного шаблона:
var pattn = new RegExp("[0-5]+");
document.write(pattn.exec("38 попугаев"));
pattn.compile("[6-9]+");
document.write(";" + pattn.exec("38 попугаев"));
Пример 2.2.
Результат:
3;8
2.4 Проверка формы отправки почты
Предположим, нужно проверить форму обратной связи перед отправкой данных на почтовый ящик. Форма содержит поля: имя отправителя, текст сообщения, почтовый ящик отправителя. Код формы : <html> <head> <title>Форма обратной связи</title> </head> <body> <form method = “POST” action=””> <table> <tr> <td>Отправитель:</td> <td><input type="text" name="fio"/></td> </tr> <tr> <td>Сообщение:</td> <td><textarea name="msg"></textarea></td> </tr> <tr> <td>Почтовый ящик: </td> <td><input type="text" name="mail"/></td> </tr> <tr> <td colspan="2" align="right"><input type="submit" name="send" value="Отправить"></td> </tr> </table> </form> </body> </html> Нужно проверить поля:
- поле «отправитель» нужно проверить на наличие записи и что в это поле введены только символьные знаки ([а-я]),
- поле «сообщение» проверить на наличие текста,
- поле «почтовый ящик» на корректность введенного адреса.
Для проверки нужно написать JavaScript функцию, которая будет вызываться при отправке формы. Можно воспользоваться событием onsubmit, при возникновении которого и будет вызываться функция обработки формы. Данная функция checkForm() будет возвращать значение true при успешной проверке и false при некорректном вводе заполняемой информации. Также в функцию виде параметра следует передавать ссылку на форму, через которую можно обращаться к элементам формы. <script> function checkForm(obj){ var return_value = true;
// регулярное выражение для проверки почтового ящика: var reg_mail = /[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i;
// регулярное выражение для проверки отправителя var reg_sender = /[a-z]+/i;
// заносим значение поля почтовый ящик в переменную mail var mail = obj.mail.value;
// заносим значение поля отправитель в переменную sender var sender = obj.fio.value;
// заносим значение поля сообщение в переменную msg var msg = obj.msg.value;
// объявляем переменную, в которую будет заносится текст сообщения var error_msg = "Некорректно заполнены поля: "; //проверка поля отправитель if(reg_sender.exec(sender) == null && sender =="")
{ error_msg += "Отправитель "; return_value = false; } //проверка поля почтовый ящик if(reg_mail.exec(mail) == null)
{ error_msg += "Почтовый ящик "; return_value = false; } //проверка поля текст сообщения if(msg == "")
{ error_msg += "Текст сообщения "; return_value = false; } //проверка на наличие ошибок, если возникла ошибка, выводим текст сообщения if(!return_value) alert(error_msg); return return_value; } </script>
Полностью код будет иметь следующий вид: <html> <head> <title>Форма обратной связи</title> <script> function checkForm(obj){ var return_value = true;
// регулярное выражение для проверки почтового ящика: var reg_mail = /[0-9a-z_]+@[0-9a-z_^.]+.[a-z]{2,3}/i;
// регулярное выражение для проверки отправителя var reg_sender = /[a-z]+/i;
// заносим значение поля почтовый ящик в переменную mail var mail = obj.mail.value;
// заносим значение поля отправитель в переменную sender var sender = obj.fio.value;
// заносим значение поля сообщение в переменную msg var msg = obj.msg.value;
// объявляем переменную, в которую будет заносится текст сообщения var error_msg = "Некорректно заполнены поля: "; //проверка поля отправитель if(reg_sender.exec(sender) == null && sender =="")
{ error_msg += "Отправитель "; return_value = false; } //проверка поля почтовый ящик if(reg_mail.exec(mail) == null)
{ error_msg += "Почтовый ящик "; return_value = false; } //проверка поля текст сообщения if(msg == "")
{ error_msg += "Текст сообщения "; return_value = false; } //проверка на наличие ошибок, если возникла ошибка, выводим текст сообщения if(!return_value) alert(error_msg); return return_value; } </script>
</head> <body> <form method = “POST” action=”#” onsubmit="return checkForm(this);"> <table> <tr> <td>Отправитель:</td> <td><input type="text" name="fio"/></td> </tr> <tr> <td>Сообщение:</td> <td><textarea name="msg"></textarea></td> </tr> <tr> <td>Почтовый ящик: </td> <td><input type="text" name="mail"/></td> </tr> <tr> <td colspan="2" align="right"><input type="submit" name="send" value="Отправить"></td> </tr> </table> </form> </body> </html> Для отправки почты используется функция PHP mail(). Файл mail.php будет содержать следующий код:
?php
if (isset($_POST['send']))
{
$to=$_POST['mail'];
$tema="Message";
$content=$_POST['msg'];
$from=$_POST['fio'];
mail($to, $tema, $content, $from);
}
?>