มีแอตทริบิวต์การตรวจสอบความยาว minlength ใน HTML5 หรือไม่

608

ดูเหมือนว่าminlengthแอตทริบิวต์สำหรับ<input>เขตข้อมูลไม่ทำงาน

มีคุณสมบัติอื่นใน HTML5 ด้วยความช่วยเหลือของที่ฉันสามารถตั้งค่าความยาวน้อยที่สุดของค่าสำหรับเขตข้อมูลหรือไม่

html  html5-validation 
— emilan
แหล่งที่มา
3
มันจะไม่เป็นคำตอบสำหรับทุกฟิลด์ แต่ถ้าคุณเพียงแค่ต้องการให้แน่ใจว่ามีค่าอยู่ที่นั่นคุณสามารถใช้แอตทริบิวต์ "ต้อง" <input type = "text" name = "input1" required = "required" />
— ไม่มี
1
สำเนาซ้ำที่เป็นไปได้: stackoverflow.com/questions/5533053/textarea-character-limit/…
— Web_Designer
7
มันไม่มีอยู่จริง แต่ลองสร้างความยุ่งยากและเข้าไปใน! w3.org/Bugs/Public/show_bug.cgi?id=20557
— Eric Elliott
คุณต้องใช้ JS / Jquery หากคุณต้องการใช้งานอย่างเต็มรูปแบบ (เช่นจำเป็น, minlength, ข้อความแสดงข้อผิดพลาดเมื่อส่ง ฯลฯ ) Safari ยังไม่รองรับคุณสมบัติที่จำเป็นอย่างสมบูรณ์และมีเพียง Chrome และ Opera ที่รองรับ minLength เช่นดูcaniuse.com/#search=required
— rmcsharry

คำตอบ:

1326

คุณสามารถใช้แอตทริบิวต์pattern requiredแอตทริบิวต์ยังเป็นสิ่งจำเป็นมิฉะนั้นช่องใส่กับค่าว่างจะได้รับการยกเว้นจากการตรวจสอบข้อ จำกัด

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

หากคุณต้องการสร้างตัวเลือกเพื่อใช้รูปแบบสำหรับ "เปล่าหรือความยาวต่ำสุด" คุณสามารถทำสิ่งต่อไปนี้:

<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
แหล่งที่มา
139
+1 สำหรับการใช้ html5 แทน jQuery ฉันแค่อยากจะเพิ่มว่าคุณลักษณะชื่อเรื่องช่วยให้คุณสามารถตั้งค่าข้อความที่จะแสดงให้กับผู้ใช้ถ้ารูปแบบไม่เป็นไปตาม มิฉะนั้นข้อความเริ่มต้นจะปรากฏขึ้น
— ไม่มี
11
@ J.Money มันยังบอกว่า "กรุณาตรงกับรูปแบบที่ร้องขอ: <title>" มีวิธีการข้ามข้อความเริ่มต้นก่อนหน้าหรือไม่
— CᴴᴀZ
59
แต่น่าเสียดายที่นี้จะไม่ได้รับการสนับสนุนสำหรับ textareas
— ThiefMaster
27
@ChaZ @Basj คุณสามารถเพิ่มข้อความแสดงข้อผิดพลาดที่กำหนดเองโดยการเพิ่มคุณสมบัติดังต่อไปนี้:oninvalid="this.setCustomValidity('Your message')"
— bigtex777
6
หากคุณป้อนข้อมูลเข้าที่ไม่ถูกต้องและคุณกำลังใช้setCustomValidityงานอยู่ข้อความนั้นจะยังคงแสดงข้อความแสดงข้อผิดพลาดต่อไปแม้ว่าคุณจะแก้ไขข้อผิดพลาด คุณสามารถใช้onchangeวิธีการต่อไปนี้เพื่อตอบโต้ oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
— sohaiby
154

มีเป็นminlengthคุณสมบัติในHTML5 สเป็คตอนนี้เช่นเดียวกับvalidity.tooShortอินเตอร์เฟซ

ตอนนี้ทั้งคู่เปิดใช้งานในเบราว์เซอร์รุ่นใหม่ล่าสุดทั้งหมด ดูรายละเอียดhttps://caniuse.com/#search=minlength

— rhgb
แหล่งที่มา
1
Firefox 44 และยังไม่ได้ใช้งาน
— Christian Læirbag
2
ยังไม่รองรับนอก Chrome หรือ Opera caniuse.com/#search=minlength
— rmcsharry
มันคือ 2017 มกราคมและยังคงมีเพียง Chrome และ Opera ที่รองรับ minlength
— TrojanName
2
@TrojanName Firefox สนับสนุนminlengthแอตทริบิวต์ตั้งแต่รุ่น 51
— Luca Detomi
16
การแสดงความคิดเห็นเป็นระยะเพื่ออัปเดตสถานะของคำตอบสแต็กโอเวอร์โฟลว์นี้มีประโยชน์น้อยกว่าการบอกให้ผู้คนตรวจสอบข้อมูลปัจจุบันได้ที่นี่: caniuse.com/#search=minlength
— chadoh
19

นี่คือโซลูชัน HTML5 เท่านั้น (หากคุณต้องการความยาว minlength 5, การตรวจสอบความยาวสูงสุด 10 อักขระ)

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
— Ali Çarıkçıoğlu
แหล่งที่มา
3
วิธีการตั้งค่าข้อความแสดงข้อผิดพลาดที่กำหนดเองถ้าเขตข้อมูลไม่ตกลง
— Basj
2
สำหรับข้อความที่กำหนดเองเพิ่มtitleคุณสมบัติที่มีข้อความที่จำเป็น
— Shlomi Hassid
8
เช่นเดียวกับpatternคำตอบที่ได้รับไม่กี่เดือนก่อนหน้านี้ คำตอบนี้ดีกว่าอย่างไร
— Dan Dascalescu
@DanDascalescu เขาไม่มีแท็กฟอร์มและคำอธิบายที่ชัดเจน ฉันยังรวมการสาธิต jsfiddle ที่ใช้งานได้ (btw กฎ Stackoverflow บอกว่ามันเป็นสิ่งต้องห้ามที่จะให้คำตอบที่คล้ายกันตราบใดที่มันเป็นประโยชน์ต่อชุมชน)
— Ali Çarıkçıoğlu
วิธีหนึ่งที่จะให้คำตอบที่ดียิ่งขึ้นคือการรวมการสาธิตที่นี่ใน SO เพื่อเป็นข้อมูลโค้ดที่รันได้
— Dan Dascalescu
11

ใช่มันเป็น มันเหมือนกับความยาวสูงสุด เอกสาร W3.org: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

ในกรณีที่minlengthใช้งานไม่ได้ให้ใช้patternแอตทริบิวต์ตามที่ระบุโดย @ Pumbaa80 สำหรับinputแท็ก

สำหรับ textarea: สำหรับการตั้งค่าสูงสุด; ใช้งานmaxlengthและสำหรับนาทีไปที่ลิงค์นี้

คุณจะพบว่าที่นี่ทั้งสำหรับสูงสุดและต่ำสุด

— SohelAhmedM
แหล่งที่มา
6

แอตทริบิวต์ minLength (ไม่เหมือนกับ maxLength) ไม่มีอยู่ใน HTML5 อย่างไรก็ตามมีบางวิธีในการตรวจสอบความถูกต้องของเขตข้อมูลหากมันมีอักขระน้อยกว่า x ตัว

ตัวอย่างได้รับการใช้ jQuery ที่ลิงค์นี้: 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
แหล่งที่มา
1
"แอตทริบิวต์ minLength (ไม่เหมือน maxLength) ไม่มีอยู่ใน HTML5" ใช่: w3.org/TR/html5/…
— mikemaccana
ยังไม่รองรับนอก Chrome หรือ Opera caniuse.com/#search=minlength
— rmcsharry
5

ไม่ใช่ HTML5 แต่ใช้งานได้จริง: ถ้าคุณใช้AngularJSคุณสามารถใช้ng-minlengthกับทั้งอินพุตและ textareas ดูปังก์นี้ด้วย

— mik01aj
แหล่งที่มา
ถ้า Angular ถูกเขียนให้เป็นไปตามมาตรฐานพวกเขาจะใช้บางอย่างเช่นdata-ng-minlengthแต่ทำไมนักพัฒนาจะสนใจมาตรฐาน? > __>
— จอห์น
4
เรียนผู้ตามมาตรฐานที่คุณสามารถใช้data-ng-minlengthเช่นกัน
— mik01aj
4

โซลูชันของฉันสำหรับ textarea โดยใช้ jQuery และการรวมการตรวจสอบ HTML5 ที่จำเป็นเพื่อตรวจสอบความยาวขั้นต่ำ

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
แหล่งที่มา
คำตอบที่มีประโยชน์และสง่างามมาก!
— Silvio Delgado
4

minlengthแอตทริบิวต์อยู่ในขณะนี้ได้รับการสนับสนุนอย่างกว้างขวางในส่วนใหญ่ของเบราว์เซอร์

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

แต่เช่นเดียวกับคุณสมบัติอื่น ๆ ของ HTML5 IE11 นั้นหายไปจากภาพพาโนรามานี้ ดังนั้นหากคุณมีฐานผู้ใช้ IE11 กว้างลองพิจารณาใช้patternคุณสมบัติ HTML5 ที่รองรับเกือบทั่วกระดานในเบราว์เซอร์ส่วนใหญ่ (รวมถึง IE11)

เพื่อให้มีการนำไปใช้ที่ดีและสม่ำเสมอและอาจขยายหรือไดนามิก (ขึ้นอยู่กับกรอบงานที่สร้าง HTML ของคุณ) ฉันจะลงคะแนนให้กับpatternแอตทริบิวต์:

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

ยังคงมีการจับการใช้งานขนาดเล็กpatternเมื่อใช้ ผู้ใช้จะเห็นข้อผิดพลาด (ทั่วไปมาก) ไม่ใช่งานง่ายข้อความเตือน / patternเมื่อใช้ ดูjsfiddle นี้หรือด้านล่าง:

<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>
ขยายตัวอย่างข้อมูล

ตัวอย่างเช่นใน Chrome (แต่คล้ายกันในเบราว์เซอร์ส่วนใหญ่) คุณจะได้รับข้อความแสดงข้อผิดพลาดต่อไปนี้:

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

โดยใช้minlengthและ

Please match the format requested

patternโดยใช้

— Gabriel Petrovay
แหล่งที่มา
2

เวอร์ชั่นใหม่:

มันขยายการใช้งาน (textarea และอินพุต) และแก้ไขข้อบกพร่อง

// 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
แหล่งที่มา
ขอบคุณสำหรับโซลูชันที่อัปเดตที่สวยงามนี้ มันทำงานนอก Chrome / Opera ได้หรือไม่เพราะพวกเขาไม่รองรับ minlength caniuse.com/#search=minlength ฉันเพิ่งทดสอบบน Mac Safari และใช้งานไม่ได้ :( ฉันเห็นว่าคุณกำลังเพิ่ม eventListener สำหรับเบราว์เซอร์ที่ไม่ใช่ Chrome / Opera ดังนั้นบางทีฉันอาจทำสิ่งผิดปกติ
— rmcsharry
หลังจากตรวจแก้จุดบกพร่อง Safari ดูเหมือนว่า var items = this.elements กำลังส่งคืนคอลเลกชัน FORMS ไม่ใช่รายการในแบบฟอร์ม แปลก.
— rmcsharry
2

ฉันสังเกตเห็นว่าบางครั้งในโครเมี่ยมเมื่อเปิดใช้งานการป้อนอัตโนมัติและฟิลด์เป็นฟิลด์ที่สร้างโดยเบราว์เซอร์ป้อนอัตโนมัติในวิธีการมันข้ามกฎการตรวจสอบความยาว minlength ดังนั้นในกรณีนี้คุณจะต้องปิดใช้งานการป้อนอัตโนมัติด้วยแอตทริบิวต์ต่อไปนี้:

การเติมข้อความอัตโนมัติ = "ปิด" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
— talsibony
แหล่งที่มา
นี่ไม่เกี่ยวกับฟิลด์รหัสผ่าน
— Igor Popov
มันเกี่ยวกับการป้อน HTML, รหัสผ่านเป็นอินพุต HTML แน่นอน
— talsibony
2

ดูhttp://caniuse.com/#search=minlengthเบราว์เซอร์บางตัวอาจไม่รองรับคุณสมบัตินี้

หากค่าของ "type" เป็นหนึ่งในนั้น:

ข้อความอีเมลการค้นหารหัสผ่านโทรศัพท์หรือ URL (คำเตือน: ไม่รวมหมายเลข | ไม่มีการสนับสนุนเบราว์เซอร์ "tel"ตอนนี้ - 2017.10)

ใช้คุณลักษณะ minlength (/ maxlength) โดยระบุจำนวนอักขระขั้นต่ำ

เช่น.

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

หรือใช้แอตทริบิวต์ "pattern":

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

หาก "type" เป็นตัวเลขไม่สนับสนุนความยาวminlength (/ maxlength) คุณสามารถใช้แอตทริบิวต์min (/ max) แทนได้

เช่น.

<input type="number" min="100" max="999" placeholder="input a three-digit number">
— levinit
แหล่งที่มา
1

ฉันเขียนโค้ด JavaScript นี้ [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
แหล่งที่มา
1

หากปรารถนาที่จะทำให้ปัญหานี้
มักจะแสดงคำนำหน้าเล็ก ๆ ในช่องใส่หรือผู้ใช้ไม่สามารถลบคำนำหน้า :

   //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
แหล่งที่มา
1

ฉันใช้ max และ min แล้วก็ต้องการมันทำงานได้ดีมาก แต่สิ่งที่ฉันไม่แน่ใจคือถ้าเป็นวิธีการเข้ารหัส ฉันหวังว่ามันจะช่วย

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>
— ฮัมฟรีย์
แหล่งที่มา
1

ในกรณีของฉันซึ่งฉันตรวจสอบด้วยตนเองมากที่สุดและใช้ Firefox (43.0.4) minlengthและvalidity.tooShortไม่สามารถใช้งานได้อย่างน่าเสียดาย

เนื่องจากฉันต้องการเก็บความยาวขั้นต่ำไว้เพื่อดำเนินการต่อวิธีที่ง่ายและสะดวกคือการกำหนดค่านี้ให้กับแอตทริบิวต์ที่ถูกต้องของแท็กอินพุต ในกรณีที่ว่าแล้วคุณสามารถใช้min, maxและstepคุณสมบัติจาก [ประเภท = "จำนวน"] ปัจจัยการผลิต

แทนที่จะเก็บข้อ จำกัด เหล่านั้นไว้ในอาร์เรย์คุณจะพบว่าเก็บไว้ในอินพุตเดียวกันได้ง่ายกว่าแทนที่จะได้รับรหัสองค์ประกอบเพื่อให้ตรงกับดัชนีอาร์เรย์

— คริสเตียนLæirbag
แหล่งที่มา
-4

เพิ่มทั้งค่าสูงสุดและค่าต่ำสุดที่คุณสามารถระบุช่วงของค่าที่อนุญาต:

<input type="number" min="1" max="999" />
— Deepti Gehlot
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.