Проверка полей на заполнение

@Sezar_zp · Регистрация: 24.03.2014

Студворк — интернет-сервис помощи студентам

Помогите решить задачу, я очень зеленый в этом деле а сроки жмут. Необходимо сделать проверку на заполнение полей таблицы:
- Колонку Дата на формат ДД.ММ.ГГГГ;
- Остальное на факт заполнения;
В случаи не выполнения условий - вывести на форму сообщение. Решить нужно именно на JavaScript. Мой вариант решения кривой до ужаса, проверяет только последнее поле (и возможно даже не на яве написан

). Заранее спасибо!!!!!

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!--Указание типа документа-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
 
<html>
<head>
<title>HTML код таблицы</title>
</head>
 
<body>
 
<!--Настройка стиля таблици-->
<table border="1" cellspacing="1" cellpadding="0" style="background-color:#ffffff; color:#000000; font: bold 14px verdana;">
 
<!--Ячейки заголовки таблицы-->
<tr>
<th>Дата Вылета</th>
<th>Пункт вылета</th>
<th>Класс</th>
<th>Пункт прилета</th> 
</tr>
 
<!--Ячейки заполнения строка №1-->
<tr>
<td><input id="data_1" type="text"></td> 
<td><input id="punkt_vileta_1" type="text"></td>
 
<!--Ячейка с выпадающем меню-->
<td>    <select id="mymenu1" >
    <option></option>
    <option>VIP</option>
    <option>Бизнес</option>
    <option>Эконом</option>
    </select> 
</td>
<td><input id="punkt_prileta_1" type="text"> </td>
</tr>
 
<!--Ячейки заполнения строка №2-->
<tr>
<td><input id="data_2" type="text"></td>
<td><input id="punkt_vileta_2" type="text"></td>
<td>    <select id="mymenu2" >
    <option></option>
    <option>VIP</option>
    <option>Бизнес</option>
    <option>Эконом</option>
    </select> 
</td>
<td><input id="punkt_prileta_2" type="text"></td>
</tr>
 
</table>
 
<!--Кнопка и поле для поиска (Поле поиска очищаеться перед началом заполнения)-->
<input
 onblur="this.value=(this.value=='')?this.title:this.value;"
 onfocus="this.value=(this.value==this.title)?'':this.value;"
 value="Поиск..."
 title="Поиск..."
 type="text">
<button>Поиск</button>
 
 
 
 
 
 
 
<!--проверка заполнения-->
<br /><br /><br />
 
<div id="err"></div>
<input id="send" type="button" value="проверить" onclick="checkValue('data_1'); checkValue('punkt_vileta_1'); checkValue('mymenu1'); checkValue('punkt_prileta_1'); checkValue('data_2'); checkValue('punkt_vileta_2'); checkValue('mymenu2'); checkValue('punkt_prileta_2');">
 
<script>
    "use strict";
          function checkValue(id){
              var input = document.getElementById(id).value;
                document.getElementById('err').innerHTML = ''; 
              if (input ==""){
                  document.getElementById('err').innerHTML = 'Ошибка, поле пустое';
                  return false;
              }
          }
</script>

@newJS · 25.03.2014, 09:56

как сей чудо-код понял, так и сделал

Кликните здесь для просмотра всего текста

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<table border="1" cellspacing="1" cellpadding="0" style="background-color:#ffffff; color:#000000; font: bold 14px verdana;" id="tab">
 
<!--Ячейки заголовки таблицы-->
<tr>
<th>Дата Вылета</th>
<th>Пункт вылета</th>
<th>Класс</th>
<th>Пункт прилета</th> 
</tr>
 
<!--Ячейки заполнения строка №1-->
<tr>
<td><input type="text" value="5.7.1234"></td> 
<td><input type="text" value=""></td>
 
<!--Ячейка с выпадающем меню-->
<td>    <select>
    <option>&nbsp;</option>
    <option>VIP</option>
    <option>Бизнес</option>
    <option>Эконом</option>
<option>На халяву</option>
    </select> 
</td>
<td><input type="text"></td>
</tr>
 
<!--Ячейки заполнения строка №2-->
<tr>
<td><input type="text" value="1q.2.3456"></td>
<td><input type="text"></td>
<td>    <select>
    <option>&nbsp;</option>
    <option>VIP</option>
    <option>Бизнес</option>
    <option>Эконом</option>
<option>На халяву</option>
    </select> 
</td>
<td><input type="text"></td>
</tr>
 
<tr>
<td><input type="text" value="1.2. 3455"></td>
<td><input type="text"></td>
<td>    <select>
    <option>&nbsp;</option>
    <option>VIP</option>
    <option>Бизнес</option>
    <option>Эконом</option>
<option>На халяву</option>
    </select> 
</td>
<td><input type="text"></td>
</tr>
 
</table>
 
<!--Кнопка и поле для поиска (Поле поиска очищаеться перед началом заполнения)-->
<input
 onblur="this.value=(this.value=='')?this.title:this.value;"
 onfocus="this.value=(this.value==this.title)?'':this.value;"
 value="Поиск..."
 title="Поиск..."
 type="text">
<button title="">Поиск</button>
 
<!--проверка заполнения-->
<br /><br /><br />
 
<div id="err"></div>
<input type="button" value="проверить" onclick="checkValue();">

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
function checkValue(){
var m, k, el, c;
c="lavenderblush";
m=document.querySelectorAll("#tab td");
k=m.length;
while(k--){
el=m[k].querySelector("input, select");
s=el.value;
if(k%4===0){//все 1е ячейки, с индексом 0 в текущем ряду
if(/\d{1,2}\.\d{1,2}\.\d{4}/.test(s)){el.style.backgroundColor=""}
else{el.style.backgroundColor=c}};
 
if(k%4===1||k%4===3){//все 2е и 4е ячейки, с индексом 1 и 3 в текущем ряду
if(s.replace(/\s/g, "").length>0){el.style.backgroundColor=""}
else{el.style.backgroundColor=c}};
 
if(k%4===2){//все 3е ячейки, с индексом 2 в текущем ряду
if(el.options.selectedIndex){el.style.backgroundColor=""}
else{el.style.backgroundColor=c}}};
 
 };

Как улучшить, если это кому то нужно.
Дату нужно проверять более полно, чтобы число входило в диапазон 1-31, чтобы число соответствовало месяцу, чтобы високосный год соответствовал, и год как то проверять, для этого нужно знать какие годы можно.
Поля "Я улетел", "А Я залетела", тоже можно проверить более точно, например по наличию некоторых ключевых слов, а не просто наличие символов, ведь можно просто буковку зажать.

P.S.
Vovan-VE, а число и месяц можно регуляркой увязать? чистой регуляркой!

@Sezar_zp · 25.03.2014, 12:51 **[ТС]**

Супер, я даже код понял, кучу примеров в инете перебрал - казалось темным лесом.

Нужно реализовать вывод текстового сообщения на форму что произошла ошибка, сделал так:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
    function checkValue(){
        var m, k, el, c, i;
        c="lavenderblush";
        m=document.querySelectorAll("#tab td");
        k=m.length;
        while(k--){
        el=m[k].querySelector("input, select");
        s=el.value;
    if(k%4===0){//все 1е ячейки, с индексом 0 в текущем ряду
    if(/\d{1,2}\.\d{1,2}\.\d{4}/.test(s)){document.getElementById('err').innerHTML = ''}
    else{document.getElementById('err').innerHTML = 'Ошибка! Заполните таблицу согласно условию.'}};
 
    if(k%4===1||k%4===3){//все 2е и 4е ячейки, с индексом 1 и 3 в текущем ряду
    if(s.replace(/\s/g, "").length>0){document.getElementById('err').innerHTML = ''}
    else{document.getElementById('err').innerHTML = 'Ошибка! Заполните таблицу согласно условию.'}};
 
    if(k%4===2){//все 3е ячейки, с индексом 2 в текущем ряду
    if(el.options.selectedIndex){document.getElementById('err').innerHTML = ''}
    else{document.getElementById('err').innerHTML = 'Ошибка! Заполните таблицу согласно условию.'}}};
            };

Но в таком варианте логика хромает, получается что при наличии хотя бы одного заполоненного поля - проверка пройдет как успешная.

Сделал так... по логике все правильно, но в силу моих знаний в яве не работает, скорее всего я грубо натупил с лексикой код.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function checkValue(){
        var m, k, el, c, i;
        i==0;
        c="lavenderblush";
        m=document.querySelectorAll("#tab td");
        k=m.length;
        while(k--){
        el=m[k].querySelector("input, select");
        s=el.value;
    if(k%4===0){//все 1е ячейки, с индексом 0 в текущем ряду
    if(/\d{1,2}\.\d{1,2}\.\d{4}/.test(s)){el.style.backgroundColor=c}
    else{i=i+1}};
 
    if(k%4===1||k%4===3){//все 2е и 4е ячейки, с индексом 1 и 3 в текущем ряду
    if(s.replace(/\s/g, "").length>0){el.style.backgroundColor=c}
    else{i=i+1}};
 
    if(k%4===2){//все 3е ячейки, с индексом 2 в текущем ряду
    if(el.options.selectedIndex){el.style.backgroundColor=c}
    else{i=i+1}}
 
    if(i==0){document.getElementById('err').innerHTML = ''}
    else{i>0).innerHTML = 'Ошибка! Заполните таблицу согласно условию.'}}  
            };
        };

Vovan-VE · 25.03.2014, 15:03

Не по теме:

Сообщение от newJS

а число и месяц можно регуляркой увязать? чистой регуляркой!

29-е февраля, будь оно неладно. Чтобы узнать, високосный ли год, нужно вычислять остаток от деления. :pardon: . Хотя, с другой стороны, признаки делимости на 4, 100 и 400 в принципе можно и описать регяляркой, но длина её, пожалуй, будет обратно пропорциональна оправданности.

@newJS · 25.03.2014, 17:40

i==0; - это не присвоение, а проверка с приведением типов, или не строгая проверка
присвоение это одно равно

проверка пишется не так

JavaScript
1
2
if(i==0){}
    else{i>0)

а так

JavaScript
1
2
if(i==0){делаем если равно}
else{делаем если не равно};

переменную i замени на f(flag) и присвой ей

JavaScript
1
f=false;

и добавь к строке

JavaScript
1
el.style.backgroundColor=c[COLOR="Red"]; f=true[/COLOR]

проверяем так
if(f){ошибка};
что получим
если хотя бы одна проверка не пройдет, это поле подкрасится и будет флаг изменен, а на выходе проверим этот флаг

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function checkValue(){
var m, k, el, c, f;
f=false;
c="lavenderblush";
m=document.querySelectorAll("#tab td");
k=m.length;
while(k--){
el=m[k].querySelector("input, select");
s=el.value;
if(k%4===0){//все 1е ячейки, с индексом 0 в текущем ряду
if(/\d{1,2}\.\d{1,2}\.\d{4}/.test(s)){el.style.backgroundColor=""}
else{el.style.backgroundColor=c; f=true}};
 
if(k%4===1||k%4===3){//все 2е и 4е ячейки, с индексом 1 и 3 в текущем ряду
if(s.replace(/\s/g, "").length>0){el.style.backgroundColor=""}
else{el.style.backgroundColor=c; f=true}};
 
if(k%4===2){//все 3е ячейки, с индексом 2 в текущем ряду
if(el.options.selectedIndex){el.style.backgroundColor=""}
else{el.style.backgroundColor=c; f=true}}};
 
el=document.getElementById('err');
if(f){el.innerHTML="Ошибка! Заполните таблицу согласно условию."}
else{el.innerHTML=""};
 
 };

а зачем функцию поломал? зачем повыбрасывал, думаешь она будет правильно работать после такого варварства?

Сообщение от Vovan-VE

Чтобы узнать, високосный ли год, нужно вычислять остаток от деления.

кому интересно полностью, смотрите тут
http://ru.wikipedia.org/wiki/%... 0%BE%D0%B4

Сообщение от Vovan-VE

но длина её, пожалуй, будет обратно пропорциональна оправданности.

хотелось бы понять как это вообще можно сделать, а то я и не понял как к этому подступиться, ежели будет настроение и время...., я понятно намекнул?

вот такое слепил ради интереса, вроде правильно, но сильно не тестил

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
onload=function(){
var v, f, m;
m={1:31, 3:31, 4:30, 5:31, 6:30, 7:31, 8:31, 9:30, 10:31, 11:30, 12:31};
v=d.getElementById("ddd").value;
f=false;
//если не проходит тест, значит так или иначе нарушен синтаксис строки
if(/^(?:[1-9]|[12]\d|3[01])\.(?:[1-9]|1[012])\.\d{4}$/.test(v)){
//соответствие числа месяцу, чтобы не было 30 февраля, 31 апреля
f=v.replace(/(\d{1,2})\.(\d{1,2})\.(\d{4})/, function(a, b, c, e){
return c==2?e%4===0?29>=b?true:false:28>=b?true:false:m[c]>=b?true:false})};
alert(f);
 
 };

@Sezar_zp · 25.03.2014, 17:55 **[ТС]**

Спасибо огромное, работает лучше чем я ожидал =)

За пояснения отдельное спасибо, по хорошему нужно было инструкциями обложиться и людей не трогать.

по поводу варварства только анекдот вспоминается. =)

Кликните здесь для просмотра всего текста

Сын спрашивает отца программиста:
Сын: Пап а почему солнце всходит и заходит?
Папа: Сынок, работает - не трогай...

Vovan-VE · 26.03.2014, 14:45

Не по теме:

Сообщение от newJS

хотелось бы понять как это вообще можно сделать, а то я и не понял как к этому подступиться

Делимость на 4 очень просто проверить. Если две последние цифры составляют число, которое делится на 4, то и всё число делится на 4:

n == a * 100 + b

А все двузначные числа, делящиеся на 4, можно разбить на две группы: с четным и с нечетным количеством десятков:

00, 04, 08,	12, 16,
20, 24, 28	32, 36,
40, ...

Т.е. последние две цифры числа должны быть:

JavaScript
1
/(?:[02468][048]|[13579][26])/

Это только делимость на 4.
С делимостью на 100 проблем нет: в конце два нуля.
Делимость на 400 — это совмещение двух предыдущих пунктов.

Осталось только собрать части воедино. Ладно хоть (?!...) в JS есть, и на том спасибо.

@newJS · 26.03.2014, 21:36

Vovan-VE, спасибо, а где кнопки? куда кнопка со спасибками делась, да и другие тоже? и все прочие что под ником в левой колонке было?

Новые блоги и статьи Все статьи Все блоги /
Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .	SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .

@Sezar_zp 0 / 0 / 0 Регистрация: 24.03.2014 Сообщений: 5
	25.03.2014, 17:55 [ТС]
	Спасибо огромное, работает лучше чем я ожидал =) За пояснения отдельное спасибо, по хорошему нужно было инструкциями обложиться и людей не трогать. по поводу варварства только анекдот вспоминается. =) Кликните здесь для просмотра всего текста Сын спрашивает отца программиста: Сын: Пап а почему солнце всходит и заходит? Папа: Сынок, работает - не трогай... 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	26.03.2014, 21:36
	Vovan-VE, спасибо, а где кнопки? куда кнопка со спасибками делась, да и другие тоже? и все прочие что под ником в левой колонке было? 1

Проверка полей на заполнение

Решение