HTML5, giriş düzeni doğrulamasını değer değişikliğine zorlamak nasıl?

Question

HTML5'i öğrenmeye çalışıyorum ve aşağıdakilere rastladım. Kullanıcıyı girdikçe girişi doğrulamak için pattern giriş anahtar sözcüğünü kullanmak istiyorum (örneğin sekmeye bastıktan sonra veya giriş kutusundan odağı değiştirdikten sonra doğrulama).

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

Ve de:

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

Nasıl değeri değişikliği doğrulama tetiklemek için

onchange="this.variable.validate()" 

için kod oluşan

Aşağıdaki denediniz mi? Bunu sadece onSubmit yapabilirim.

Answer 1

javascript'in 'onkey' işlevlerine bir göz attınız mı? Kullanıcı türleri olarak bir şey istiyorsanız, aradığınız kişi olabilir

.

Ek olarak, onkeyup kullanıcı türleri olarak tetiklenirken, alan odak kaybettiğinde onchange oluşur. İhtiyacınız olan yere bağlıdır.

Birçok ister böyle bir şey deneyin:

onchange = variable.validate(this.value)

Answer 2

Sen keyUp kullanmalısınız, odak ve bulanıklık işlevi ihtiyacını uygulamaktır. Örneğin :

Eğer şifre giriş alanı vardır: JavaScript Kodu

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

:

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

_{Yasal Uyarı:
Burada çalışan söylemek üzere olduğum tüm tüm modern tarayıcılar için. Bu bağlamda "modern tarayıcı" terimi IE9 ve daha önceki sürümleri kapsamaz. Ayrıca, Windows için Safari yalnızca kısmi desteğe sahiptir. tek ihtiyacınız bir stil göstergesi ise}

, bunun için saf CSS kullanabilirsiniz: desen kullanırken, onsubmit doğrulama otomatik tarayıcı tarafından yapılır

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

(için Safari çalışmıyor Windows). Eğer IE8 gibi eski tarayıcılara desen işlevselliği backport için jQuery kullanmak istiyorsanız

Answer 4

, gibi bir şey yapabileceğini:

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

Bunda bir düzen var ve yapılacak giriş nesnelere sınıf invalidPattern katacak eşleşmiyor. Ayrıca, desenlerin doğrulanmaması durumunda gönderilmeyi önlemek için gerekli kontrolleri, vb. Yukarıda belirttiğim şey sadece deseni doğrulamak için hızlı ve hafif bir yazıdır.Daha tam olarak işlevsel pabucun için

, http://adodson.com/jquery.form.js/

model doğrulama kodu bu proje ila bak.

Answer 5

Hei ~ Sana ~~ kullanın bu reportValidity() #test giriş 3'ten büyük olduğu zaman

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

ardından ipuçları otomatik açılır orada istediğimizi biliyoruz

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

Aşağıdaki jQuery kodu, giriş her değiştirildiğinde onaylamayı zorlayacaktır.

<input...> öğelerinde oninput event'u engeller. Etkinlikden sonra değer geçersizse, değişiklik geri alınır ve orijinal değer geri yüklenir. Geçersiz değerin alana yapıştırıldığı durumları da ele alır.

data() function, HTML5 data-attribute'u kullanarak öğeye veri kaydeder ve geri getirir. Bu fonksiyon orijinal değeri data-last-valid elemanına kaydeder.

<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>