Проверить валюту и числовой ввод с помощью jquery

Question

здесь нужна помощь. 1) Мне нужно проверить поле ввода, чтобы убедиться, что оно содержит только числовые значения.2) Однако, если пользователь вводит $ впереди, мне нужно удалить знак $ и все еще иметь возможность проверить, является ли он допустимым вводом (например, $ 999 и 999 - оба допустимых ввода, но 99rt9 - нет) 3) Как я могупроверить это с помощью jquery без использования регулярного выражения?

примечание: для числовой части проверки я использую isNaN ().Тем не менее, $ во входных данных приведет к тому, что это станет недействительным ..

Answer 1

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

function isValid(el) {
   return el.match(/^\$?\d+$/);
}

Но так как вы не можете, вот пара альтернативных реализаций. Ключевым моментом является то, что я использовал parseInt вместо isNaN, потому что есть угловые случаи: например, 12e1 является действительным числом в научной нотации и, таким образом, это число, а затем использовал Принуждение , чтобы проверить, что вы получите то же значение обратно.

Первый параметр проверяет, как вы вводите, и этого должно быть достаточно.

$('form').on('submit', function(evt) {
  if ($('.currency.error', this).length) { // If there are failed fields
    evt.preventDefault(); // Prevent submission   
  }
});

$('.currency').on('input', function() {
  if (!isValid(this.value.trim())) {
    this.classList.add('error'); // Add error 
  } else {
    this.classList.remove('error'); // Remove if it became valid
  }
});

function isValid(el) {
  el = el.charAt(0) == '$' ? el.slice(1) : el; // A dollar sign at the beginning is ok
  return parseInt(el) == el;

}

.error {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" class="currency" />
  <input type="text" class="currency" />
  <input type="submit" />
</form>

Второй выполняет проверку только при представлении. Это может быть более надежным для вашего случая, так как это предотвратит отправку пустых полей:

$('form').on('submit', function(evt) {
  $fields = $('.currency', this); // Limit field search to the form
  $fields.removeClass('error'); // Remove all error classes

  let $errors = $fields.filter(function() {
    return !isValid(this.value.trim())
  });

  if ($errors.length) { // If there are failed fields
    evt.preventDefault(); // Prevent submission
    $errors.addClass('error'); // Mark as failed
  }
});

function isValid(el) {
  el = el.charAt(0) == '$' ? el.slice(1) : el; // A dollar sign at the beginning is ok
  return parseInt(el) == el;
}

.error {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input type="text" class="currency" />
  <input type="text" class="currency" />
  <input type="submit" />
</form>

Answer 2

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

// keep a reference for the input.
let inp = $('#currency');

// add event : change this to your wanted one, I just used 'blur' for this example.
inp.on('blur', () => {
  // get the input's value trimmed.
  let val = $.trim(inp.val());
  if (val.length) {
    // checking
    if ((val.indexOf('$') === 0 && !isNaN(val.slice(1)) && val.length > 1) || !isNaN(val)) console.log('"' + val + '"' + ' is OK !');
    else console.log('"' + val + '"' + ' is NOT OK !');
  } else console.log('"' + val + '"' + ' is NOT OK !');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="currency" placeholder="enter a value and click outside to see the result" />

Полезные ссылки:

Функция jQuery trim: она удаляет пробелы в начале и конце строки. Встроенная в Javascript slice функция: извлекает фрагмент строки.

Надеюсь, я подтолкнул тебя дальше.