проверка регулярных выражений для принятия процентных значений

ProgramBox

проверка регулярных выражений для принятия процентных значений

Post author:admin
Запись опубликована:1 сентября, 2022
Post category:Вопросы по программированию

#javascript #jquery #regex #validation

#javascript #jquery #регулярное выражение #проверка

Вопрос:

Я использую регулярное выражение для проверки входных данных пользователем данные должны быть в процентах с десятичной или без десятичной дроби, поэтому я использовал регулярное выражение, но оно не работает, и в консоли не отображается ошибка Интересно, нет ли ошибки, почему этот скрипт не работает?

Ожидаемый результат (разрешен только в формате ниже): число может быть от 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" />

1. Вы используете регулярное выражение в неправильной позиции. Вы проверяете нажатую клавишу, чтобы каждый раз добавлялся%. Это не будет работать с пользовательским вводом.

2. Кстати, в зависимости от того, как вы хотите, чтобы проверка / взаимодействие выполнялись, иногда проще привязать 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)|(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) amp;amp; regex.test(value));
  if (!isValid) {
    $target.val($target.data('val'));
    event.preventDefault();
  } else {
    $target.data('val', value);
  }
};

const keyInRange = (keyCode) =>
  (keyCode >= 48 amp;amp; keyCode <= 57)     || /* top row numbers       */
  (keyCode >= 96 amp;amp; 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>

1. спасибо за ваш идеальный ответ, я не могу получить несколько вещей, поэтому мы не можем использовать однострочное регулярное выражение, чтобы получить это, потому что регулярное выражение делает все с помощью одной строки кода

Ответ №2:

Я предполагаю, что вы ищете простую проверку значений, чтобы отложить события. По моим сведениям, вам нужно проверить, имеет ли значение знак%, во-вторых, если значение, отличное от знака%, является числом десятичного значения. Теперь это два самостоятельных условия.

проверка первого условия

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

Это замена регулярного выражения на короткое замыкание, чтобы проверить, содержит ли строка то значение, которое вам нужно, чтобы в нем присутствовало. если это не так, просто верните функцию. Кроме того, он также быстро проверяет, содержит ли строка только один. символ мы не хотим, чтобы кто-то набирал 5.5.5.5.5%. если это не так, просто верните функцию. 5% будет работать, как и 5,5%.

Как только % подписывает сексисты, удалите знак% из значения.

Как только это будет сделано, простая проверка Math.ceil(parseFloat(x)) , все, что она делает, это принимает значение, округляет его. Если is возвращает число 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())) {

или что-то в этом роде

Метки: проверка регулярных выражений для принятия процентных значений