Проверка текстового поля с помощью события onkeyup Jquery без использования оповещения

Question

У меня есть следующее текстовое поле на моей HTML-странице.

Код, который я использую до сих пор.

<input type="text" id = "points" onkeyup="Validate()">
function Validate(){


var text_value = document.getElementById("points").value;
alert(text_value);

   if (!text_value.match(/^[56789]$/) && document.getElementById(called_id).value !="")
    {
       document.getElementById("points").value="";
       //  document.getElementById("points").focus(); 
       alert("Please Enter only between 5 and 10 ");
    }

}     

Допустимые значения: 5, 6, 7, 8, 9 и 10 . Я нашел способ на основе события onkeyup принять только 5, 6, 7, 8 и 9 ... Я хочу знать, как включить 10 там. Также я хочу знать, проверка события onkeyup для того же с помощью jquery .

1. Если пользователь задает любое другое значение, кроме этих, оно должно быть указано справа от текстового поля как "Значение должно быть от 5 до 10 " (не как предупреждение) .
2. Если первое введенное значение равно 1, следует дождаться следующего нажатия клавиши. Примите, если оно равно 0, или выдайте то же сообщение об ошибке, что и в предыдущем случае.

Answer 1

Рабочая Jsfiddle

Я бы предпочел без регулярных выражений:

function validate() {
    var num = document.getElementById("points2").value;
    var num = parseInt(num, 10);
    alert(num);
    if (num < 5 || num > 10) {
        document.getElementById("points2").value = "";
        alert("Please Enter only between 5 and 10 ");
    }
}

измените свое регулярное выражение на:

/^([5-9]|10)$/

ты должен использовать onchange событие:

<input type="text" id = "points"  onchange="Validate()">

function Validate(){    
var text_value = document.getElementById("points").value;
alert(text_value);

   if (!text_value.match(/^([5-9]|10)$/) && document.getElementById(called_id).value !="")
    {
       document.getElementById("points").value="";
       //  document.getElementById("points").focus(); 
       alert("Please Enter only between 5 and 10 ");
    }

}  

Answer 2

Как сказал Захир Ахмед, /^([5-9]|10)$/ поймать 10, а также. Для прослушивателя событий вы можете использовать

$('#textbox')[0].addEventListener('input', function(event) {
  var value = $(event.target).val();  
  // we already have a reference to the element through the event object,
  // crawling the DOM again is expensive.

  if(value != '') textboxError();
});

Это обходит jQuery, который некоторые могут осудить, но событие 'input' срабатывает немедленно и также работает, если текст был вставлен или введен каким-либо другим методом.

Answer 3

$('#textbox').keyup(function() {
    var value = $('#textbox').val();
    if(value != ''){
        if(!value.match(/^[5678910]$/))  
            textboxError();
        else{
            var length = value.length;
            if(value.charAt(length-1) == 0 && value.charAt(length-2) != 1)
                textboxError();
        }
    }
};

$('#textbox').change(function() {
    var value = $('#textbox').val();
    if(value != '')
        textboxError();
    }
};

function textboxError(){
    $('#textbox').val(''); 
    $('#textbox').focus(); 
    alert("Please Enter only between 5 and 10 ");
}

Что мы делаем,

1. Проверьте, является ли значение пустым (Если пусто, ничего не выполняйте)
2. Если не пусто, проверьте, соответствует ли значение определенному набору
3. Если это соответствует, теперь мы проверяем на 10. Что мы делаем, если последний введенный элемент поля равен 0, то предыдущее поле должно быть 1, поэтому оно составляет 10. Если нет, мы выдаем ошибку.
4. Но здесь есть проблема, пользователь может ввести 1 и покинуть поле, не вводя другой символ. Таким образом, вы можете расширить это поле onchange.
5. Onchange, теперь мы проверяем на счетчик 1, и это должно совпадать с счетчиком 10. Это решает нашу проблему. Вам не нужно беспокоиться о 0, потому что мы уже проверили это в блоке keyup.

Я не проверял код. Так что если какие-либо опечатки или ошибки, вы можете заменить их.