Почему проверка typeof или number возвращает false

Почему проверка номера не работает в следующем случае.

Я пытался с проверкой типа значения

if (typeof value!=='number'){}

Я попытался проверить, меньше ли значение 1. Значение переменной по умолчанию равно 0.

if (parseInt(value)<1){}

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

Он проверяет нулевое значение, отлично работает с нулевым значением, но что не так с typeof и less than 1.

Я добавил блок кода в качестве комментария, который не работает.

Первая проверка из блока комментариев — это возврат false, даже если мы вводим число в поле.

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

window.onload=function(){
  bk_issue();
}

function bk_issue(){
    document.getElementById('btn_iss').onclick=function(){
        if (document.querySelectorAll('input[name = "book"]:checked').length===0){
            alert('Please check at least one book');
            return false;
        }
        if (document.querySelectorAll('input[name = "std"]:checked').length===0){
            alert('Please check at least one student or staff');
            return false;
        }
        else{
            var ttl_qnt = document.querySelector('input[name = "book"]:checked').getAttribute('data-id');
            var std = document.querySelectorAll('input[name = "std"]:checked');
            var iss_qnt=0;
            for (var i=0;i<std.length;i++){
                var value = std[i].closest('tr').getElementsByTagName('td')[2].querySelector('.qnt').value;
                if (value===''){
                    var std_qnt = 0;
                    alert('Please fill book quantity in checked student field');
                    return false;
                }
            // This validation is not working                
             /* if (typeof value!=='number'){
                    var std_qnt = 0;
                    alert('Please type number only');
                    return false;
                }
                if (parseInt(value)<1){
                    var std_qnt = 0;
                    alert('Please type number only');
                    return false;
                }*/
                else{
                    var std_qnt = std[i].closest('tr').getElementsByTagName('td')[2].querySelector('.qnt').value;
                }
                iss_qnt += parseInt(std_qnt);
            }
                alert(iss_qnt);
        }

    }
}
<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <th>Select</th><th>Book</th><th>Qnt</th>
      </tr>
      <tr>
        <td><input type='radio' name='book' value='1' data-id='20' /></td><td>Social Experiment</td><td>20</td>
        </tr>
        <tr>
        <td><input type='radio' name='book' value='1' data-id='12' /></td><td>Evolution of group</td><td>20</td>
      </tr>
    </table>
    <br/>
    <button id='btn_iss'>Issue</button>
    <br/>
    <table>
      <tr>
        <th>Select</th><th>Name</th><th>Issued Qnt</th>
      </tr>
      <tr>
        <td><input type='checkbox' value='1' name='std' /></td><td>Rahul</td><td><input type='text' value='' class='qnt'></td>
      </tr>
      <tr>
        <td><input type='checkbox' value='2' name='std' /></td><td>Preeti</td><td><input type='text' value='' class='qnt'></td>
      </tr>
      <tr>
        <td><input type='checkbox' value='3' name='std' /></td><td>Prince</td><td><input type='text' value='' class='qnt'></td>
      </tr>
    </table>
    
  </body>
</html>

входное значение всегда строка

Jaromanda X 10.04.2019 15:58

@JaromandaX, поэтому я добавил проверку, но почему она игнорируется.

Hemant 10.04.2019 16:03

я использую свойство constructor в эти дни. Я не уверен, лучше это или нет, хотя. Я использую его, чтобы получить немного больше глупости вместо сравнения строковых значений с typeof, я обычно говорю value.constructor == (1).constructor

Fallenreaper 10.04.2019 16:13

@Hemant - ваша проверка не работает, потому что первое, что вы проверяете, это пустая строка, если да, то она недействительна (пока все хорошо), следующее (прокомментированное как не работающее) вы проверяете, это число, если нет, то это недействительно ... и, как я сказал в своем комментарии, входное значение - это всегда строка, поэтому ваш код считает любой ввод недействительным

Jaromanda X 10.04.2019 23:40
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
4
121
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

value всегда будет строкой, лучший способ проверить, можно ли преобразовать строку в число, — это функция window.isNaN (НЕТ следует путать с Number.isNaN):

if (window.isNaN(value)) {
  /* act accordingly, the value is not a number */
}

Если вы хотите преобразовать эту строку value в число, просто используйте конструктор Number

value = Number(value)
Ответ принят как подходящий

Как указано в @Яроманда Х, входное значение всегда является строкой, поэтому вам нужно преобразовать его в целое число с помощью parseInt и использовать isNaN(), чтобы проверить, не является ли parseInt(value) числом:

if (isNaN(parseInt(value))){
   var std_qnt = 0;
   alert('Please type number only');
   return false;
}

window.onload=function(){
  bk_issue();
}

function bk_issue(){
    document.getElementById('btn_iss').onclick=function(){
        if (document.querySelectorAll('input[name = "book"]:checked').length===0){
            alert('Please check at least one book');
            return false;
        }
        if (document.querySelectorAll('input[name = "std"]:checked').length===0){
            alert('Please check at least one student or staff');
            return false;
        }
        else{
            var ttl_qnt = document.querySelector('input[name = "book"]:checked').getAttribute('data-id');
            var std = document.querySelectorAll('input[name = "std"]:checked');
            var iss_qnt=0;
            for (var i=0;i<std.length;i++){
                var value = std[i].closest('tr').getElementsByTagName('td')[2].querySelector('.qnt').value;
                if (value===''){
                    var std_qnt = 0;
                    alert('Please fill book quantity in checked student field');
                    return false;
                }
          
                if (isNaN(parseInt(value))){
                    var std_qnt = 0;
                    alert('Please type number only');
                    return false;
                }
                else{
                    var std_qnt = std[i].closest('tr').getElementsByTagName('td')[2].querySelector('.qnt').value;
                }
                iss_qnt += parseInt(std_qnt);
            }
                alert(iss_qnt);
        }

    }
}
<html>
  <head>
  </head>
  <body>
    <table>
      <tr>
        <th>Select</th><th>Book</th><th>Qnt</th>
      </tr>
      <tr>
        <td><input type='radio' name='book' value='1' data-id='20' /></td><td>Social Experiment</td><td>20</td>
        </tr>
        <tr>
        <td><input type='radio' name='book' value='1' data-id='12' /></td><td>Evolution of group</td><td>20</td>
      </tr>
    </table>
    <br/>
    <button id='btn_iss'>Issue</button>
    <br/>
    <table>
      <tr>
        <th>Select</th><th>Name</th><th>Issued Qnt</th>
      </tr>
      <tr>
        <td><input type='checkbox' value='1' name='std' /></td><td>Rahul</td><td><input type='text' value='' class='qnt'></td>
      </tr>
      <tr>
        <td><input type='checkbox' value='2' name='std' /></td><td>Preeti</td><td><input type='text' value='' class='qnt'></td>
      </tr>
      <tr>
        <td><input type='checkbox' value='3' name='std' /></td><td>Prince</td><td><input type='text' value='' class='qnt'></td>
      </tr>
    </table>
    
  </body>
</html>

Другие вопросы по теме