Có thuộc tính xác thực tối thiểu trong HTML5 không?

608

Có vẻ như minlengththuộc tính cho một <input>lĩnh vực không hoạt động.

Có thuộc tính nào khác trong HTML5 với sự trợ giúp mà tôi có thể đặt độ dài tối thiểu của một giá trị cho các trường không?

html  html5-validation 
— emilan
nguồn
3
Nó sẽ không phải là câu trả lời cho mọi lĩnh vực, nhưng nếu bạn chỉ muốn chắc chắn rằng có một giá trị thì bạn có thể sử dụng thuộc tính "bắt buộc". <input type = "text" name = "input1" required = "required" />
— Không có
1
— mẹo
7
Nó không tồn tại, nhưng hãy làm ầm lên và đưa nó vào! w3.org/Bugs/Public/show_orms.cgi?id=20557
— Eric Elliott
Bạn cần sử dụng JS / Jquery nếu bạn muốn thực hiện đầy đủ (ví dụ: bắt buộc, tối thiểu, thông báo lỗi khi gửi, v.v.). Safari vẫn không hỗ trợ đầy đủ ngay cả thuộc tính bắt buộc và chỉ Chrome và Opera hỗ trợ tối thiểu. ví dụ: xem caniuse.com/#search=required
— rmcsharry

Câu trả lời:

1326

Bạn có thể sử dụng patternthuộc tính . Các requiredthuộc tính cũng là cần thiết, nếu không một lĩnh vực đầu vào với một giá trị rỗng sẽ bị loại khỏi xác nhận hạn chế .

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

Nếu bạn muốn tạo tùy chọn để sử dụng mẫu cho "khoảng trống hoặc chiều dài tối thiểu", bạn có thể thực hiện như sau:

<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)">
— người dùng123444555621
nguồn
139
+1 để sử dụng html5 thay vì jQuery. Tôi chỉ muốn thêm rằng thuộc tính tiêu đề cho phép bạn đặt thông báo hiển thị cho người dùng nếu mẫu không được đáp ứng. Nếu không, một thông báo mặc định sẽ được hiển thị.
— Không có
11
@ J.Money Nó vẫn nói "Vui lòng khớp định dạng được yêu cầu: <title>". Có cách nào để bỏ qua tin nhắn mặc định trước đó không?
— CᴴᴀZ
59
Thật không may, điều này không được hỗ trợ cho textareas .
— ThiefMaster
27
@ChaZ @Basj Bạn có thể thêm thông báo lỗi tùy chỉnh bằng cách thêm thuộc tính sau:oninvalid="this.setCustomValidity('Your message')"
— bigtex777
6
Nếu bạn nhập một đầu vào không hợp lệ và bạn đang sử dụng setCustomValidity, thì nó sẽ tiếp tục hiển thị cho bạn thông báo lỗi ngay cả sau khi bạn sửa lỗi đầu vào. Bạn có thể sử dụng onchangephương pháp sau để chống lại điều này. oninvalid="this.setCustomValidity('Field must contain min. 5 characters')" onchange="try{setCustomValidity('')}catch(e){}"
— sohaiby
154

Hiện tại có một minlengththuộc tính trong thông số HTML5 , cũng như validity.tooShortgiao diện.

Cả hai đều được kích hoạt trong các phiên bản gần đây của tất cả các trình duyệt hiện đại. Để biết chi tiết, xem https://caniuse.com/#search=minlength .

— rhgb
nguồn
1
Firefox 44 và vẫn chưa được thực hiện.
— Christian Læirbag
2
Vẫn không được hỗ trợ bên ngoài Chrome hoặc Opera. caniuse.com/#search=minlength
— rmcsharry
Đó là tháng 1 năm 2017 và vẫn chỉ hỗ trợ Chrome và Opera
— tối thiểu
2
@TrojanName Firefox hỗ trợ minlengththuộc tính kể từ phiên bản 51 .
— Luca Detomi
16
Nhận xét định kỳ để cập nhật trạng thái trên câu trả lời Stack Overflow này ít hữu ích hơn là bảo mọi người kiểm tra thông tin hiện tại ở đây: caniuse.com/#search=minlength
— chadoh
19

Đây là giải pháp chỉ dành cho HTML5 (nếu bạn muốn tối thiểu 5, xác thực tối đa 10 ký tự)

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
— Ali Çarıkçıoğlu
nguồn
3
Làm cách nào để đặt thông báo lỗi tùy chỉnh nếu trường không ổn?
— Basj
2
Đối với tin nhắn tùy chỉnh thêm titlethuộc tính với thông điệp cần thiết.
— Shlomi Hassid
8
patternCâu trả lời tương tự đã được đưa ra một vài tháng trước đó . Làm thế nào là câu trả lời này tốt hơn?
— Dan Dascalescu
@DanDascalescu Anh ấy không có thẻ mẫu và giải thích rõ ràng. Tôi cũng bao gồm một bản demo jsfiddle làm việc. (btw Quy tắc Stackoverflow nói rằng không cấm đưa ra câu trả lời tương tự miễn là nó hữu ích cho cộng đồng)
— Ali arıkçıoğlu
Một cách để đưa ra một câu trả lời thậm chí tốt hơn là đưa bản demo vào đây trên SO dưới dạng một đoạn mã có thể chạy được .
— Dan Dascalescu
11

Vâng, nó đây Nó giống như maxlength. Tài liệu của W3.org: http://www.w3.org/TR/html5/forms.html#attr-fe-minlength

Trong trường hợp minlengthkhông hoạt động, hãy sử dụng patternthuộc tính như được đề cập bởi @ Pumbaa80 cho inputthẻ.

Đối với textarea: Để cài đặt tối đa; sử dụng maxlengthvà cho min đi đến liên kết này .

Bạn sẽ tìm thấy ở đây cả tối đa và tối thiểu.

— SohelAhmedM
nguồn
8

Tôi đã sử dụng maxlength và minlength có hoặc không requiredvà nó hoạt động rất tốt cho HTML5.

<input id="passcode" type="password" minlength="8" maxlength="10">
Mở rộng đoạn trích

`

— benaff033
nguồn
6

thuộc tính minLạng (không giống như maxLạng) không tồn tại nguyên bản trong HTML5. Tuy nhiên, có một số cách để xác thực một trường nếu nó chứa ít hơn x ký tự.

Một ví dụ được đưa ra bằng cách sử dụng jQuery tại liên kết này: 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
nguồn
1
"MINLENGTH thuộc tính (không giống như maxLength) không tồn tại tự nhiên trong HTML5" Có nó: w3.org/TR/html5/...
— mikemaccana
Vẫn không được hỗ trợ bên ngoài Chrome hoặc Opera. caniuse.com/#search=minlength
— rmcsharry
5

Không phải HTML5, nhưng dù sao cũng thực tế: nếu bạn tình cờ sử dụng AngularJS , bạn có thể sử dụng ng-minlengthcho cả đầu vào và textareas. Xem thêm Plunk này .

— mik01aj
nguồn
Nếu Angular được viết để tuân thủ các tiêu chuẩn, họ sẽ sử dụng một cái gì đó như data-ng-minlengthnhưng tại sao một nhà phát triển lại quan tâm đến các tiêu chuẩn? > __>
— John
4
— mik01aj
4

Giải pháp của tôi cho textarea bằng cách sử dụng jQuery và kết hợp xác thực yêu cầu HTML5 để kiểm tra độ dài tối thiểu.

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>
— Hiệp Định
nguồn
Câu trả lời rất hữu ích và thanh lịch!
— Silvio Delgado
4

minlengththuộc tính hiện được hỗ trợ rộng rãi trong hầu hết các trình duyệt .

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

Nhưng, cũng như các tính năng HTML5 khác, IE11 bị thiếu trong bức tranh toàn cảnh này. Vì vậy, nếu bạn có cơ sở người dùng IE11 rộng, hãy xem xét sử dụng patternthuộc tính HTML5 được hỗ trợ gần như trên bảng trong hầu hết các trình duyệt (bao gồm IE11).

Để có một triển khai tốt và thống nhất và có thể mở rộng hoặc động (dựa trên khung tạo HTML của bạn), tôi sẽ bỏ phiếu cho patternthuộc tính:

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

Vẫn còn một khả năng sử dụng nhỏ khi sử dụng pattern. Người dùng sẽ thấy một thông báo lỗi / cảnh báo không trực quan (rất chung chung) khi sử dụng pattern. Xem jsfiddle này hoặc dưới đây:

<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>
Mở rộng đoạn trích

Ví dụ: trong Chrome (nhưng tương tự trong hầu hết các trình duyệt), bạn sẽ nhận được các thông báo lỗi sau:

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

bằng cách sử dụng minlengthvà

Please match the format requested

bằng cách sử dụng pattern.

— Gabriel Petrovay
nguồn
2

Phiên bản mới:

Nó mở rộng việc sử dụng (textarea và đầu vào) và sửa lỗi.

// 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
nguồn
Cảm ơn cho giải pháp cập nhật thanh lịch này. Nó có hoạt động bên ngoài Chrome / Opera không vì chúng không hỗ trợ minlength? caniuse.com/#search=minlength Tôi mới thử nghiệm nó trên Mac Safari và nó không hoạt động :( Tôi thấy bạn đang thêm eventListener cho các trình duyệt không phải Chrome / Opera, vì vậy có lẽ tôi đang làm gì đó sai.
— rmcsharry
Sau khi gỡ lỗi Safari, có vẻ như var items = this.elements; đang trả về bộ sưu tập FORMS, không phải các mục trong biểu mẫu. Kỳ dị.
— rmcsharry
2

Tôi nhận thấy rằng đôi khi trong chrome khi bật tự động điền và các trường là trường theo phương thức xây dựng trình duyệt tự động điền, nó bỏ qua các quy tắc xác thực tối thiểu, vì vậy trong trường hợp này, bạn sẽ phải tắt tự động điền theo thuộc tính sau:

tự động hoàn thành = "tắt" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
— talsibony
nguồn
Đây không phải là về các trường mật khẩu.
— Igor Popov
Đó là về đầu vào HTML, mật khẩu thực sự là đầu vào HTML.
— talsibony
2

Xem http://caniuse.com/#search=minlength , một số trình duyệt có thể không hỗ trợ thuộc tính này.

Nếu giá trị của "loại" là một trong số chúng:

văn bản, email, tìm kiếm, mật khẩu, tel hoặc url (cảnh báo: không bao gồm số | không hỗ trợ trình duyệt "tel" ngay bây giờ - 2017.10)

sử dụng thuộc tính minlength (/ maxlength), nó chỉ định số lượng ký tự tối thiểu.

ví dụ.

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

hoặc sử dụng thuộc tính "mẫu":

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

Nếu "loại" là số , althougth MINLENGTH (/ maxlength) không được được hỗ trợ, bạn có thể sử dụng tối thiểu (/ max) thuộc tính thay vì nó.

ví dụ.

<input type="number" min="100" max="999" placeholder="input a three-digit number">
— levinit
nguồn
1

Tôi đã viết mã JavaScript này, [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
nguồn
1

Nếu muốn thực hiện hành vi này,
luôn hiển thị một tiền tố nhỏ trên trường đầu vào hoặc người dùng không thể xóa tiền tố :

   //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
nguồn
1

Tôi đã sử dụng tối đa và tối thiểu sau đó yêu cầu và nó hoạt động rất tốt cho tôi nhưng điều không chắc chắn là nếu đó là một phương pháp mã hóa. Tôi hy vọng nó sẽ giúp

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>
— Humphrey
nguồn
1

Trong trường hợp của tôi, trong đó tôi xác nhận hợp lệ nhất bằng cách sử dụng Firefox (43.0.4) minlengthvà validity.tooShortkhông có sẵn một cách đáng tiếc.

Vì tôi chỉ cần lưu trữ độ dài tối thiểu để tiến hành, nên một cách dễ dàng và tiện dụng là gán giá trị này cho một thuộc tính hợp lệ khác của thẻ đầu vào. Trong trường hợp đó rồi, bạn có thể sử dụng min, maxvà steptính từ [type = "number"] đầu vào.

Thay vì lưu trữ các giới hạn đó trong một mảng, dễ dàng tìm thấy nó được lưu trữ trong cùng một đầu vào thay vì lấy id phần tử khớp với chỉ mục mảng.

— Christian Læirbag
nguồn
-4

Thêm cả giá trị tối đa và tối thiểu, bạn có thể chỉ định phạm vi giá trị được phép:

<input type="number" min="1" max="999" />
— Deepti Gehlot
nguồn
Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookie và Chính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.