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

Posted 2023-05-09

【中文标题】正则表达式验证以接受百分比值

【英文标题】：regex validation to accept percentage values

【发布时间】：2021-03-04 04:51:14

【问题描述】：

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

预期输出（仅允许以下格式）：数字可以是 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)|(\d1,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" />

【问题讨论】：

您在错误的位置使用了正则表达式。您正在测试每次按下的键都附加一个 % 。这不适用于用户输入。

附带说明，根据您希望验证/交互发生的方式，有时在字段上绑定change 事件而不是键事件更直接。

【参考方案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)|(\d1,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>

【讨论】：

感谢您的完美回答，我无法得到一些东西，所以我们不能使用单行正则表达式来获得这个，因为正则表达式只需一行代码就可以完成所有事情

【参考方案2】：

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

条件一检查

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

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

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

一旦完成，简单检查Math.ceil(parseFloat(x))all 它所做的就是将值四舍五入。如果是返回数字 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)" />

【参考方案3】：

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

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

或者类似的东西