为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

翻过高山走不出你 2023-08-18 14:02:22
我正在使用正则表达式来验证用户数据的输入数据应该是带小数或不带小数的百分比,所以我使用了正则表达式,但它不起作用,并且在控制台中没有显示错误我想知道是否没有错误,为什么这个脚本不起作用?预期输出(仅允许以下格式):数字可以是 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" />
查看完整描述

3 回答

?
月关宝盒

TA贡献1772条经验 获得超5个赞

为了验证输入,您应该监听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>


查看完整回答
反对 回复 2023-08-18
?
元芳怎么了

TA贡献1798条经验 获得超7个赞

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


条件一检查


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


查看完整回答
反对 回复 2023-08-18
?
撒科打诨

TA贡献1934条经验 获得超2个赞

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

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

或类似的规定


查看完整回答
反对 回复 2023-08-18
  • 3 回答
  • 0 关注
  • 132 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信