HTML5'te bir minlength doğrulama özelliği var mı?

608

minlengthBir <input>alanın niteliği çalışmıyor gibi görünüyor .

HTML5'te, alanlar için bir değerin minimum uzunluğunu ayarlayabildiğim başka bir özellik var mı?

html html5-validation

— emilan
kaynak

3

Her alanın cevabı olmayacaktır, ancak sadece bir değerin olduğundan emin olmak istiyorsanız "zorunlu" özelliğini kullanabilirsiniz. <input type = "text" name = "input1" Zorunlu = "Zorunlu" />

— Yok

1

Olası Çoğaltma: stackoverflow.com/questions/5533053/textarea-character-limit/…

— Web_Designer

7

Var değil, ama bir yaygara yapalım ve içeri girelim! w3.org/Bugs/Public/show_bug.cgi?id=20557

— Eric Elliott

Tam bir uygulama yapmak istiyorsanız JS / Jquery kullanmanız gerekir (örn. Gerekli, minlength, gönderirken hata mesajı). Safari hala gerekli özelliği bile tam olarak desteklemez ve yalnızca Chrome ve Opera minLength'yu destekler. örneğin bkz. caniuse.com/#search=required

— rmcsharry

1326

patternÖzniteliği kullanabilirsiniz . requiredÖzelliği, aynı zamanda, aksi takdirde, boş bir değere sahip bir giriş alanı hariç tutulur, gerekli kısıtlama doğrulama .

<input pattern=".{3,}"   required title="3 characters minimum">
<input pattern=".{5,10}" required title="5 to 10 characters">

Deseni "boş veya minimum uzunluk" için kullanma seçeneğini oluşturmak istiyorsanız, aşağıdakileri yapabilirsiniz:

<input pattern=".{0}|.{5,10}" required title="Either 0 OR (5 to 10 chars)">
<input pattern=".{0}|.{8,}"   required title="Either 0 OR (8 chars minimum)">

— user123444555621
kaynak

139

JQuery yerine html5 kullanmak için +1. Ben sadece başlık özniteliği desen karşılanmazsa kullanıcıya gösterilecek mesajı ayarlamak için izin verdiğini eklemek istedim. Aksi takdirde varsayılan bir mesaj gösterilir.

— Hiçbiri

11

@ J.Money Hala "Lütfen istenen biçimle eşleştirin: <title>" yazıyor. Önceki varsayılan mesajı atlamanın bir yolu var mı?

— CᴴᴀZ

59

Ne yazık ki bu metin için desteklenmiyor .

— ThiefMaster

27

@ChaZ @Basj Aşağıdaki özelliği ekleyerek özel bir hata mesajı ekleyebilirsiniz:oninvalid="this.setCustomValidity('Your message')"

— bigtex777

6

Geçersiz bir giriş girerseniz ve kullanıyorsanız setCustomValidity, girişi düzelttikten sonra bile hata mesajını göstermeye devam eder. Buna onchangekarşı koymak için aşağıdaki yöntemi kullanabilirsiniz. oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"

— sohaiby

154

Orada olan bir minlengthözellik HTML5 Spec şimdi, hem de validity.tooShortarayüz.

Her ikisi de artık tüm modern tarayıcıların son sürümlerinde etkinleştirildi. Ayrıntılar için bkz. Https://caniuse.com/#search=minlength .

— rhgb
kaynak

1

Firefox 44 ve hala uygulanmadı.

— Christian Læirbag

2

Chrome veya Opera dışında hala desteklenmiyor. caniuse.com/#search=minlength

— rmcsharry

Ocak 2017 ve hala yalnızca Chrome ve Opera desteği minlength

— TrojanName

2

@TrojanName Firefox, sürüm 51'denminlength beri niteliği destekler .

— Luca Detomi

16

Bu Yığın Taşması cevabındaki durumu güncellemek için periyodik yorumlar, insanlara burada mevcut bilgiler için kontrol etmelerini söylemekten daha az yararlıdır: caniuse.com/#search=minlength

— chadoh

19

İşte yalnızca HTML5 çözümü (minlength 5, maxlength 10 karakter doğrulaması istiyorsanız)

http://jsfiddle.net/xhqsB/102/

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>

— Ali Çarıkçıoğlu
kaynak

3

Alan iyi değilse özel bir hata mesajı nasıl ayarlanır?

— Basj

2

Özel mesaj titleiçin gerekli mesajla öznitelik ekleyin .

— Shlomi Hassid

8

Aynı patterncevap birkaç ay önce verildi . Bu cevap nasıl daha iyi?

— Dan Dascalescu

@DanDascalescu Form etiketleri ve net bir açıklaması yoktu. Ayrıca çalışan bir jsfiddle demosu da ekledim. (btw Stackoverflow kuralları, topluma faydalı olduğu sürece benzer cevaplar vermenin yasak olmadığını söylüyor)

— Ali Çarıkçıoğlu

Daha iyi bir cevap vermenin bir yolu da demoyu burada çalıştırılabilir bir kod snippet'i olarak SO'ya dahil etmektir .

— Dan Dascalescu

11

Evet, işte burada. Maxlength gibi. W3.org belgeleri: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

Durumda minlengthdeğil çalışır, kullanmak patterniçin @ Pumbaa80 tarafından belirtildiği gibi niteliğini inputetiketi.

Metin alanı için: Maks. kullanın maxlengthve min için bu bağlantıya gidin .

Burada hem max hem de min için bulacaksınız.

— SohelAhmedM
kaynak

8

Maxlength ve minlength ile birlikte veya onsuz kullandım requiredve HTML5 için çok iyi çalıştı.

<input id="passcode" type="password" minlength="8" maxlength="10">

Snippet'i genişlet

'

— benaff033
kaynak

6

HTML5'te minLength özniteliği (maxLength öğesinin aksine) yerel olarak bulunmaz. Ancak bir alanı x karakterden daha az içeriyorsa doğrulamanın bazı yolları vardır.

Bu bağlantıda jQuery kullanılarak bir örnek verilmiştir: http://docs.jquery.com/Plugins/Validation/Methods/minlength

<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  <script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
    debug: true,
    success: "valid"
});;
</script>

  <script>
  $(document).ready(function(){
    $("#myform").validate({
  rules: {
    field: {
      required: true,
      minlength: 3
    }
  }
});
  });
  </script>
</head>
<body>

<form id="myform">
  <label for="field">Required, Minimum length 3: </label>
  <input class="left" id="field" name="field" />
  <br/>
  <input type="submit" value="Validate!" />
</form>

</body>
</html>

— Valéry Stroeder
kaynak

1

"minLength özniteliği (maxLength'un aksine) HTML5'te yerel olarak mevcut değil" Evet: w3.org/TR/html5/…

— mikemaccana

Chrome veya Opera dışında hala desteklenmiyor. caniuse.com/#search=minlength

— rmcsharry

5

HTML5 değil, yine de pratik: AngularJS kullanıyorsanız ng-minlength, hem girişler hem de textareas için kullanabilirsiniz . Ayrıca bkz bu Düşmek .

— mik01aj
kaynak

Angular standartlara uygun olarak yazılmış olsaydı, böyle bir şey kullanırlardı, data-ng-minlengthancak bir geliştirici neden standartları önemsiyordu? > __>

— John

4

Değerli standart takipçisi, kullanabilirsiniz data-ng-minlengthkuyu olarak .

— mik01aj

4

JQuery kullanarak ve HTML5'i birleştirerek textarea için benim çözümüm minimum uzunluğu kontrol etmek için doğrulama gerekli.

minlength.js

$(document).ready(function(){
  $('form textarea[minlength]').on('keyup', function(){
    e_len = $(this).val().trim().length
    e_min_len = Number($(this).attr('minlength'))
    message = e_min_len <= e_len ? '' : e_min_len + ' characters minimum'
    this.setCustomValidity(message)
  })
})

HTML

<form action="">
  <textarea name="test_min_length" id="" cols="30" rows="10" minlength="10"></textarea>
</form>

— Hiep Dinh
kaynak

Çok kullanışlı ve zarif bir cevap!

— Silvio Delgado

4

minlengthözelliği artık tarayıcıların çoğunda yaygın olarak desteklenmektedir .

<input type="text" minlength="2" required>

Ancak, diğer HTML5 özelliklerinde olduğu gibi IE11 de bu panoramada yok. Bu nedenle, geniş bir IE11 kullanıcı tabanınız varsa, çoğu tarayıcıda (IE11 dahil) patternneredeyse tüm tahtada desteklenen HTML5 özelliğini kullanmayı düşünün .

Güzel ve tek tip bir uygulamaya sahip olmak ve belki de genişletilebilir veya dinamik (HTML'nizi oluşturan çerçeveye dayanarak) için, bu patternözelliğe oy verirdim:

<input type="text" pattern=".{2,}" required>

Kullanırken hala küçük bir kullanılabilirlik yakalaması varpattern . Kullanıcı kullanırken sezgisel olmayan (çok genel) bir hata / uyarı mesajı görecektir pattern. Bkz bu jsfiddle veya altında:

<h3>In each form type 1 character and press submit</h3>
</h2>
<form action="#">
  Input with minlength: <input type="text" minlength="2" required name="i1">
  <input type="submit" value="Submit">
</form>
<br>
<form action="#">
  Input with patern: <input type="text" pattern=".{2,}" required name="i1">
  <input type="submit" value="Submit">
</form>

Snippet'i genişlet

Örneğin, Chrome'da (ancak çoğu tarayıcıda benzer), aşağıdaki hata iletilerini alırsınız:

Please lengthen this text to 2 characters or more (you are currently using 1 character)

kullanarak minlengthve

Please match the format requested

kullanarak pattern.

— Gabriel Petrovay
kaynak

2

Yeni sürüm:

Kullanımı (textarea ve input) genişletir ve hataları düzeltir.

// Author: Carlos Machado
// Version: 0.2
// Year: 2015
window.onload = function() {
    function testFunction(evt) {
        var items = this.elements;
        for (var j = 0; j < items.length; j++) {
            if ((items[j].tagName == "INPUT" || items[j].tagName == "TEXTAREA") && items[j].hasAttribute("minlength")) {
                if (items[j].value.length < items[j].getAttribute("minlength") && items[j].value != "") {
                    items[j].setCustomValidity("The minimum number of characters is " + items[j].getAttribute("minlength") + ".");
                    items[j].focus();
                    evt.defaultPrevented;
                    return;
                }
                else {
                    items[j].setCustomValidity('');
                }
            }
        }
    }
    var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    var isChrome = !!window.chrome && !isOpera;
    if(!isChrome) {
        var forms = document.getElementsByTagName("form");
        for(var i = 0; i < forms.length; i++) {
            forms[i].addEventListener('submit', testFunction,true);
            forms[i].addEventListener('change', testFunction,true);
        }
    }
}

— Carlos Machado
kaynak

Bu zarif güncellenmiş çözüm için teşekkürler. Minlength'i desteklemedikleri için Chrome / Opera dışında çalışıyor mu? caniuse.com/#search=minlength Sadece Mac Safari'de test ettim ve işe yaramadı :( Chrome / Opera tarayıcıları için eventListener eklediğinizi görüyorum, bu yüzden belki de yanlış bir şey yapıyorum.

— rmcsharry

Safari'de hata ayıkladıktan sonra var items = this.elements; formdaki öğeleri değil, FORMS koleksiyonunu döndürüyor. Tuhaf.

— rmcsharry

2

Otomatik doldurma açıkken ve alanların otomatik doldurma tarayıcısı oluşturma yöntemiyle alan olduğunda bazen kromda olduğunu, minlength doğrulama kurallarını atladığını fark ettiğimden, bu durumda aşağıdaki özelliği kullanarak otomatik doldurmayı devre dışı bırakmanız gerekir:

Otomatik tamamlama = "kapalı"

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />

— talsibony
kaynak

Bu şifre alanlarıyla ilgili değil.

— Igor Popov

HTML girişi ile ilgili, şifre gerçekten HTML girişi.

— talsibony

2

Bkz. Http://caniuse.com/#search=minlength , bazı tarayıcılar bu özelliği desteklemeyebilir.

"Tür" değeri bunlardan biri ise:

metin, e-posta, arama, şifre, tel veya url (uyarı: sayı içermez | şimdi tarayıcı desteği yok "tel" - 2017.10)

Kullanım MINLENGTH (/ maxlength) nitelik, bu minimum karakter sayısını belirtir.

Örneğin.

<input type="text" minlength="11" maxlength="11" pattern="[0-9]*" placeholder="input your phone number">

veya "kalıp" özelliğini kullanın:

<input type="text" pattern="[0-9]{11}" placeholder="input your phone number">

"Tür" sayı ise , althougth minlength (/ maxlength) desteklenmezse, min bunun yerine (/ max) özelliğini .

Örneğin.

<input type="number" min="100" max="999" placeholder="input a three-digit number">

— levinit
kaynak

1

Bu JavaScript kodunu yazdım, [minlength.js]:

window.onload = function() {
    function testaFunction(evt) {
        var elementos = this.elements;
        for (var j = 0; j < elementos.length; j++) {
            if (elementos[j].tagName == "TEXTAREA" && elementos[j].hasAttribute("minlength")) {
                if (elementos[j].value.length < elementos[j].getAttribute("minlength")) {
                    alert("The textarea control must be at least " + elementos[j].getAttribute("minlength") + " characters.");
                    evt.preventDefault();
                };
            }
        }
    }
    var forms = document.getElementsByTagName("form");
    for(var i = 0; i < forms.length; i++) {
        forms[i].addEventListener('submit', testaFunction, true);
    }
}

— Carlos Machado
kaynak

1

Bu davranışı gerçekleştirmek isterseniz , giriş alanında
her zaman küçük bir önek gösterin veya kullanıcı bir öneki silemez :

   //prefix="prefix_text"
   //if the user change the prefix, restore the input with the prefix:
   if(document.getElementById('myInput').value.substring(0,prefix.length).localeCompare(prefix)) 
       document.getElementById('myInput').value = prefix;

— Carlos Rafael
kaynak

1

Max ve min kullandım sonra gerekli ve benim için çok iyi çalıştı ama emin değilim eğer bir ama kodlama yöntemidir. Umut ediyorum bu yardım eder

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>

— Humphrey
kaynak

1

Benim durumumda, en elle ve Firefox (43.0.4) kullanarak doğruladığım minlengthve validity.tooShortne yazık ki mevcut değil.

Devam etmek için yalnızca minimum uzunlukları saklamam gerektiğinden, kolay ve kullanışlı bir yol, bu değeri giriş etiketinin geçerli başka bir özelliğine atamaktır. Daha sonra bu durumda, kullanabilir min, maxve step[tipi = "sayı"] girişlerden özellikleri.

Bu sınırları bir dizide saklamak yerine, öğe kimliğinin dizi diziniyle eşleşmesini sağlamak yerine aynı girişte depolandığını bulmak daha kolaydır.

— Christian Læirbag
kaynak

-4

İzin verilen değerlerin aralığını belirtebileceğiniz bir maks ve min değeri ekleyin:

<input type="number" min="1" max="999" />

— Deepti Gehlot
kaynak