HTML5, как заставить проверку входных паттернов при изменении значения?

Ответ 1

<суб > Отказ от ответственности:
Все, что я собираюсь сказать здесь, работает для всех современных браузеров. Термин "современный браузер" в этом контексте исключает IE9 и ранее. Также Safari для Windows имеет лишь частичную поддержку. Суб >

Если вам нужен индикатор стиля, вы можете использовать для этого чистый CSS:

input[pattern]:invalid{
  color:red;
}

При использовании шаблона проверка onsubmit выполняется автоматически браузером (не работает в Safari для Windows).

Ответ 2

Валидация должна выполняться автоматически браузером при каждом нажатии клавиши. Чтобы это произошло, вы должны убедиться, что атрибут "шаблон" содержит правильное регулярное выражение:

<input type="text" name="country" pattern="[A-z]{3}" />

Это поле ввода действует только в том случае, если пользователь вводил ровно 3 буквы (например, код страны с 3 буквами)

В браузере, поддерживающем проверку формы HTML5, поле ввода автоматически проверяется. Нет необходимости в javascript.

Вы найдете еще несколько примеров здесь

Ответ 3

hei ~ Я знаю, чего ты хочешь ~~ Использовать это reportValidity()

$('#test').on('input',function (e) {  
    e.target.setCustomValidity('')
if ($(this).val()>3) {
    console.log('o~~~~error');
    this.setCustomValidity('123')
    // this.checkValidity()
   this.reportValidity();
}

тогда, когда вход #test больше 3, появляется подсказка auto pop

   $('#test').on('input', function(e) {
   this.setCustomValidity('')
     if ($(this).val() > 3) {
       this.setCustomValidity('wooo~~~~')
     }
     // e.target.checkValidity()
     this.reportValidity();
   })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input autofocus id='test' type="text" min="1" pattern="[0-9]+" required>
<!--   <button type="submit">submit</button> -->
</form>

Ответ 4

Следующий код jQuery будет принудительно выполнять проверку каждый раз при изменении ввода.

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

Функция data() сохраняет и извлекает любые данные в элемент с помощью HTML5 атрибут данных. Функция сохраняет исходное значение в элементе data-last-valid.

<script lang="text/javascript">
    // First "input" means event type `oninput`, second "input" is the CSS selector.
    // So read as "for all <input ...> elements set the event handler 
    // for the "oninput" event to the function...
    $(document).on("input", "input", function (event) {
        if (this.checkValidity()) {
            // Store the current valid value for future use
            $(this).data('last-valid', this.value);
        }
        else {
            // Undo the change using the stored last valid value
            this.value = $(this).data('last-valid') || "";
        }
    });
</script>

Ответ 5

Вы должны использовать функцию keyup, focus и blur для реализации ваших потребностей. Например:

у вас есть поле ввода для пароля:

<input id="pswd" type="password" required name="pswd" />

В JavaScript-коде:

$('input[type=password]').keyup(function() {
// keyup event code here with validation rules });

$('input[type=password]').focus(function() {
// focus code here to show message which contains rules for input field  });

$('input[type=password]').blur(function() {
// blur code here    });

Ответ 6

Вы взглянули на функции javascript 'onkey'?

onkeyup может быть тем, который вы ищете, если хотите что-то, как пользователь набирает.

В добавлении onchange возникает, когда поле теряет фокус, а onkeyup запускается как пользовательский тип. Зависит от того, что вам нужно.

Вы хотите попробовать что-то вроде этого:

onchange = variable.validate(this.value)

Ответ 7

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

// Jquery Function to Validate Patterns on Input Objects
(function( $ ){
    $.fn.validatePattern = function(search) {
        // Get the current element siblings
        var pattern = this.attr('pattern');
        var value = this.val();

        return !(pattern&&(value.length>0)&&!value.match( new RegExp('^'+pattern+'$') ));
    };
})( jQuery );

$(document).ready(function() {
    // Bind pattern checking (invalid) to on change
    $(':input').change(function() {
        if (!$(this).validatePattern()) {
            $(this).addClass('invalidPattern');
        }
    });
    // Bind pattern valid to keyUp
    $(':input').keyUp(function() {
        if ($(this).validatePattern()) {
            $(this).removeClass('invalidPattern');
        }
    });
});

Это добавит класс invalidPattern для ввода объектов, имеющих шаблон и не соответствующих ему. Вы также можете добавить проверки для требуемых и т.д. И отправить подтверждения для формы, чтобы предотвратить отправку, если шаблоны не проверяются. То, что я поставил выше, - это быстрый, легкий script для проверки только шаблона.

Для более полной функциональной прокладки посмотрите http://adodson.com/jquery.form.js/

Код проверки шаблона из этого проекта.