Валидация полей для ввода

@Petrsav · Регистрация: 20.12.2020

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

Как реализовать что бы при потере фокуса происходила проверка на корректность введённого значения и замена его на корректное при необходимости по следующим правилам:
Из строки значения должны удаляться все символы, кроме допустимых.
Пробелы и дефисы в начале и конце значения должны удаляться.
Несколько идущих подряд пробелов или дефисов должны заменяться на один.
Первая буква должна приводиться к верхнему регистру, а все остальные — к нижнему.

В настоящее время реализован только перевод первой буквы в верхний регистр и запрещен ввод латиницы.

HTML5
1
2
3
4
5
6
  <form id="form" onsubmit="return false;">
    <input type="text" class="validation" id='surname' placeholder="Фамилия" />
    <input type="text" class="validation" id='name' placeholder="Имя" />
    <input type="text" class="validation" id='patronymic' placeholder="Отчество" />
    <button id="button" class="btn btn-success" >Отправить</button>
  </form>

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
let surname = document.getElementById("surname")
let inputName = document.getElementById("name")
let patronymic = document.getElementById("patronymic")
let button = document.getElementById("button")
let form = document.getElementById("form")
 
let p = document.createElement('p');
 
let inp = document.querySelector('.validation')
 
let surnameStr = inp.textContent
 
 
function validation(inp) {
 
inp.addEventListener('input', function () {
  this.value = this.value.replace(/[^А-Яа-яЁё -]/g, '')
 
  function changeStr(surnameStr) {
    surnameStr.replace(/\s+/g, ' ')
    surnameStr.replace(/^([-=\s]*)([a-zA-Z0-9])/gm, "$2")
 
    if (!surnameStr) return surnameStr;
    return surnameStr[0].toUpperCase() + surnameStr.slice(1)
  }
 
  changeStr()
})
}
 
validation(surname)
validation(inputName)
validation(patronymic)
 
document.forms[0].addEventListener('change', function (e) {
  if (e.target.tagName = 'INPUT') e.target.value = e.target.value.charAt(0).toUpperCase() + e.target.value.slice(1)
})
 
button.onclick = function() {
  let text = surname.value + ' ' + inputName.value + ' ' +  patronymic.value;
  p.innerHTML = text;
  form.append(p)
};

@DrType · 17.12.2021, 23:28

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function changeStr(surnameStr) {
  return surnameStr
    .replace(/\s+/g, " ")
    .replace(/\-+/g, "-")
    .replace(/^[\-\s]|[\-\s]$/gm, "")
    .replace(/[A-Za-z]/g, "")
    .replace(
      /([а-я])([^]+)/,
      (s, s1, s2) => s1.toUpperCase() + s2.toLowerCase()
    );
}
function validation(inp) {
  inp.addEventListener("blur", function () {
    this.value = changeStr(this.value);
  });
}

Новые блоги и статьи Все статьи Все блоги /
Знаешь почему 90% людей редко бывают счастливыми? kumehtar 14.04.2026 Потому что они ждут. Ждут выходных, ждут отпуска, ждут удачного момента. . . а удачный момент так и не приходит.	Фиксация колонок в отчете СКД Maks 14.04.2026 Фиксация колонок в СКД отчета типа Таблица. Задача: зафиксировать три левых колонки в отчете. Процедура ПриКомпоновкеРезультата(ДокументРезультат, ДанныеРасшифровки, СтандартнаяОбработка) / / . . .	Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .
Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .	Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .

Опции темы