부트 스트랩 4가있는 양식 유효성 검사

Question

건물 유효성 확인 양식을 이해하는 데 문제가 있습니다. 부트 스트랩 현재 ​​문서에서이 JS 코드 (소위 스타터 코드)의 조각 :

<script> 
// Example starter JavaScript for disabling form submissions if there are invalid fields 
(function() { 
    'use strict'; 

    window.addEventListener('load', function() { 
    var form = document.getElementById('needs-validation'); 
    form.addEventListener('submit', function(event) { 
     if (form.checkValidity() === false) { 
     event.preventDefault(); 
     event.stopPropagation(); 
     } 
     form.classList.add('was-validated'); 
    }, false); 
    }, false); 
})(); 
</script> 

하고 그것을 잘 작동하지만 난 패스워드 검사를 구현하려는 경우 나는 예를 들어, 어떻게해야합니까? 올바른 부트 스트랩에는 css 클래스가 있습니다. 유효하고 : 필드가 비어있을 때 실행되지 않습니다. 어떤 조건이 (예 : 8 자 미만의 암호)있을 때 실행하고 싶습니다.

<form id="needs-validation" novalidate> 
    <div class="form-row"> 
     <div class="form-group col-md-6"> 
      <label for="inputPassword1">Password</label> 
      <input type="password" class="form-control" name="inputPassword1" id="pass1" placeholder="password" required> 
     <div class="invalid-feedback"> 
      Please provide a valid password. 
     </div> 
    </div> 
</form> 

Answer 1

패턴 속성을 사용할 수 있습니다. From MDN :

패턴 컨트롤의 값에 대해 을 선택되어 있는지 정규 표현식. 패턴은 일부 하위 집합이 아닌 전체 값과 일치해야합니다. 제목 속성을 사용하여 사용자를 돕기위한 패턴을 설명하십시오. 이 속성은 type 속성의 값이 텍스트, 검색, tel, url, 이메일 또는 비밀번호 일 때 적용되며, 그렇지 않으면 무시됩니다. 정규 표현식 언어는 알고리즘과 동일하며 패턴을 유니 코드 코드 포인트로 처리하는 'u'매개 변수를 사용합니다. 패턴은 슬래시로 둘러싸여 있지 않습니다.

예를 들어, 다음이 암호는 최소 8 대문자와 문자, 소문자와 숫자임을 확인합니다 :

<form id="needs-validation" novalidate> 
    <div class="form-row"> 
     <div class="form-group col-md-6"> 
      <label for="inputPassword1">Password</label> 
      <input type="password" class="form-control" name="inputPassword1" id="pass1" placeholder="password" 
        pattern="^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{8,}$" 
        required> 
     <div class="invalid-feedback"> 
      Passwords should be a minimum of 8 characters and include at least one upper case letter, one lower case letter and one number. 
     </div> 
    </div> 
</form>