Ограничение ввода текстового поля для заданного регулярного выражения с использованием jQuery

Question

Рассмотрим следующее текстовое поле:

<input type="text" name="quantity" id="quantity_field" />

Используя jQuery, я хочу ограничить набор допустимых входных данных до quantity_field следующим регулярным выражением:

<script>
  var quantityRegexp = "^(0|[1-9]+[0-9]*)$";
</script>

Более конкретно, я хочу, чтобы браузер отбрасывал любые символы, введенные в quantity_field, которые бы приводили к тому, что значение текстового поля не соответствовало заданному регулярному выражению. (Соответствующая проверка, конечно, также будет выполнена на стороне сервера.)

Примеры:

• Если пользователь введет «foo 234», в текстовое поле будет введено только «234».
• Если пользователь введет «001230», в текстовое поле будет введено только «1230».
• Если пользователь введет «foo1bar», в текстовое поле будет введено только «1».

Вопрос: Какой самый простой способ добиться этого с помощью jQuery?

Answer 1

Плагин jQuery Constrain позволяет "гибкие ограничения, накладываемые на текстовые поля" и принимает регулярные выражения. Посмотреть это демо .

Answer 2

Не ответ на ваш вопрос (поскольку я не знаю jQuery), но регулярное выражение ^[1-9]*[0-9]*$ может не работать так, как вы ожидаете или думаете. Это соответствует пустым строкам, но также и числу типа 000000. Я ожидаю, что вы не хотите этого, так как ваш первый класс символов [1-9] явно игнорирует ноль. Я думаю, что вы должны изменить первый * на +: ^[1-9]+[0-9]*$. Однако это регулярное выражение будет отклонять (единственное) число 0. Если вы хотите включить это, вы должны сделать: ^(0|[1-9]+[0-9]*)$.

Answer 3

Если вы не знаете, сколько символов наберет пользователь (и просто хотите ограничить их цифрами), плагин jQuery Validation *1002* - ваш лучший выбор.

$('form.to-validate').validate({
   rules: {
      quantity: { digits: true }
   }
});

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

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

Надеюсь, это поможет!

Answer 4

Определите глобальную переменную oldVal (не описана ниже), которая содержит последнее известное значение. Привязать к действию keydown для поля ввода:

<script>
    $("#quantity_field").keydown(function() {
        var newVal = $("#quantity_field").val();
        var quantityRegexp = /^(0|[1-9]+[0-9]*)$/;

        // success
        if (quantityRegexp.test(newVal)) {
            oldVal = newVal;
            // hide error
            $("#quantity_field_error").hide();
        }

        // else failure
        else {
            $("#quantity_field").val(oldVal);
            // display error message
            $("#quantity_field_error").show();
        }
    });
</script>

Это должно помочь вам начать

Answer 5

Я советую вам позволить пользователю tpye все, что он хочет, а затем сделать проверку при отправке формы. (Конечно, вы все равно должны проверить на стороне сервера, поскольку он может легко отключить или изменить код проверки JavaScript)

Для проверки смотрите в

jQuery Validation Pluging