Регулярное выражение - знак +/- и десятичный знак

Question

Я пытаюсь создать регулярное выражение для десятичного числа, и в то же время знак «-» или «+» станет необязательным в начале.

Есть много информации об этом, так как я закончил с этим:

/^[+-]?\d+(\.\d+)?$/ 

Итак, я проверил это в консоли с помощью функции test() и он прекрасно работает.

Мой вопрос о том, где сделать эту проверку:

• , если проверка на keypress случае я в состоянии использовать preventDefault() для того, чтобы «потреблять» неправильные символы, но я извлечения текста как это и не имеет доступа к последнему введенному символу - $(event.target).val()

• , если проверка на keyup случае у меня есть доступ ко всему тексту, но я не в состоянии удалить неправильный символ, потому что я не знаю, какое это и где он был вставлен (с помощью мыши i t может быть помещен в начало или в середину действительной строки)

Мне нужно проверить комбинацию символов, а не проверять только символы. Например:

- //invalid 
- 1 //valid 
1. //invalid 
1.2 //valid 

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

Answer 1

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

Кроме того, мы также можем добавить <div> с указанием допустимых символов/формата. Это, в дополнение к тому, что пользователь узнает, что что-то не так, также расскажет им, что представляет собой допустимый ввод.

HTML:

<input id='ip' type='text'/> 

JS:

var regex = new RegExp(/^[+-]?\s*\d+(\.\d+)?$/); 

document.getElementById('ip').onkeyup = function(){ 
    var inputVal = this.value; 
    if(!(regex.test(inputVal))) this.className='err'; 
    else this.className='noerr'; 
} 

CSS:

.noerr{ 
    color: green; 
} 
.err{ 
    color: red; 
} 

Примечание: HTML5 имеет встроенные способы проверки ввода, а также имеет псевдоклассы, такие как :invalid и :valid, чтобы сделать то же, что и в приведенном выше примере. Если вы можете использовать HTML5, попробуйте this sample. Второе поле ввода выполняется с использованием HTML5 (не требуется JS).

HTML5:

<input id='iphtml5' pattern='[+-]?\s*\d+(\.\d+)?' type='text' /> 

CSS:

#iphtml5:valid{ 
    color: green; 
} 
#iphtml5:invalid{ 
    color: red; 
}