HTML5에 최소 길이 유효성 검사 속성이 있습니까?

608

필드 의 minlength속성 <input>이 작동하지 않는 것 같습니다 .

필드 값의 최소 길이를 설정할 수 있도록 HTML5에 다른 속성이 있습니까?

html  html5-validation 
— 밀라노
소스
3
모든 필드에 대한 답은 아니지만 값이 있는지 확인하려면 "필수"속성을 사용할 수 있습니다. <input type = "text"name = "input1"필수 = "필수"/>
— 없음
1
— Web_Designer
7
존재하지 않지만 소란을 피우자! w3.org/Bugs/Public/show_bug.cgi?id=20557
— Eric Elliott
전체 구현 (예 : 필수, 최소 길이, 제출시 오류 메시지 등)을 수행하려면 JS / Jquery를 사용해야합니다. 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)">
— 사용자 123444555621
소스
139
jQuery 대신 html5를 사용하는 경우 +1 방금 title 속성을 사용하면 패턴이 충족되지 않은 경우 사용자에게 표시 할 메시지를 설정할 수 있습니다. 그렇지 않으면 기본 메시지가 표시됩니다.
— 없음
11
@ J.Money 여전히 "요청한 형식과 일치하십시오 : <title>". 이전의 기본 메시지를 무시하는 방법이 있습니까?
— CᴴᴀZ
59
불행히도 이것은 텍스트 영역에서 지원되지 않습니다 .
— 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 년 1 월이며 여전히 Chrome 및 Opera 만
— 최소 길이를
2
@TrojanName Firefox는 버전 51minlength 부터 속성을 지원 합니다 .
— Luca Detomi
16
이 스택 오버플로 대답의 상태를 업데이트하는주기적인 의견은 현재의 정보는 여기를 확인하기 위해 사람을 말하는보다 유용합니다 caniuse.com/#search=minlength
— chadoh
19

다음은 HTML5 전용 솔루션입니다 (최소 길이 5, 최대 길이 10 문자 유효성 검사를 원할 경우)

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

<form>
  <input pattern=".{5,10}">
  <input type="submit" value="Check"></input>
</form>
— 알리 카릭 콜로
소스
3
필드가 Ok가 아닌 경우 사용자 정의 오류 메시지를 설정하는 방법은 무엇입니까?
— Basj
2
사용자 정의 메시지 title의 경우 필수 메시지와 함께 속성을 추가하십시오 .
— Shlomi Hassid 2016 년
8
몇 달 전에 같은 pattern대답이 주어졌다 . 이 답변이 어떻게 더 낫습니까?
— Dan Dascalescu
@DanDascalescu 그는 폼 태그와 명확한 설명이 없었습니다. 또한 작동하는 jsfiddle 데모도 포함했습니다. (btw Stackoverflow 규칙에 따르면 커뮤니티에 도움이되는 한 유사한 답변을하는 것은 금지되어 있지 않습니다.)
— Ali Çarıkçıoğlu
더 나은 답변을 제공하는 한 가지 방법은 여기 데모를 실행 가능한 코드 스 니펫으로 포함시키는 것 입니다.
— Dan Dascalescu
8

나는 maxlength와 minlength를 사용하거나 사용하지 않고 requiredHTML5에서 매우 잘 작동했습니다.

<input id="passcode" type="password" minlength="8" maxlength="10">
스 니펫 확장

`

— benaff033
소스
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>
— 발레리 슈뢰더
소스
1
"minLength 속성 (maxLength와 달리)은 HTML5에 기본적으로 존재하지 않습니다."예 : w3.org/TR/html5/…
— mikemaccana
Chrome 또는 Opera 외부에서는 여전히 지원되지 않습니다. caniuse.com/#search=minlength
— rmcsharry
5

HTML5는 아니지만 어쨌든 실용적입니다. AngularJS 를 사용 하면 ng-minlength입력과 텍스트 영역 모두에 사용할 수 있습니다 . 이 Plunk 도 참조하십시오 .

— mik01aj
소스
각도가로 기록 된 경우 표준 준수 가 같이 사용 무언가있을 것입니다 data-ng-minlength하지만 표준에 대한 이유를 것 개발자 관리? > __>
— John
4
— mik01aj 2012
4

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>
— 히프 딘
소스
매우 유용하고 우아한 답변!
— 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.

— 가브리엘 페트로 베이
소스
2

새로운 버전:

사용 (텍스트 영역 및 입력)을 확장하고 버그를 수정합니다.

// 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);
        }
    }
}
— 카를로스 마차도
소스
이 우아한 업데이트 솔루션에 감사드립니다. 최소 길이를 지원하지 않기 때문에 Chrome / Opera 외부에서 작동합니까? caniuse.com/#search=minlength 난 그냥 맥 사파리에 그것을 테스트하고 그것을 작동하지 않음 :( 나는 어쩌면 내가 뭔가 잘못하고있는 중이 야, 당신은 비 크롬 / 오페라 브라우저의의 EventListener를 추가 참조하십시오.
— rmcsharry
Safari를 디버깅 한 후 var items = this.elements; 양식의 항목이 아닌 FORMS 콜렉션을 리턴합니다. 기묘한.
— rmcsharry
2

자동 완성이 켜져 있고 메소드에서 자동 완성 브라우저 빌드에 의해 필드가 필드 인 경우 때때로 크롬에서 최소 길이 유효성 검사 규칙을 무시하므로이 경우 다음 속성으로 자동 완성을 비활성화해야합니다.

autocomplete = "off" 

<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
— 탈시 보니
소스
이것은 비밀번호 필드에 관한 것이 아닙니다.
— Igor Popov
그것은 HTML 입력에 관한 것이고, 암호는 실제로 HTML 입력입니다.
— 탈 시모니
2

http://caniuse.com/#search=minlength를 참조 하십시오 . 일부 브라우저는이 속성을 지원하지 않을 수 있습니다.

"type"값 중 하나가 다음 중 하나 인 경우 :

텍스트, 이메일, 검색, 비밀번호, 전화 또는 URL (경고 : 번호 포함 안 됨 | 브라우저 지원 "전화"없음 -2017.10)

최소 길이 사용 (/ 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"이 number 이면 althougth 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);
    }
}
— 카를로스 마차도
소스
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;
— 카를로스 라파엘
소스
1

나는 max와 min을 사용하고 필요한데 아주 잘 작동했지만 확실하지 않은 것은 코딩 방법입니다. 나는 그것이 도움이되기를 바랍니다

<input type="text" maxlength="13" name ="idnumber" class="form-control"  minlength="13" required>
— 험프리
소스
1

내 경우에는, 여기서 내가 가장 수동으로 파이어 폭스 (43.0.4)를 사용하여 검증, minlength그리고 validity.tooShort불행히도 사용할 수 없습니다.

진행하기 위해 최소 길이 만 저장하면되므로 쉽고 편리한 방법은이 값을 입력 태그의 다른 유효한 속성에 지정하는 것입니다. 그 경우에, 당신은 사용할 수 있습니다 min, max그리고 step[유형 = "숫자"] 입력에서 속성을.

이러한 제한을 배열에 저장하는 대신 요소 ID를 배열 색인과 일치시키는 대신 동일한 입력에 저장하는 것이 더 쉽습니다.

— 크리스찬 레이 르백
소스
-4

허용되는 값의 범위를 지정할 수있는 최대 값과 최소값을 모두 추가하십시오.

<input type="number" min="1" max="999" />
— 딥티 겔롯
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.