使用 jquery 验证货币和数字输入

Question

在这里需要一些帮助.. 1）我需要验证一个输入字段以检查它是否只包含数值。 2）但是，如果用户在前面输入 $，我需要删除 $ 符号并且仍然能够验证它是否是有效输入（例如 $999 和 999 都是有效输入，但 99rt9 不是） 3) 如何在不使用正则表达式的情况下使用 jquery 验证这一点？

注意：对于数字验证部分，我使用的是 isNaN()。但是，输入中的 $ 会导致它变得无效..

Answer 1

您可以通过检查第一个字符是否为 $ 以及下一个字符（不带 doller 符号）是否为有效数字来实现此目的。

// 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函数：提取字符串的一部分。

希望我把你推得更远。

Answer 2

如果你可以使用正则表达式，你可以使用以下作为你的验证函数：

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

但既然你不能，这里有几个替代实现。关键是我使用了parseInt 而不是isNaN，因为存在一些极端情况：例如，12e1 是科学计数法中的有效数字，因此，它是一个数字，然后使用coercion 来检查您是否获得了相同的值。

第一个选项在输入时验证，这应该足够了。

$('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>