Использование готовых модулей для валидации

@ds102061 · Регистрация: 13.10.2010

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

Есть прорисованные поля :

номер карты: формат ввода 0000 0000 0000 0000
email

И надо добавить готовую библиотеку для их валидации.
На просторах интернета нашла многое и вроде приглянулся joi (https://joi.dev/) (либо какой то получше и проще, подскажите пожалуйста)

JavaScript
1
2
3
const Joi = require("joi");
const cardNumber = Joi.string().creditCard(),
  emailCard = Joi.string().email({ tlds: false }),

Добавила в код. но не поняла как использовать их далее

@Eva Rosalene · 21.10.2024, 04:07

Вам нужно создать схему и сравнить данные из формы с вашей схемой, например, перед отправкой. В случае с ошибкой при валидации, объект ошибки содержит в себе массив details, внутри которого у объектов есть свойство path, по которому можно понять, в каком месте формы произошла ошибка, и, например, подсветить.

PHP/HTML
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
<script src="https://www.unpkg.com/joi@17.13.3/dist/joi-browser.min.js"></script>
<style>
  .main-form {
    display: grid;
    grid-template-columns: auto auto;
    width: fit-content;
    gap: 8px;
  }
 
  .main-form input {
    width: 30ch;
  }
 
  .submit {
    grid-column: 1 / span 2;
  }
 
  .error {
    border-color: red;
  }
</style>
<form id="form" class="main-form" action="/submit">
  <label for="credit-card">Credit card number: </label>
  <input id="credit-card" name="card">
  <label for="email">Email address: </label>
  <input id="email" name="email">
  <button type="submit" class="submit">Submit</button>
</form>
<script>
  const form = document.getElementById("form");
  const schema = joi.object({
    card: joi.string().creditCard().required(),
    email: joi.string().email({ tlds: false }).required(),
  });
 
  form.addEventListener("submit", e => {
    Array.from(e.target.elements).forEach(i => i.classList.remove("error"));
 
    const data = new FormData(e.target);
    const json = Object.fromEntries(data);
    const {error} = schema.validate(json);
    if (!error) {
      return; // send form
    }
 
    e.preventDefault();
    const {details} = error;
    for (const detail of details) {
      const {path} = detail;
      const [name] = path;
      e.target.elements[name]?.classList.add("error");
    }
  });
</script>

Демо: https://codepen.io/eva-rosalene/pen/PoMKJRb

Добавлено через 2 минуты

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

Есть прорисованные поля :

номер карты: формат ввода 0000 0000 0000 0000

Вы точно хотите финансовую информацию сами обрабатывать? Почему бы не посылать пользователя на платёжный шлюз и там уже пусть матёрые компании сами обеспечивают безопасность и прочее?

@ds102061 · 23.10.2024, 19:29 **[ТС]**

Хочу добавить валидатор card-validator (https://www.npmjs.com/package/card-validator) , по документации не особо поняла, как работает. Вот есть код. куда и как его прицепить?

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
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
import { drawingForm } from "./drawing_form.js";
import { numberAutoFormat, dateAutoFormat, isNotDate } from "./validate.js";
const valid = require("card-validator");
 
drawingForm(); //Прорисовка формы
 
const number = document.getElementById("number");
const date = document.getElementById("date");
const cvv = document.getElementById("cvv");
const email = document.getElementById("email");
const button = document.getElementById("button");
 
// Number card
number.addEventListener("input", function (e) {
  number.value = numberAutoFormat();
  let error = schema.validate({ cardNumber: number.value });
 
  let alert2 = document.getElementById("alert-2");
  showError(alert2, error);
});
// Data card
date.addEventListener("input", function (e) {
  this.value = dateAutoFormat();
 
  let alert3 = document.getElementById("alert-3");
  showError(alert3, isNotDate(this));
});
 
// CVC/CVV
cvv.addEventListener("input", function (e) {
  let alert4 = document.getElementById("alert-4");
  let error = this.value.length < 3;
  showError(alert4, error);
});
// email
 
email.addEventListener("input", function (e) {
  let alert4 = document.getElementById("alert-5");
  let pattern = /^[^ ]+@[^ ]+\.[a-z]{2,3}$/;
 
  if (!pattern.test(email.value)) {
  let error = true;
  showError(alert4, error);
  }
});
 
document.addEventListener("blur", function (e) {
  if (
    number.value.length !== 19 ||
    date.value.length !== 5 ||
    isNotDate(date) === true ||
    cvv.value.length < 3 ||
    email.value.length === 0
  ) {
    e.preventDefault();
  }
 
  let input = document.querySelectorAll("input");
  for (i = 0; i < input.length; i++) {
    if (input[i].value === "") {
      input[i].nextElementSibling.style.opacity = "1";
    }
  }
  if (
    number.value.length > 15 ||
    date.value.length > 5 ||
    cvv.value.length > 2 ||
    email.value.length > 1
  ) {
    console.log(button);
    button.disabled = false;
  }
});
 
function showError(element, error) {
  if (error == true) {
    element.style.opacity = "1";
  } else {
    element.style.opacity = "0";
  }
}

/validate.js

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
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
export function numberAutoFormat() {
  let valueNumber = number.value;
  // убирем пробел и даем ввести только цифры
  let v = valueNumber.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
 
  let matches = v.match(/\d{4,16}/g);
  let match = (matches && matches[0]) || "";
  let parts = [];
 
  for (i = 0; i < match.length; i += 4) {
    // разделение по 4 символа
    //"4510023" -> [4510, 023]
    parts.push(match.substring(i, i + 4));
  }
 
  if (parts.length) {
    // добавление пробела между 4-мя символами
    return parts.join(" ");
  } else {
    return valueNumber;
  }
}
 
export function dateAutoFormat() {
  let dateValue = date.value;
  // убирем пробел и даем ввести только цифры
  let v = dateValue.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
 
  let matches = v.match(/\d{2,4}/g);
  let match = (matches && matches[0]) || "";
  let parts = [];
 
  for (i = 0; i < match.length; i += 2) {
    parts.push(match.substring(i, i + 2)); //разделение на месяц и год
  }
 
  if (parts.length) {
    // добавление / между месяцом и годом
    return parts.join("/");
  } else {
    return dateValue;
  }
}
 
export function isNotDate(element) {
  let actualDate = new Date();
  let month = actualDate.getMonth() + 1;
  let year = Number(actualDate.getFullYear().toString().substr(-2));
  let dateNumber = element.value.match(/\d{2,4}/g);
  let monthNumber = Number(dateNumber[0]);
  let yearNumber = Number(dateNumber[1]);
 
  if (
    element.value === "" ||
    monthNumber < 1 ||
    monthNumber > 12 ||
    yearNumber < year ||
    (monthNumber <= month && yearNumber === year)
  ) {
    return true;
  } else {
    return false;
  }
}

@ds102061 · 24.10.2024, 17:25 **[ТС]**

Необходимо добавить валидацию номера карты , подсказали использовать https://www.npmjs.com/package/card-validator, но по документации не особо понятно, как его использовать

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
const valid = require("card-validator");
 
export function numberAutoFormat() {
  let valueNumber = number.value;
  // уберём пробел и даем ввести только цифры
  let v = valueNumber.replace(/\s+/g, "").replace(/[^0-9]/gi, "");
 
  let matches = v.match(/\d{4,19}/g);  
  
  let match = (matches && matches[0]) || "";
  
  let parts = [];
 
  for (i = 0; i < match.length; i += 4) {
    // разделение по 4 символа
    //"4510023" -> [4510, 023]
    parts.push(match.substring(i, i + 4));
  }
 
  if (parts.length) {
    // добавление пробела между 4-мя символами
    return parts.join(" ");
  } else {
    return valueNumber;
  }
}

как его можно встроить в текущий код?

@ds102061 · 28.10.2024, 19:29 **[ТС]**

Вопрос снят, разобралась сама, всего лишь надо было добавить сюда

JavaScript
1
2
3
4
5
6
7
8
number.addEventListener("input", function (e) {
  this.value = numberAutoFormat();
  let validCard = valid.number(this.value);
  let error = !validCard.isValid;
 
  let alert2 = document.getElementById("alert-2");
  showError(alert2, error);
});

и убрать лишнее с validate.js

Новые блоги и статьи Все статьи Все блоги /
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Programma_Boinc 28.12.2025 Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / ********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / ********/ gallery/ bKBkQFf Пост отсюда. . .	Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США. Programma_Boinc 26.12.2025 Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .	Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .	От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .