Контрольная работа
Тема: Проверка форм с помощью JavaScript
Цель – изучение возможностей языка JS, создание интерактивных форм при помощи клиентских скриптов.
Тема – создать форму на web-странице с функциями проверки полей при помощи языка клиентских скриптов JS.
Задание – организовать проверки для формы, созданной в процессе выполнения лабораторной работы «создание HTML-форм».
Порядок проведения работы.
1. Создать файл index.html. Используя теги <HTML>, <HEAD>,<TITLE> и <BODY> описать общую структуру HTML документа. Создать HTML форму на заданную тему.
2. Организовать проверку корректности заполнения формы с помощью JavaScript. При помощи языка JS осуществить проверку содержимого основных полей формы при нажатии кнопки «Отправить».
При отсутствии данных в обязательных полях вывести соответствующее сообщение и прекратить обработку формы. При правильном заполнении формы открыть страницу сайта, предназначенную для обработки данных формы.
3. Организовать проверку введенного пароля или проверку от роботов в виде ответа на проверочный вопрос или ввод числа с картинки.
4. Организовать проверку на соответствие поля шаблону.
Выполнение.
Создадим шаблон сайта. Он содержит:
- название группы;
- ФИО студента;
- номер варианта;
- задание;
- форму для добавления информации, которая состоит из полей:
- наименование цветка;
- латинское название цветка;
- изображение цветка;
- частота цветения цветка;
- способ размножения цветка;
- минимальная допустимая температура;
- максимальная допустимая температура;
- описание цветка;
- ФИО отправителя;
- e-mail отправителя;
- дату добавления информации;
- e-mail разработчика;
- skype разработчика.
Рисунок 1. Общий вид шаблона сайта.
Добавление информации о частоте цветения и способе размножения выполнено в виде выпадающего списка.
Напишем скрипт, который будет проверять корректность заполнения формы перед отправкой.
Полная версия HTML-файла
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Контрольная работа</title>
</head>
<body bgcolor="lightblue" text="black" link="blue" vlink="blueviolet" alink="red">
<h1 align="center"> <font color="green" size="4">Контрольная работа по web-программированию
</font></h1>
<p align="left" color="blue">
Группа: ЦПОИС-18п<br>
Студент: Зеленов Ю.В.<br>
Вариант №1<br>
Задание: создать форму на web-странице с функциями проверки полей при помощи языка клиентских скриптов JS.
</p>
<hr width=100% align="center" color="blue" size="2">
<h3 align="left"> <font size="4">Форма для добавления информации:</font></h3>
<form name="form1" enctype="multipart/form-data" method="post" onsubmit="validate(); return false">
<p id="elem1" name="elem1">Укажите наименование цветка: <input type="text" size=20 value="" name="text1"><span style="color:red" id="nazvanie"></span><br>
<p id="elem2" name="elem2">Укажите латинское название цветка: <input type="text" size=20 value="" name="text2"><span style="color:red" id="latin"></span><br>
<br>
Добавьте изображение цветка: <input name="myfile" type="file"><span style="color:red" id="kartinka"></span><br>
<br>
Выберите частоту цветения:
<select> <name="cvetenie" size="4">
<option value="ochen chasto" > Более 1 раза в год </option>
<option value="chasto"> 1 раз в год </option>
<option value="redko"> 1 раз за 2-5 лет </option>
<option value="ochen redko"> Реже 1 раза в 5 лет </option>
</select><br><br>
Выберите способ размножения:
<select> <name="razmnozhenie" size="4" multiple>
<option value="cherinkami" > Черенками </option>
<option value="delenien"> Делением куста </option>
<option value="koren"> Корневыми отпрысками </option>
<option value="semena"> Семенами </option>
</select><br><br>
Введите минимальную допустимую температуру: <input type="text" size=20 value="" name="text3"><span style="color:red" id="minimal"></span><br><br>
Введите максимальную допустимую температуру: <input type="text" size=20 value="" name="text4"><span style="color:red" id="maximal"></span><br><br>
Введите описание цветка:<br>
<textarea name="opisanie" cols="50" rows="5"></textarea><span style="color:red" id="izlozenie"></span><br><br>
Укажите свои ФИО: <input type="text" size=20 value="" name="text5"><span style="color:red" id="fio"></span><br><br>
Укажите свой контактный e-mail: <input type="text" size=20 value="" name="text6"><span style="color:red" id="epost"></span><br><br>
Укажите дату добавления информации: <input type="text" size=20 value="" name="text7"><span style="color:red" id="datapub"></span><br><br>
<input type="submit" value="Отправить">
<input type="reset" value="Отменить">
</form>
<h4 align="left"> <font size="4">Контакты разработчика:</font></h3>
<p><a href="mailto:tageres@gmail.com">Электронная почта</a><br>
<a href="skype:tageres1">Skype</a></p>
<script type='text/javascript'>
function validate(){
// передаем значение полей формы переменным
var ex=document.form1.myfile.value;
var ex1=document.form1.opisanie.value;
var a=document.form1.text1.value;
var b=document.form1.text2.value;
var c=document.form1.text3.value;
var d=document.form1.text4.value;
var e=document.form1.text5.value;
var f=document.form1.text6.value;
var g=document.form1.text7.value;
//проверка на заполнение первого пункта
if (a.length==0){
document.getElementById("nazvanie").innerHTML=" *данное поле обязательно для заполнения";
return false;}
else{document.getElementById("nazvanie").innerHTML="";}
//проверка на корректность заполнения: допускается написание одного-двух слов на русском языке, первое - обязательно с заглавной буквы
var reg1 = /^[А-ЯЁ][а-яё]{1,}\s?([а-яё]{1,})?$/g;
if (reg1.test(a)==false) {
document.getElementById("nazvanie").innerHTML=" *поле заполнено некорректно, используйте русские буквы";
return false;}
else{document.getElementById("nazvanie").innerHTML="";}
//проверка на заполнение второго пункта
if (b.length==0){
document.getElementById("latin").innerHTML=" *данное поле обязательно для заполнения";
return false;}
else{document.getElementById("latin").innerHTML="";}
//проверка на корректность заполнения: допускается написание одного-двух слов латинскими буквами, первое - с заглавной буквы
var reg2 = /^[A-Z][a-z]{1,}\s?([a-z]{1,})?$/g;
if (reg2.test(b)==false) {
document.getElementById("latin").innerHTML=" *поле заполнено некорректно, используйте латинские буквы";
return false;}
else{document.getElementById("latin").innerHTML="";}
//проверка выбран ли файл для загрузки
if (ex.length==0){
document.getElementById("kartinka").innerHTML=" *выберите, пожалуйста, файл";
return false;}
else{document.getElementById("kartinka").innerHTML="";}
//проверка является ли файл графическим
var reg3 = /\.(?:jp(?:e?g|e|2)|gif|png|tiff?|bmp|ico)$/i;
if (reg3.test(ex)==false) {
document.getElementById("kartinka").innerHTML=" *пожалуйста, выберите графический файл";
return false;}
else{document.getElementById("kartinka").innerHTML="";}
//проверка заполнено ли поле минимальной температуры
if (c.length==0){
document.getElementById("minimal").innerHTML=" *данное поле обязательно для заполнения";
return false;}
else{document.getElementById("minimal").innerHTML="";}
//проверка на корректность: допускается написание двухзначного числа с дефисом или без перед числом
var reg4 = /^-?\d{1,2}$/g;
if (reg4.test(c)==false) {
document.getElementById("minimal").innerHTML=" *введите число";
return false;}
else{document.getElementById("minimal").innerHTML="";}
//проверка заполнено ли поле максимальной температуры
if (d.length==0){
document.getElementById("maximal").innerHTML=" *данное поле обязательно для заполнения";
return false;}
else{document.getElementById("maximal").innerHTML="";}
//проверка на корректность: допускается написание двухзначного числа с дефисом или без перед числом
var reg5 = /^-?\d{1,2}$/g;
if (reg5.test(d)==false) {
document.getElementById("maximal").innerHTML=" *введите число";
return false;}
else{document.getElementById("maximal").innerHTML="";}
//проверка корректности ввода данных о температуре min<max
var s=(Number(d)-Number(c));
if (s<0) {
alert ("Максимальная температура не может быть меньше минимальной! Введите корректные значения");
return false;}
//проверка заполнено ли поле описания цветка
if (ex1.length==0){
document.getElementById("izlozenie").innerHTML=" *введите информацию о цветке";
return false;}
else{document.getElementById("izlozenie").innerHTML="";}
//проверка заполнено ли поле ФИО отправителя
if (e.length==0){
document.getElementById("fio").innerHTML=" *данное поле обязательно для заполнения";
return false;}
else{document.getElementById("fio").innerHTML="";}
//проверка корректности заполнения поля: допускается ввод данных в формате Фамилия И.О.
var reg6 = /^[А-ЯЁ][а-яё]{1,20}\s[А-ЯЁ]\.[А-ЯЁ]\.$/g;
if (reg6.test(e)==false) {
document.getElementById("fio").innerHTML=" *пожалуйста, введите данные в формате Фамилия И.О.";
return false;}
else{document.getElementById("fio").innerHTML="";}
//проверка заполнено ли поле e-mail отправителя
if (f.length==0){
document.getElementById("epost").innerHTML=" *данное поле обязательно для заполнения";
return false;}
else{document.getElementById("epost").innerHTML="";}
//проверка корректности ввода e-mail отправителя
var reg7 = /^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$/g;
if (reg7.test(f)==false) {
document.getElementById("epost").innerHTML=" *пожалуйста, введите корректно свой e-mail";
return false;}
else{document.getElementById("epost").innerHTML="";}
//проверка заполнено ли поле даты публикации
if (g.length==0){
document.getElementById("datapub").innerHTML=" *данное поле обязательно для заполнения";
return false;}
else{document.getElementById("datapub").innerHTML="";}
//проверка даты на корректность: первое число от 01 до 31, второе - от 01 до 12, третье начинается с 19 или 20 и состоит из четырех цифр. Числа разделены точками
var reg8 = /^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[012])\.(19|20)\d{2}/g;
if (reg8.test(g)==false) {
document.getElementById("datapub").innerHTML=" *пожалуйста, введите дату в формате дд.мм.гггг";
return false;}
else{document.getElementById("datapub").innerHTML="";}
</script>
</body>
</html>
Описание.
Проверка заполнения полей формы осуществляется после нажатия элемента «Submit» формы.
1) Для проверки заполнения поля «Наименование цветка» переменной «а» передается значение однострочного текстового поля «text1». Если длина строки «а» равна 0, поле не заполнено, следовательно, выводится соответствующее сообщение и отправка формы прерывается.
Для проверки корректности заполнения данного поля используется регулярное выражение «/^[А-ЯЁ][а-яё]{1,}\s?([а-яё]{1,})?$/g », которое означает, что для заполнения поля можно использовать только символы русского алфавита и один пробел. В начале строки – одна обязательная заглавная буква, затем минимум одна строчная, далее – один необязательный пробел и после него еще одно необязательное слово длиною от одной буквы и более.
2) Для проверки заполнения поля «Латинское название цветка» переменной «b» передается значение однострочного текстового поля «text2». Если длина строки «b» равна 0, поле не заполнено, следовательно, выводится соответствующее сообщение и отправка формы прерывается.
Для проверки корректности заполнения данного поля используется регулярное выражение «/^[A-Z][a-z]{1,}\s?([a-z]{1,})?$/g », принцип работы которого аналогичен вышеприведенному, только вместо букв русского алфавита используются латинские.
3) Для проверки выбран ли пользователем файл переменной «ex» передается значение поля типа «file», т.е. путь к файлу. Если длина строки «ex» равна 0, файл не выбран, следовательно, выводится соответствующее сообщение и отправка формы прерывается.
Для проверки является ли файл графическим, используется регулярное выражение «/\.(?:jp(?:e?g|e|2)|gif|png|tiff?|bmp|ico)$/i ». Оно проверяет, чтобы конец (расширение) файла соответствовал определенным шаблонам. При проверке регистр не учитывается.
4) Частота цветения и способ размножения выбираются с помощью выпадающих списков. Данные поля не проверяются, т.к. имеют заданные значения.
5) Для проверки заполнения поля «Минимальная допустимая температура» переменной «c» передается значение однострочного текстового поля «text3». Если длина строки «c» равна 0, поле не заполнено, следовательно, выводится соответствующее сообщение и отправка формы прерывается.
Для проверки корректности заполнения данного поля используется регулярное выражение «/^-?\d{1,2}$/g », которое означает, что поле содержит 1-2 цифры, перед которыми может стоять символ «–».
6) Для проверки заполнения поля «Максимальная допустимая температура» переменной «d» передается значение однострочного текстового поля «text4». Если длина строки «d» равна 0, поле не заполнено, следовательно, выводится соответствующее сообщение и отправка формы прерывается.
Для проверки корректности заполнения данного поля используется регулярное выражение «/^-?\d{1,2}$/g », которое означает, что поле содержит 1-2 цифры, перед которыми может стоять символ «–».
7) Также реализована проверка, учитывающая чтобы максимальная введенная температура была больше или равна минимальной. Для этого переменные «d» и «c» переводятся в числовой формат, переменная s принимает значение их разности и сравнивается с нулем. Если s<0 выводится сообщение о некорректности введенных данных и отправка формы прерывается.
8) Для проверки заполнения поля «Описание цветка» переменной «ex1» передается значение многострочного текстового поля «opisanie». Если длина строки «ex1» равна 0, поле не заполнено, следовательно, выводится соответствующее сообщение и отправка формы прерывается. Проверка на корректность не осуществляется, т.к. поле может содержать любую информацию.
9) Для проверки заполнения поля «Ф.И.О. отправителя» переменной «e» передается значение однострочного текстового поля «text5». Если длина строки «e» равна 0, поле не заполнено, следовательно, выводится соответствующее сообщение и отправка формы прерывается.
Для проверки корректности заполнения данного поля используется регулярное выражение «/^[А-ЯЁ][а-яё]{1,20}\s[А-ЯЁ]\.[А-ЯЁ]\.$/g », которое означает, что вводить данные необходимо русскими буквами, в начале строки идет одна заглавная буква, затем – от одной до двадцати строчных, далее пробел, одна заглавная, точка, еще одна заглавная и еще одна точка. Т.е. данные вводятся в формате Фамилия И.О.
10) Для проверки заполнения поля «e-mail отправителя» переменной «f» передается значение однострочного текстового поля «text6». Если длина строки «f» равна 0, поле не заполнено, следовательно, выводится соответствующее сообщение и отправка формы прерывается.
Для проверки корректности заполнения данного поля используется регулярное выражение «/^[-\w.]+@([A-z0-9][-A-z0-9]+\.)+[A-z]{2,4}$/g », которое означает, что начало электронного адреса может содержать любые текстовые ASCII-символы, дефисы и точки в любом количестве, затем знак @, после которого буква латинского алфавита или цифра, далее буквы латинского алфавита, цифры и дефисы в любом количестве, далее точка и после точки от дух до четырех букв латинского алфавита.
11) Для проверки заполнения поля «дата добавления информации» переменной «g» передается значение однострочного текстового поля «text7». Если длина строки «g» равна 0, поле не заполнено, следовательно, выводится соответствующее сообщение и отправка формы прерывается.
Для проверки корректности заполнения данного поля используется регулярное выражение «/^(0[1-9]|[12][0-9]|3[01])\.(0[1-9]|1[012])\.(19|20)\d{2}/g », которое означает, что первые два символа строки могут принимать значение от 01 до 31, далее идет точка, следующие два символа могут принимать значение от 01 до 12, далее снова точка и последние четыре символа могут принимать значения от 1900 до 2099.