как проверить введенное ли именно число в input при клике на кнопку

288

18 января 2018, 22:19

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
</head> 
<body> 
	<input type="text" placeholder="the enter"> 
	<button>Send</button> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
	<script> 
		var enter=$('input'); 
		var send=$('button').click(function() { 
			var enter_val=enter.val(); 
			console_log(enter_val); 
		});; 
		if (enter_val!==null || enter_val==Number()) { 
			alert('sent!!!'); 
		} 
		else { 
			alert('sorry'); 
		} 
	</script> 
</body> 
</html>

Answer 1

для проверки на "не число" можно применить метод isNaN, который взращивает false для всех числовых значений.

	var input = document.getElementsByTagName('INPUT')[0]; 
	var button = document.getElementsByTagName('BUTTON')[0]; 
	    button.onclick = function(){ 
		alert(input.value && !isNaN(input.value)? "sent!!!" : "sorry") 
	}

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
</head> 
<body> 
	<input type="text" placeholder="the enter"> 
	<button>Send</button> 
</body> 
</html>

Answer 2

Тут много вариантов, можно просто поставить <input type="number"/>

Можно проверять нажатие кнопок на клавиатуре и не реагировать ни на что кроме цифр, ну или например вот так проверить регуляркой:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
	<meta charset="UTF-8"> 
	<title>Document</title> 
</head> 
<body> 
	<input type="text" placeholder="the enter"> 
	<button>Send</button> 
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
	<script> 
		var enter=$('input'); 
		var send=$('button').click(function() { 
		var enter_val=enter.val(); 
	        console.log(enter_val); 
		if ((enter_val!==null) && (/^\d+$/.test(enter_val))) { 
			alert('sent!!!'); 
		} 
		else { 
			alert('sorry'); 
		} 
		}); 
	</script> 
</body> 
</html>

Answer 3

var enter = $('input'); 
var send = $('button').click(function() { 
  var enter_val = enter.val() -0; //преобразуем введенное значение из string в integer неявно. Если преобразование не возможно, вернет NaN 
  console.log(enter.val()); 
  if ((enter.val() !== '')&&(!Number.isNaN(enter_val))) {  //если значение НE NaN и не пустая строка 
    alert('sent!!!'); 
  } else {  
    alert('sorry'); 
  } 
 
});

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
</head> 
 
<body> 
  <input type="text" placeholder="the enter"> 
  <button>Send</button> 
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
</body> 
 
</html>

Проблема была в области видимости. Переменная enter_val проверялась на значение вне функции, в которой была создана.

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

Подробнее о сайте site-vizitka-kiev.org.ua

ТОП-10

Все популярные вопросы

Promise.all и Fetch

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

240

javascript

Переход по страницам?

Народ как производится переход по страницам с шапкой то есть шапка остается а контент меняется пожалуйста можете подробно объяснить как...

271

PHP

Передать переменную в html

На php пишу:

248

PHP

cUrl с динамическим proxy, но что бы его получить нужно перейти по ссылке, а без proxy не переходит

У меня такая задача: есть PHP-скрипт, который с помощью модуля cUrl переходит по ссылке(нужно только перейти и всё), но без proxy он не переходитЕсли...

275