HTML5, jak wymusić sprawdzanie wzorca wejściowego przy zmianie wartości?

Question

Próbuję uczyć się HTML5 i natknąłem się na następujące rzeczy. Chciałbym użyć słowa wejściowego pattern do sprawdzenia poprawności danych wejściowych podczas wpisywania przez użytkownika (np. Sprawdzania poprawności po naciśnięciu klawisza tabulacji lub zmianie fokusu z pola wprowadzania).

Próbowałem następujące:

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

i jako dobrze:

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

wymyśliłem kod

onchange="this.variable.validate()" 

Jak wyzwolić walidacji na zmiany wartości? Mogę to zrobić tylko onSubmit.

Answer 1

Czy obejrzałeś funkcje "onkey" javascript?

onkeyup może być tym, którego szukasz, jeśli chcesz coś wpisać jako typ użytkownika.

Dodatkowo, onchange pojawia się, gdy pole traci ostrość, podczas gdy onkeyup jest uruchamiany, gdy użytkownik wpisze. Zależy od tego, czego potrzebujesz.

Państwo wiele chce spróbować czegoś takiego:

onchange = variable.validate(this.value)

Answer 2

Należy użyć keyup, ostrości i funkcja rozmycia wdrożyć swoje potrzeby. Na przykład:

masz pole wprowadzania na hasło:

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

w kodzie 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 3

_{Zastrzeżenie:
Wszystko mam zamiar powiedzieć tutaj działa dla wszystkich nowoczesnych przeglądarek. Termin "nowoczesna przeglądarka" w tym kontekście wyklucza IE9 i wcześniejsze. Również Safari dla Windows ma tylko częściowe wsparcie.}

Jeśli wszystko czego potrzebujesz to wskaźnik stylizacji, można użyć czystego CSS do tego:

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

Przy użyciu wzorca, walidacja onsubmit jest automatycznie wykonywane przez przeglądarkę (nie działa w Safari dla Windows).

Answer 4

Jeśli chcesz użyć jQuery backport funkcjonalność wzór dla starszych przeglądarek, takich jak IE8, można zrobić coś takiego:

// 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'); 
     } 
    }); 
}); 

To doda invalidPattern klasy obiektów wejściowych, które mają wzór i zrobienia nie pasuje do tego. Możesz również chcieć dodać kontrole dla wymaganego, itp. I przedłożyć sprawdzanie formularza, aby zapobiec przesyłaniu, jeśli wzorce nie zostaną zatwierdzone. To, co umieściłem powyżej, to szybki, lekki skrypt do sprawdzenia tylko wzorca.

Dla bardziej pełni funkcjonalny podkładki, spojrzeć na http://adodson.com/jquery.form.js/

Wzór Kod weryfikacyjny jest z tego projektu.

Answer 5

hei ~ wiem co chcesz ~~ Użyj tego reportValidity()

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

wtedy, gdy # # # test pomiaru jest większa niż 3 znajduje się wskazówki 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>

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

Answer 6

Następujący kod jQuery wymusi sprawdzanie poprawności za każdym razem, gdy zmieni się dane wejściowe.

Przechwytuje elementy oninput event na elementach . Jeśli po zdarzeniu wartość jest nieważna, zmiana zostaje cofnięta, a oryginalna wartość zostaje przywrócona. Obsługuje także sytuacje, w których niepoprawna wartość została wklejona na pole.

Przechowuje i pobiera dane do elementu za pomocą HTML5 data-attribute. Funkcja przechowuje oryginalną wartość do elementu 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>