Ограничение десятичного знака JavaScript с помощью RegEx

Question

У меня есть некоторая проверка на стороне клиента для текстового поля, которая допускает только числа до двух десятичных знаков без другого ввода.

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

Я пробовал такие вещи, как /[^\d].\d{0,2}, но тогда вызов замены не сработал, и я понятия не имею, как это сделать.

код

<script type="text/JavaScript">
  function valid(f) {
    if (!/^\d*$/.test(f.value)) {
      f.value = f.value.replace(/[^\d]/g,"");
      alert("Invalid number");
    }
  }
</script>

---

Примечание

Мне нужно сопоставить пустую строку. Если указана пустая строка и форма отправлена, значение по умолчанию возвращается к нулю.

Answer 1

. символ имеет особое значение в RegEx, поэтому нуждается в экранировании.

/^(?:\d*\.\d{1,2}|\d+)$/

Это соответствует 123.45, 123.4, 123 и .2, .24, но не строка emtpy, 123., 123.456

Answer 2

. означает в RegEx: любой персонаж, вы должны поставить обратную косую черту перед ним. \.

Это было бы лучше:

/^\d+(\.\d{0,2})?$/

Части, которые я включил:

• Вам нужен по крайней мере 1 номер перед точкой. Если вы не хотите этого, замените + на *, но тогда также будут найдены пустые строки.
• Если у вас есть десятичные значения, вам нужна точка впереди.
• После числа не должно быть ничего, $ обозначает конец ввода.

и для заменяющей части также необходимо указать точку

f.value.replace(/[^\d\.]/g, "")

Edit:

Если это для проверки входных данных в реальном времени, почему бы вам просто не перехватить ключевые события и не проверить их достоверность (создав строку в памяти) или просто удалить последний символ в поле?

Answer 3

Вы действительно хотите сделать это с помощью регулярного выражения?

function valid(f) {
    if(isNaN(f)){return false;}
    return 100 * f == parseInt(100*f,10);
}

Answer 4

gs: это очень близко, но линия

f.value = f.value.replace(/[^\d\.]/g, "");

На самом деле не работает. На самом деле я теряю фокус текстового поля по какой-то причине. Хотя, возможно, это мой код;)

Answer 5

Regex

/^\d+(\.\d{1,2})?$/

---

JavaScript

function valid(f) {
  if(!f.value) { // Test if text field is empty
    f.value = 0; // Initialize value to 0
    console.log("Valid number"); // Let user know input is OK
  } else if (!/^\d+(\.\d{1,2})?$/.test(f.value)) { // Test regex
    f.value = ""; // Empty the text box
    console.error("invalid number"); // Let user know input is not OK
  } else {
    console.log("Valid number"); // Let user know input is OK
  }
}

document.getElementById("testbutton").addEventListener( // Add event listener to button
  "click",
  valid.bind( // Bind the text field to the `value` function
    this, 
    document.getElementById("testfield")
  )
);

<input id="testfield" value="15.1" />
<button id="testbutton">Test expression</button>

---

Объяснение

1. / /: начало и конец выражения
2. ^: все, что следует, должно быть в начале строки, которую вы тестируете
3. \d+: должна быть хотя бы одна цифра
4. ( )?: эта часть не является обязательной
5. \.: здесь идет точка
6. \d{1,2}: здесь должно быть от одной до пяти цифр
7. $: все, что предшествует этому, должно быть в конце строки, которую вы тестируете

---

Совет

Вы можете использовать regexr.com или regex101.com для проверки регулярных выражений прямо в браузере!

Answer 6

Вы можете использовать функцию javascript вместо регулярных выражений

function IsValid(value) {
    var split = value.split('.');

    if (split.length != 2) {
        return false;
    }
    else if (split[1].length > 2 || !Number(split[1])) {
        return false;
    }
    else if (!(split[0] == '' || split[0] == '0')) {
        return false;
    }

    return true;
}

Answer 7

Если нам нужно проверить числовое значение в текстовом поле, где мы хотим предотвратить более одного десятичного знака (например, 2..3, .2. И т. Д.)

Ниже приведена функция Javascript для этого.

 if (MoreThanOnePoint(document.getElementById("txtNoofHrs").value) == false) {
     alert("Please enter one decimal only");
     document.forms[0].txtNoofHrs.focus();
     return false;
 }

 function MoreThanOnePoint(strString) {
     var strChar;
     var blnResult = true;
     var varcount = 0;

     for (i = 0; i < strString.length && blnResult == true; i++) {

         if (strString.charAt(i) == ".") {
             varcount++;
             if (varcount > 1) {
                 //alert("Please enter one decimal only");
                 blnResult = false;
             }
         }
     }
     return blnResult;
 }