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

Question

Я пытаюсь выучить HTML5 и наткнулся на следующее. Я хотел бы использовать ключевое слово pattern для проверки ввода по мере того, как пользователь вводит его (например, проверка после нажатия вкладки или изменения фокуса из поля ввода).

Я пробовал следующее:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" onchange="this.variable.validate()" />  </li>

А также:

<input name="variable" value="" tabindex="1" maxlength="13" required="required" pattern="${expectedValue}" />  </li>

Я составил код для

onchange="this.variable.validate()" 

Как запустить проверку при изменении значения? Я могу сделать это только onSubmit.

Answer 1

_{Отказ от ответственности:
Все, что я собираюсь здесь сказать, работает для всех современных браузеров.Термин «современный браузер» в этом контексте исключает IE9 и более ранние версии.Также Safari для Windows имеет только частичную поддержку.}

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

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

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

Answer 2

Использовать 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, автоматически появляется подсказка

   $('#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>

https://html.spec.whatwg.org/#dom-cva-reportvalidity

Answer 3

<input type="text" name="country" pattern="[A-z]{3}" oninput="this.reportValidity()" />

Проверьте бит oninput.

Возможно, вы захотите проверить старые браузеры, например:

<input type="text" name="country" pattern="[A-z]{3}"
    oninput="if (typeof this.reportValidity === 'function') {this.reportValidity();}"/>

Answer 4

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

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

Функция data() сохраняет и извлекает любые данные в элемент, используя HTML5 data-attribute . Функция сохраняет исходное значение в элементе 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>

Answer 5

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

// Jquery Function to Validate Patterns on Input Objects
(function( $ ){
    $.fn.validatePattern = function(search) {
        // Get the current element's 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 к входным объектам, которые имеют шаблон и не соответствуют ему. Вы также можете добавить проверки для обязательных и т. Д. И отправить проверки для формы, чтобы предотвратить отправку, если шаблоны не проверяются. То, что я изложил выше, это быстрый, легкий скрипт для проверки только шаблона.

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

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

Answer 6

Вы должны использовать функции 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    });

Answer 7

Мое предложение состоит в том, чтобы запретить пользователю вводить недопустимые символы в первую очередь, чтобы им не приходилось возвращаться и исправлять форму.

<label for="test">Only accepts 'a' characters</label>
<input id="test" type="text"
  placeholder="aa" pattern="[a]{1,2}" maxlength="2"
  oninput="if (!this.checkValidity()) this.value = this.value.slice(0, -1)" /> 

Answer 8

Вы ознакомились с функциями onkey для javascript?

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

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

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

onchange = variable.validate(this.value)