0

我正在使用正则表达式来验证用户数据的输入数据应该是带小数的百分比或不带小数的百分比，所以我使用了正则表达式但它不起作用并且在控制台中没有显示错误我想知道是否没有错误为什么这个脚本不起作用？

预期输出（仅允许以下格式）：数字可以是 1-100

  • 12.5% // 1 -100 之间的任何数字
  • 12%
  • 12.45%

$('#percentage').bind('keydown keypress keyup', on);

function on(evt) {
  var theEvent = evt || window.event;
  var key = theEvent.keyCode || theEvent.which;
  key = String.fromCharCode( key );
  var regex = /^((100)|(\d{1,2}(\.\d*)?))%$/;
  if( !regex.test(key) ) {
    theEvent.returnValue = false;
    if(theEvent.preventDefault) theEvent.preventDefault();
  }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Percentage : <input type="text" id="percentage" />

4

3 回答 3

1

我假设您正在寻找简单的做价值检查搁置事件。我的聚会你需要检查值是否有 % 符号，其次是否 % 符号以外的值是十进制数。现在，这本身就是两个条件。

条件一检查

if (!n.includes("%")||n.split('.').length > 2){return;}

它是正则表达式的短路替换，用于检查字符串是否包含您需要在其中出现的任何值。如果它不是简单地返回函数。最重要的是，它还快速检查字符串仅包含 single 。性格我们不希望有人去 5.5.5.5.5%。如果它不是简单地返回函数。5% 会起作用，5.5% 也会起作用。

一旦 % 符号性别歧视，然后从值中删除 % 符号。

一旦完成了简单的检查Math.ceil(parseFloat(x))，它所做的就是将值四舍五入。如果返回数字 wala 它起作用了，我刚刚创建了一个警报，您可以从那里做任何您想做的事情。

function check(n){
if (!n.includes("%")||n.split('.').length > 2){return;}

x = n.replace("%", "");

if(Math.ceil(parseFloat(x))) {console.log(x); } 

}
<input type="text" id="percentage" onblur="check(this.value)" />

于 2020-11-20T19:15:20.983 回答
1

为了验证输入，您应该监听keyup事件并检查输入的值以及按下的键。

const main = () => {
  $('#percentage').bind({
    focusin: onFocusIn,
    keyup: onChange
  });
};

const onFocusIn = (e) => {
  const $target = $(e.currentTarget);
  $target.data('val', $target.val());
};

const onChange = (e) => {
  const regex = /^((100)|(\d{1,2}(\.\d*)?))%?$/,
    $target = $(e.currentTarget),
    value = $target.val(),
    event = e || window.event,
    keyCode = event.keyCode || event.which,
    isValid = value.trim().length === 0 ||
      (keyInRange(keyCode) && regex.test(value));
  if (!isValid) {
    $target.val($target.data('val'));
    event.preventDefault();
  } else {
    $target.data('val', value);
  }
};

const keyInRange = (keyCode) =>
  (keyCode >= 48 && keyCode <= 57)     || /* top row numbers       */
  (keyCode >= 96 && keyCode <= 105)    || /* keypad numbers        */
  (keyCode === 110 || keyCode === 190) || /* decimal separator     */
  (keyCode === 53)                     || /* percentage            */
  (keyCode === 8 || keyCode === 46);      /* back-space and delete */

main();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="percentage">
  Percentage:
  <input type="text" id="percentage" placeholder="99.99%" />
</label>

于 2020-11-20T19:28:04.093 回答
0

您需要检查#percentage文本框的值，而不仅仅是最后按下的键。

所以： if (!regex.test($('#percentage').value())) {

或类似的规定

于 2020-11-20T19:04:18.450 回答