Как сделать валидация input, что бы только цифры и (!одна) точка или запятая была?

Question

[Jkristo ‣]

Помогите доработать регулярное выражение, чтобы с помощью JS и RegExp (наверное) сделать валидацию поля input так, что бы вводились только цифры или одна точка или одна запятая.
(если есть точка запятой не может быть и наоборот)

Вот пока моё решение на данный момент:

<input id = "#inputIn" />
<button id = "#checkIt" >check</button>
<script type = "text/javascript">

document.getElementById("#checkIt").onclick = function () {
    alert(/^\s*[\d]+(?:,[\d]+)?\s*$/.test(document.getElementById("#inputIn").value) );
}

</script>

и ссылка на jsfiddle:
jsfiddle.net/_jack/bgs7n895/7/

Answer 1

[i1yas]

/^\s*[\d]+([,\.][\d]+)?\s*$/

Comments

[Jkristo ‣]

А можно как то, вызывая функцию при вводе с помощью replace сразу в поле заменять вторую запятую или точку (или точку при наличии запятой уже и наоборот) на пустой символ?
К примеру как то так:

function validate(inp) {
inp.value = inp.value.replace(regExp, '')
}

Как тут regExp применить в этом случае?

[i1yas]

Jkristo ‣, можно при наличии двух таких символов рядом менять их, например, на точку, тогда регулярка простая.

input.addEventListener('keyup', e => {
  const re = /[,\.]{2,}/
  e.target.value = e.target.value.replace(re, '.')
})

Можно по-сложнее, удалять вторую точку или запятую.

input.addEventListener('keyup', e => {
  const re = /([,\.].*)[,\.]/
  e.target.value = e.target.value.replace(re, (match, g) => g)
})

[Jkristo ‣]

Спасибо.
Вот второй вариант это то, что нужно!

[Jkristo ‣]

А может есть возможность в такой конструкции (второй) теперь задать лимит символов после запятой или точки?

Я вот так делал, в последней строке, от 0 до 5:

function validate(inp) {
  inp.value = inp.value
    .replace(/([,.])[,.]+/g, '$1')
    .replace(/^[^\d]*(\d+([.,]\d{0,5})?).*$/g, '$1');
}

Но там получалось много запятых или точек. Можно это как то применить к константе теперь

[i1yas]

Jkristo ‣, вроде бы этот код работает как вы хотите, не нашел случая когда много точек.
Что подается на вход и что ожидается?

[Jkristo ‣]

Вот верно работающий инпут уже (точки и запятые не повторяются - заменяются на пустой символ и валидация верная) :

let input = document.getElementById("inputIn");
 let btn = document.getElementById("checkIt");

 btn.onclick = function() {
   alert('Результат валидации -    ' + /^\s*[\d]+([,\.][\d]+)?\s*$/.test(input.value));
   console.log('Введено -    ' + input.value);
 }

 input.addEventListener('keyup', e => {
   const re = /([,\.].*)[,\.]/
   e.target.value = e.target.value.replace(re, (match, g) => g)
 })

А вот тут инпут через последний replace, получает регулярку, что разрешает только 6 символов после запятой или точки вводить:

let input = document.getElementById("inputIn");
let btn = document.getElementById("valideCheck");

// Рабочая валидация при вводе с заменой

function validate(inp) {
  inp.value = inp.value.replace(/[^\d,.]*/g, '')
    .replace(/([,.])[,.]/g, '$1')
    .replace(/^[^\d]*(\d+([.,]\d{0,5})?).*$/g, '$1');
}

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

[Jkristo ‣]

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

let input = document.getElementById("inputIn");
 let btn = document.getElementById("checkIt");

 btn.onclick = function() {
   alert('Результат валидации -    ' + /^\s*[\d]+([,\.][\d]+)?\s*$/.test(input.value));
   console.log('Введено -    ' + input.value);
 }

 input.addEventListener('keyup', e => {
   const re = /([,\.].*)[,\.]/
   e.target.value = e.target.value.replace(re, (match, g) => g)
   //.replace(/^[^\d]*(\d+([.,]\d{0,5})?).*$/g, '$1');
 })

Но если не сложно, можно так сделать в регулярке, что бы после точки или запятой когда она есть, можно было ввести только 6 символов? Пробовал добавить еще один replace - но надо чтобы съедался только последний символ после запятой или точки, а не все буквенные, вот как на скрине делал:

[i1yas]

но надо чтобы съедался только последний символ после запятой или точки

Ваша закомментированная регулярка так и работает, только не только указано не 6 символов после разделителя, а 5.

Вам же не нужно такое поведение?
.replace(/([,\.]).(.{6})/, '$1$2')

[Jkristo ‣]

В моей регулярке, да так и работает, но она удаляет и символы буквы (не цифры). А они должны оставаться. И соответсвенно, что бы по клику false получать.

в вашем варианте
.replace(/([,\.]).(.{6})/, '$1$2')

всё как надо, только вот это смещение не нужно после последнего символа, должен заменяться только последний символ или просто игнорироваться нажатие после 6-го символа. Подскажите можно так поправить?

[i1yas]

Jkristo ‣, а, ну это можно как-то так наверное сделать
.replace(/([,\.].{6})\d(\D*)/, '$1$2')
Можно заменить \D на более строгий паттерн, это же навреное вам виднее

[Jkristo ‣]

Да, кажется это оно!
Большое спасибо!

[Jkristo ‣]

i1yas, Прошу прощения, не могу что то найти, а вроде в переписке был нюанс который сейчас нужен.
Не могли бы вы подсказать, как доработать вот эту регулярку, чтобы после запятой или точки можно было ввести только 6 цифр? То есть, после ввода седьмой, чтобы выдавало уже false, при шестой еще true

<input id="#inputIn" />
<button id="#checkIt">check</button>

document.getElementById("#checkIt").onclick = function() {
   alert('Результат валидации -    ' + /^\s*[\d]+([,\.][\d]+)?\s*$/.test(document.getElementById("#inputIn").value));
 }

Вот тут код : jsfiddle.net/_jack/bgs7n895/383

[i1yas]

Jkristo ‣,
/^\s*[\d]+([,\.][\d]{1,6})?\s*$/

{1,6} - Если нужно, чтобы ввод 12. давал false
Иначе нужно использовать {0,6}