Проверка форм число javascript

3 ways to check if variable is a number in JavaScript

I was building a form the other day in Vue and I had to write number validation for the field so had to write the logic to check whether the input value is number or not. I wanted to list out the few ways I learnt which might be helpful to others.

NOTE: In JavaScript, special values like NaN , Infinity and -Infinity are numbers too — though, we’ll be ignoring those values.

1) Using isNan()

The isNaN() determines whether a value is NaN or not. We can take advantage of this to determine whether a variable is number type or not.

var numberOfpushUpsToday = 34; if(!isNaN(numberOfpushUpsToday)) console.log('It is a number') > else  console.log('It is not a number') > 

!isNaN(34) // returns true !isNaN('34') // returns true !isNaN('Hello') // returns false !isNaN(true) // returns true !isNaN(false) // returns true !isNaN('undefined') // returns false 

Limitations:

1) It returns true for the Boolean values because the Boolean values are converted to numbers 0 and 1 accordingly so it would be misleading sometimes.
2) We have same issue for the null value as well. It returns true and hence one has to be careful while writing the code.

2) Using typeof()

num = 45 strng = '34' typeof num // returns 'number' typeof strng // returns "string" typeof undefined // returns "undefined" typeof null // returns "object" 

If the variable is type number, it would return the string number . We can use this to determine if the variable is number type.

var numberOfpushUpsToday = 34; if(typeof numberOfpushUpsToday === 'number' ) console.log('It is a number') > else  console.log('It is not a number') > 

The typeof() performs much better than isNaN() . It correctly determines that a string variable, null and Boolean values are not numbers.

3) Using Number.isFinite()

The function isFinite() determines if the passed value is finite. The arguments are first converted to numbers and then checks if the value is finite and hence this is the most best way among all the methods mentioned above.

Number.isFinite(34) // returns true Number.isFinite('Hello') // returns false Number.isFinite(undefined) // returns false Number.isFinite(true) // returns false Number.isFinite(null) // returns false 

var numberOfpushUpsToday = 34; if(Number.isFinite(numberOfpushUpsToday) ) console.log('It is a number') > else  console.log('It is not a number') > 

Conclusion:

Although these methods can get tricky with Boolean values, undefined and null , they are helpful in solving some problems in day to day life. One just have to be careful while writing the code according to their needs. And that sums it up.
Thank you..
Comment below if you have any feedback or thoughts.

Top comments (8)

I’m a self-taught dev focused on websites and Python development. My friends call me the «Data Genie». When I get bored, I find tech to read about, write about and build things with.

Источник

JavaScript валидация форм

При помощи JavaScript можно проводить валидацию (проверку данных) форм HTML.

Например, в следующем примере если поле формы (fname) пусто, то функция выводит сообщение с предупреждением и возвращает значение false, чтобы предотвратить отправку данных формы:

Функцию можно вызывать при возникновении события отправки данных формы:

JavaScript может проверять ввод чисел

Часто JavaScript используется для проверки введенных чисел. Попробуйте сами:

Автоматическая проверка HTML форм

Проверка HTML форм также может проводиться браузером автоматически.

В следующем примере, если поле формы (fname) пусто, атрибут required запрещает отправку данных формы:

Внимание! Автоматическая проверка HTML форм не работает в Internet Explorer 9 и более ранних его версиях.

Проверка данных

Проверка данных проводится для того, чтобы гарантировать, что пользователь ввел корректные, полезные данные без ошибок.

Типичная проверка состоит в поиске ответов на следующие вопросы:

• Заполнил ли пользователь все необходимые поля?
• Корректны ли введенные данные?
• Не ввел ли пользователь текст в поля для цифр?

Таким образом, цель проверки данных заключается в обеспечении корректного пользовательского ввода.

Проверка может осуществляться разными способами и реализовываться разными путями.

Проверка на стороне сервера осуществляется веб-сервером после получения им введенных данных.

Проверка на стороне клиента осуществляется браузером до отсылки введенных данных на сервер.

Ограничивающая проверка HTML

В HTML5 была добавлена новая концепция HTML проверки, название которой можно было бы перевести как «ограничивающая проверка» (англ. Constraint Validation).

Ограничивающая проверка HTML основывается на:

Атрибуты ограничивающей проверки элемента ввода

Атрибут	Описание
disabled	Определяет, что элемент ввода отключен
max	Определяет максимальное значение в элементе ввода
min	Определяет минимальное значение в элементе ввода
pattern	Определяет шаблон значений в элементе ввода
required	Определяет, что элемент ввода обязателен для заполнения
type	Определяет тип элемента ввода

Полный список атрибутов см. в справке по HTML тегу .

CSS псевдоселекторы ограничивающей проверки

Селектор	Описание
:disabled	Выбирает элемент ввода с атрибутом «disabled»
:invalid	Выбирает элемент ввода с некорректным значением
:optional	Выбирает элемент ввода без атрибута «required»
:required	Выбирает элемент ввода с атрибутом «required»
:valid	Выбирает элемент ввода с корректным значением

О том, что такое псевдоклассы см. раздел CSS псевдоклассы.

Методы DOM ограничивающей проверки

Метод	Описание
checkValidity()	Возвращает true, если элемент ввода содержит корректные данные
setCustomValidity()	Устанавливает свойство validationMessage для элемента ввода

Пример
Если поле ввода содержит некорректные данные, вывести сообщение:

Свойства DOM ограничивающей проверки

Свойство	Описание
validity	Содержит набор свойств типа boolean, определяющих состояние валидности (правильности) элемента ввода
validationMessage	Содержит сообщение, которое выведет браузер в случае неудачной проверки
willValidate	Указывает, будет ли элемент ввода проверяться

Свойства валидности

Свойство validity элемента ввода содержит некий набор свойств, определяющих состояние валидности данных:

Свойство	Описание
customError	Установлено в true, если задано пользовательское сообщение о валидности.
patternMismatch	Установлено в true, если значение элемента не соответствует шаблону в атрибуте pattern.
rangeOverflow	Установлено в true, если значение элемента больше значения в атрибуте max.
rangeUnderflow	Установлено в true, если значение элемента меньше значения в атрибуте min.
stepMismatch	Установлено в true, если значение элемента неверно по атрибуту step.
tooLong	Установлено в true, если значение элемента превышает значение атрибута maxLength.
typeMismatch	Установлено в true, если значение элемента неверно по атрибуту type.
valueMissing	Установлено в true, если у элемента (с атрибутом required) нет значения.
valid	Установлено в true, если значение элемента валидно.

Пример №1. Свойство rangeOverflow.

Если число в поле ввода больше 100 (атрибут max элемента ), то вывести сообщение:

  OK  

Пример №2. Свойство rangeUnderflow.

Если число в поле ввода меньше 100 (атрибут min элемента ), то вывести сообщение:

  OK  

Источник

Проверка ввода данных

Рассмотрим пример проверки правильности ввода данных через HTML, с подсветкой CSS, а затем дополнительно сделаем валидацию с помощью JavaScript.

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

Пример: для программ типа калькулятора нужно вводить числа, чтобы производить с ними различные вычисления и нужна проверка (валидация) на то, что пользователь ввёл числа, а не буквы или символы.

Для ввода данных служит элемент input, у него и будем проверять валидацию.

Валидация input через HTML происходит с помощью атрибута pattern.

Примеры атрибута «pattern»

Только русские слова

type=»text»
title=»Разрешено использовать только пробелы и русские буквы»
pattern=»^[А-Яа-яЁё\s]+$»
/>

Только латинские слова

type=»text»
title=»Разрешено использовать только пробелы и латинские буквы»
pattern=»^[a-zA-Z\s]+$»>

Только русские или латинские слова с пробелами, не менее 6 символов

type=»text»
title=»Разрешено использовать только пробелы и русские или латинские буквы, не менее 6″
pattern=»^[A-Za-zА-Яа-яЁё\s]»>

Введите телефон в формате: +7 (777) 777-77-77 (Россия)

type=»tel»
title=»Используйте формат: +7 (777) 777-77-77″
pattern=»[+]7\s[\(]\d[\)]\s\d[\-]\d[\-]\d»>

Атрибут required делает заполнение поля обязательным.

Атрибуты minlength, maxlength задаёт минимальное и (или) максимальное допустимое количество символов. Например minlength=»6″.

Пример валидации на HTML

Использование CSS при валидации

/* Верный ввод */
input:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод */
input:invalid border-color: red;
color: red;
box-shadow: none;
>
/* Верный ввод при фокусе */
input:focus:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод при фокусе */
input:focus:invalid border-color: red;
color: red;
box-shadow: none;
>
/* Верный ввод при фокусе обязательного input */
input:focus:required:valid border-color: green;
color: green;
box-shadow: none;
>
/* Не верный ввод при фокусе обязательного input */
input:focus:required:invalid border-color: red;
color: red;
box-shadow: none;
>

Введите число ОТ 10 ДО 999

Введите что нибудь и щёлкните вне элемента INPUT.

Элемент подсвечивается красным если он пустой или ввод не валидный, в нашем случае в атрибуте pattern задан ввод только чисел, любой символ или буква будет подсвечивать красным, сообщая об ошибке.

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

Атрибуты minlength=»2″ maxlength=»3″ следят за тем, чтобы было введено от двух до трёх символов. Один символ, подсветка останется красной. Больше трёх символов ввести не удаться.

При правильном вводе, красная подсветка исчезнет, а введённые числа станут зелёными.

Пример валидации на JavaScript

Проверка заполнения формы

JavaScript

function validateForm() var x = document.forms[«myForm»][«fname»].value;
if (x == «») alert(«Необходимо ввести имя»);
return false;
>
>

html

Пример

Проверка ввода чисел

JavaScript

function myFunction() var x;
var text = «Все в порядке»;

if (isNaN(x) || x 10) text = «Ввод не верен»;
>
document.getElementById(«demo»).innerHTML = text;
>

html

Пример

Необычный способ проверки валидности email.

JavaScript

function myFunction() const email = document.getElementById(«mail»);

email.addEventListener(«input», function (event) if (email.validity.typeMismatch) email.setCustomValidity(«Введите корректный email»);
> else email.setCustomValidity(«»);
>
>);

html

Пример

Остальные проверки валидации на JS

var regex = /^[a-zA-Z\s]+$/;
if(regex.test(name) === false) printError(«nameErr», «Пожалуйста, введите правильное имя»);

var regex = /^1\d$/;
if(regex.test(mobile) === false) printError(«mobileErr», «Пожалуйста, введите действительный 10-значный номер мобильного телефона»);
>

Источник

Способы валидации чисел в JavaScript

Проверка переменной на целое число или с плавающей точкой в javascript может осуществляться разными способами. Рассмотрим их преимущества и недостатки, а в конце сделаем ещё проверку на чётность и нечётность.

Валидация целых чисел

Рассмотрим 4 способа валидации переменной « value » на простое число. Все представленные выражения возвращают булевый тип — « true » или « false ».

Недостаток — возвращает положительный результат для значений с нулём в начале, например: 05, 0007, 011. В некоторых случаях это может быть критично. Для отсеивания отрицательных чисел добавьте дополнительное условие:

Number.isInteger(value) && value >= 0

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

String(parseInt(value, 10)) === String(value)

Числа с плавающей точкой

Для проверки переменной на число с точкой (запятой) в JS наиболее распространены три способа.

Применение функции «parseFloat».

String(parseFloat(value, 10)) === String(value)

!isNaN(value) && String(value).includes('.')

Проверка на чётность

Для проверки на чётность в JS используют оператор остатка от деления.

Сравнение вернёт истину, если « value » чётное число и ложь — если нечётное.

Источник