부트 스트랩 양식을 확인하는 방법

Bootstrap은 CSS 및 JavaScript를 가져와 프로젝트에 추가 할 수있는 양식 검증 기능을 제공합니다. 양식 요소를 생성하고 필드 또는 패턴 속성을 필요한 속성으로 채우도록 강제 특정 형식을 확인하십시오. 확인 메시지를 사용자 정의 할 수도 있습니다. 양식이 제출되면 Bootstrap은 자동으로 수표를 수행하고 오류 메시지를 표시하며 제출물을 차단합니다. FAQ : 검증 비활성화가 필요하고 패턴 속성을 제거합니다. CheckValidity () 메소드는 수동으로 트리거 될 수 있습니다. 유효성 속성은 확인 결과를 얻을 수 있습니다.

부트 스트랩 양식 확인

Bootstrap은 개발자가 양식 입력을 쉽게 확인할 수 있도록 간단하고 사용하기 쉬운 양식 검증 기능을 제공합니다.

부트 스트랩 양식 확인을 사용하는 방법

1. 부트 스트랩 CSS 및 JavaScript 가져 오기

    <code class="html"><link rel="stylesheet" href="path/to/bootstrap.min.css"> <script src="path/to/bootstrap.bundle.min.js"></script></code>

2. 양식 요소를 만듭니다

    <code class="html"><form> <input type="text" id="name" name="name" placeholder="姓名" required> <input type="email" id="email" name="email" placeholder="邮箱" required> <button type="submit" class="btn btn-primary">提交</button> </form></code>

3. 검증 규칙 추가
   required 속성을 사용하여 필드를 채우도록 강제로 사용하십시오. pattern 속성을 사용하여 일반 표현식을 지정하여 입력이 이메일 주소와 같은 특정 형식을 준수하는지 확인할 수도 있습니다.

    <code class="html"><input type="email" id="email" name="email" placeholder="邮箱" required pattern="[a-z0-9._% -] @[a-z0-9.-] \.[az]{2,}$"></code>

4. 사용자 정의 확인 메시지
   data 속성을 사용하여 확인 메시지를 사용자 정의 할 수 있습니다.

    <code class="html"><input type="text" id="name" name="name" placeholder="姓名" required data-invalid-feedback="请输入您的姓名"></code>

5. 양식 제출 양식이 제출되면 부트 스트랩은 자동으로 확인을 수행합니다. 확인이 실패하면 오류 메시지가 표시되고 양식이 제출됩니다.

자주 묻는 질문

• 확인을 비활성화하는 방법?
  required 및 pattern 특성을 제거합니다.

• 수동으로 확인을 트리거하는 방법?
  checkValidity() 메소드 사용 :

   <code class="javascript">document.getElementById("form").checkValidity();</code>

• 확인 결과를 얻는 방법은 무엇입니까?
  validity 속성 사용 :

   <code class="javascript">const nameInput = document.getElementById("name"); console.log(nameInput.validity.valid); // 返回true 或false</code>

위 내용은 부트 스트랩 양식을 확인하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!