正则表达式验证接受百分比值

Question

我正在使用正则表达式来验证用户数据的输入数据应该是带小数或不带小数的百分比，所以我使用了正则表达式，但它不起作用，并且在控制台中没有显示错误我想知道是否没有错误，为什么这个脚本不起作用？预期输出（仅允许以下格式）：数字可以是 1-10012.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" />

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

Answer 2

我假设您正在寻找简单的方法来进行价值检查并搁置事件。我收集您需要检查值是否有％符号，其次除了％符号之外的值是否是小数值的数量。现在，这本身就是两个条件。

条件一检查

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

它是正则表达式的短路替代品，用于检查字符串是否包含您需要在其中出现的值。if 它不只是返回函数。最重要的是，它还快速检查字符串仅包含单个 . 我们不希望有人达到 5.5.5.5.5%。if 它不只是返回函数。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)" />

Answer 3

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

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

或类似的规定