diff --git a/package-lock.json b/package-lock.json index 6aaf3bc..486f987 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "tables-and-forms", "version": "1.0.0", "license": "ISC", "dependencies": { diff --git a/server.js b/server.js index e5f002e..4b1e83e 100644 --- a/server.js +++ b/server.js @@ -25,6 +25,29 @@ const pageFoot = `; +// Валидация двнных формы: emal, мобильный телефон, имя, дата рождения +// Остальные данные вводятся "по-шаблону", поэтому там ошибок не может быть +function validation (value) +{ + // Дата рождения не должна быть больше системной даты + const sysdate = new Date(); + const mydate = new Date(value.dateOfBirth); + if (mydate > sysdate) + return `

Ошибка!!! Дата рождения не может быть больше сегодня

`; + // Имя должно соcтоять из букв + const NAME_REGEXP = /[A-Z\sА-Я]/i; + if (!NAME_REGEXP.test(value.name) || value.name.length < 3) + return `

Ошибка!!! Имя должно состоять из букв и содержать не менее 3 символов

`; + // email + const EMAIL_REGEXP = /^(([^<>()[\].,;:\s@"]+(\.[^<>()[\].,;:\s@"]+)*)|(".+"))@(([^<>()[\].,;:\s@"]+\.)+[^<>()[\].,;:\s@"]{2,})$/iu; + if (!EMAIL_REGEXP.test(value.email)) + return `

Ошибка!!! Не верный формат email

`; + // мобильный телефон (содержит 10 цифр) + const PHONE_REGEXP = /^[2-9]\d{2}[2-9]\d{2}\d{4}$/; + if (!PHONE_REGEXP.test(value.phone.replace(/\D/g,""))) + return `

Ошибка!!! Не верный формат номера мобильного телефона

`; +}; + app.listen(port, (err) => { if (err) { return console.log('something bad happened', err); @@ -39,10 +62,12 @@ app.use(express.urlencoded({ extended: true })); app.post('/pets/orders', (request, response) => { const reqBody = request.body; - const pageBody = constructPageBody(reqBody); - + let pageBody = constructPageBody(reqBody); + // Валидация (если вернулась не пустая строка, то была ошбка ввода данных) + const valid = validation(reqBody); + if (valid) pageBody = valid; + console.log(request.body); response.send(`${pageHead}${pageBody}${pageFoot}`); }); - diff --git a/static/index.html b/static/index.html index 514b62f..0e3f36e 100644 --- a/static/index.html +++ b/static/index.html @@ -8,9 +8,84 @@

Найди себе друга!

- +

Мы найдем питомцев, которые могут стать Вашим маленьким другом. + Информация будет направлена на указанный Вами канал связи. +

+
+
+

Характеристики питомца

+ + + + + + + + + + + + + + + +
ЖивотноеПолЦвет глазДлина хвостаДата рождения
+ + +
Мальчик
+
Девочка
+
Не важно
+ 		+ + + + + +
+

+ +

+
+ +
+

Ваши контактные данные

+ + + + + + +
+ + + + + +
+
+

+ Ты навсегда в ответе за всех, кого приручил + [Антуан де Сент-Экзюпери Маленький принц] +

+

+ + Я согласен с условиями и правилами +

+

+ + - +
\ No newline at end of file diff --git a/static/styles.css b/static/styles.css index ef86c9a..6594bb3 100644 --- a/static/styles.css +++ b/static/styles.css @@ -19,7 +19,37 @@ h1 { margin-top: 0; font-size: 50px; text-align: center; - color: rgba(173,38,164,0.67); + color: rgba(100,38,100,0.67); +} + +h2 { + font-family: "Segoe UI Light", "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; + font-weight: 200; + margin-top: 0; + font-size: 25px; + color: rgba(100,38,100,0.67); +} + +table { + width: 100%; +} + +th { + text-align: left; +} + +#mf {background-color: white;} +tr:nth-child(even) { background-color: rgba(100,38,100,0.2); } + +p { + text-align:center; +} + +section { + margin: 10px 0; + border: 3px dotted #ddd; + padding: 10px; + font-family: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif; } .error {