Как лучше реализовать проверку на число?

@Mentoser · Регистрация: 30.09.2020

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

Здравствуйте, сделал калькулятор для сложения только положительных чисел.
Логично что в калькуляторе не может быть букв. Сделал в js проверку на то, введена ли цифра и положительная ли она

JavaScript
1
  if ((Number.isInteger(a) && a >= 0))

Но в таком случае мне придется для каждого поля делать подобную проверку, то есть в моем случае 5 раз повторять одно и тоже.

Есть ли способ как сделать это по короче?

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Числа</title>
</head>
<body>
<div class="heading">
    <h1>Сложение чисел</h1>
</div>
 
<hr>
 
<div class="shetovod">
 
    <div class="numbersss">
            <form name="data">
                <label>
                    <br>
                </label>
                <p>
                <label>
                    a: <input id = "a" type="number">
                </label>
                <p>
                <label>
                    b: <input id = "b"  type="number">
                </label>
                <p>
                <label>
                    c: <input id = "c" type="number">
                </label>
                <p>
                  <label>
                    d: <input id = "d" type="number">
                  </label>
                <p>
                <label>
                      Result: <input id = "result" type="number">
                  </label>
                <p>
                <label>
                  <input type="button" value="Сложить" onclick="addition();"><br>
                </label>
            </form>
        </div>
    </div>
</body>
 
<script>
function addition() {
  var a = parseInt(document.getElementById('a').value);
  var b = parseInt(document.getElementById('b').value);
  var c = parseInt(document.getElementById('c').value);
  var d = parseInt(document.getElementById('d').value);
  if ((Number.isInteger(a) && a >= 0))
  {
    var result = a + b + c + d;
  }
  else
  {
    alert("Введены некорректные значения. Запрещены отрицательные числа и буквы");
  }
 
  document.getElementById('result').value = result;
}
</script>
<hr>
</html>

Заранее спасибо

@IG2 · 02.11.2021, 16:43

Можно так, если правильно понял задачу

JavaScript
1
if([a, b, c, d].every(el => Number.isInteger(el) && el >= 0))

@klyapa · 02.11.2021, 17:07

Атрибутами элемента input type="number", вы можете выполнить почти 99% вашей задачи.

@amr-now · 02.11.2021, 18:00

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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Числа</title>
</head>
<body>
    <div class="heading">
        <h1>Сложение чисел</h1>
    </div>
    <hr>
    <div class="shetovod">
        <div class="numbersss">
            <form name="data">
                <label>
                    <br>
                </label>
                <p>
                    <label>
                        a: <input id="a" type="number">
                    </label>
                <p>
                    <label>
                        b: <input id="b" type="number">
                    </label>
                <p>
                    <label>
                        c: <input id="c" type="number">
                    </label>
                <p>
                    <label>
                        d: <input id="d" type="number">
                    </label>
                <p>
                    <label>
                        Result: <input id="result" type="number" disabled>
                    </label>
                <p>
                    <label>
                        <input type="button" value="Сложить">
                    </label>
            </form>
        </div>
    </div>
    <hr>
    <script>
        let form = document.forms[0],
            inputs = form.querySelectorAll("#a,#b,#c,#d");
 
        form.elements[form.elements.length - 1].onclick = addition; // На последний input повесить обработчик
 
        function addition() {
            let result = 0;
            for (let e of inputs) {
                let a = +e.value;
                if (Number.isInteger(a) && a >= 0)
                    result += a;
                else if (e.value) {
                    alert("Введены некорректные значения. Запрещены отрицательные числа и буквы");
                    result = "";
                    break;
                }
            }
 
            document.getElementById('result').value = result;
        }
    </script>
</body>
</html>

@klyapa · 02.11.2021, 18:26

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<form onsubmit="calc(event)">
    <p>a: <input type="number" step="1" min="0" required></p>
    <p>b: <input type="number" step="1" min="0" required></p>
    <p>c: <input type="number" step="1" min="0" required></p>   
    <p>d: <input type="number" step="1" min="0" required></p>
    <p>Result: <input id="result" name="result" type="number" readonly></p>
    <p><input type="submit" value="Сложить"></p>
</form>
 
<script>
    const calc = e => {
        e.preventDefault();
        let form = e.currentTarget;
        form.elements.result.value = [...form.querySelectorAll('input[required]')]
            .reduce((a, b) => a += +b.value, 0);
    };
</script>

@Mentoser · 02.11.2021, 18:38 **[ТС]**

Всем спасибо за ответы, вы очень помогли.

Добавлено через 6 минут
А подскажите если не трудно, вот в решении выше было использовано readonly и disabled.

Я с помощью disabled сделал кнопку не кликабельной. Могу ли я с помощью скриптов сделать так чтобы кнопка становилась кликабельной когда я заполню все поля и где это делается в скрипте или где-то еще?

@amr-now · 02.11.2021, 19:47

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

Могу ли я с помощью скриптов сделать так чтобы кнопка становилась кликабельной когда я заполню все поля и где это делается в скрипте или где-то еще?

Абсолютно все написанные в HTML атрибуты можно менять скриптом.
Рекомендую изучить тему: https://learn.javascript.ru/do... properties

Новые блоги и статьи Все статьи Все блоги /
Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .	Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .
Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .	wmic не является внутренней или внешней командой Maks 02.04.2026 Решение: DISM / Online / Add-Capability / CapabilityName:WMIC~~~~ Отсюда: https:/ / winitpro. ru/ index. php/ 2025/ 02/ 14/ komanda-wmic-ne-naydena/	Программная установка даты и запрет ее изменения Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: при создании документов установить период списания автоматически. . .

@klyapa 3503 / 1267 / 429 Регистрация: 24.07.2016 Сообщений: 1,890
	02.11.2021, 17:07
	Атрибутами элемента `input type="number"`, вы можете выполнить почти 99% вашей задачи. 0

@Mentoser 1 / 1 / 0 Регистрация: 30.09.2020 Сообщений: 68
	02.11.2021, 18:38 [ТС]
	Всем спасибо за ответы, вы очень помогли. Добавлено через 6 минут А подскажите если не трудно, вот в решении выше было использовано readonly и disabled. Я с помощью disabled сделал кнопку не кликабельной. Могу ли я с помощью скриптов сделать так чтобы кнопка становилась кликабельной когда я заполню все поля и где это делается в скрипте или где-то еще? 0

Как лучше реализовать проверку на число?

Решение

Решение