Question

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

注意：对于数字验证部分，我正在使用isNaN（）。但是，输入中的$将使它变为无效。.

Answer 1

您可以通过检查第一个字符是否为$以及接下来的字符（没有美元符号）来形成有效数字来实现这一目的。

// 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>

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

2 个答案: