javascript - 부트스트랩 양식 유효성 검사에 대한 질문

백그라운드에 설정된 부트스트랩은 스타일 측면에서 대부분의 스타일을 만족시킬 수 있지만 기성 부트스트랩 템플릿을 사용하는 양식 제출에 문제가 있습니다. 코드는 다음과 같습니다

<code>  <form class="form-signin">
    <h2 class="form-signin-heading">Please sign in</h2>
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  </form>

</div> <!-- /container -->

</code>

양식 검증 방법에 관해서는 공식 홈페이지에 소개가 없습니다. require가 무슨 뜻인지는 알지만 이 부분에 대한 소개는 어디서 볼 수 있는지 알고 싶은데 공식 홈페이지에서는 찾을 수 없습니다. . 모두 감사합니다

비동기적으로 제출하기 위해 ajax를 작성했는데 작동하지 않았기 때문입니다. 비동기 제출을 위해 bs와 함께 제공되는 확인 양식을 사용하고 싶습니다. 감사합니다

답글 내용:

백그라운드에 설정된 부트스트랩은 스타일 측면에서 대부분의 스타일을 만족시킬 수 있지만 기성 부트스트랩 템플릿을 사용하는 양식 제출에 문제가 있습니다. 코드는 다음과 같습니다

<code>  <form class="form-signin">
    <h2 class="form-signin-heading">Please sign in</h2>
    <label for="inputEmail" class="sr-only">Email address</label>
    <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
    <label for="inputPassword" class="sr-only">Password</label>
    <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
    <div class="checkbox">
      <label>
        <input type="checkbox" value="remember-me"> Remember me
      </label>
    </div>
    <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
  </form>

</div> <!-- /container -->

</code>

양식 검증 방법에 관해서는 공식 홈페이지에 소개가 없습니다. require가 무슨 뜻인지는 알겠는데 이 부분에 대한 소개는 어디서 볼 수 있는지 알고 싶은데 공식 홈페이지에는 없네요. . 모두 감사합니다

비동기적으로 제출하기 위해 ajax를 작성했는데 작동하지 않았기 때문입니다. 비동기 제출을 위해 bs와 함께 제공되는 확인 양식을 사용하고 싶습니다. 감사합니다

간단합니다.

<code>$("form").submit(function(e){
    e.preventDefault();   // disabled default action
    // do something and ajax ....
    $.post("url", $("form").serializeArray())
    .done(function(){})
    .failed(function(){})
    
  });</code>

처리를 위해 양식 데이터를 ajax에 제출하기 전에 데이터를 확인하는 함수를 작성합니다. 성공하면 ajax로 전달되고, 실패하면 프롬프트 메시지가 반환됩니다.

폼 태그에 액션의 서버 주소를 적어주세요.

github에서 검색했는데 많이 있습니다. https://github.com/search?utf8=✓&q=Bootstrap Validator를 선택하세요

jQuery Validate Tutorial http://www.runoob.com/jquery/jquery-plugin-validate.html 페이지를 볼 수 있습니다

이를 수행하는 데 도움이 되는 플러그인이 있습니다

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. 최고의 그래픽 설정

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션

1 몇 주 전 By DDD

R.E.P.O. 아무도들을 수없는 경우 오디오를 수정하는 방법

3 몇 주 전 By 尊渡假赌尊渡假赌尊渡假赌

Atomfall에서 크레인 제어 키 카드를 찾을 수 있습니다

1 몇 주 전 By DDD

더보기

뜨거운 도구

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7435

15

Cakephp 튜토리얼

1359

52

Steam의 계정 이름 형식은 무엇입니까?

76

11

Win11 활성화 키 영구

29

19

더보기